jQuery Grid Plugin – jqGrid

Looks perfect! I’ll let you know if I have any troubles working with it tonight or tomorrow. Thank you again!
Sid

Hi Tony,

I need a grid with a dynamic height. So when I build my grid, I set height:”. It works fine on firefox but not on IE. Do you have any idea how to manage this?

I also tried rowheight parameter but it doesn’t work (Note that it didn’t change the property overflow hidden and white-space nowrap in the CSS). My datatype is set to local.

Thank you

Pascal,
please use height:’0′ if possible.
Here is the code which deal with a height:
css({ height: ts.p.height+(isNaN(ts.p.height)?””:”px”), padding: “0px”, margin: “0px”, overflow: “auto”, width: (grid.width)+17+”px”})

This seems to be a css problem with IE. In your case the result is something like:
css({height:px…})
Maybe I shuld check this and set it to 0 if this parameter is empty.

About the second problem – this is true – the rowheight does not have any related actions if we use a datatype: local when initialize the grid. I hope to do that to the final release.

Regards
Tony

Hi Tony,

The select functionality seems to have changed. I can now click on a row for a multiselect grid and the row will change color as if it’s been selected, but the checkbox doesn’t get checked unless I click directly on it. This makes it so that I can unselect a checked row and it remains checked, and then if I were to uncheck the checkbox, the row will then be selected. Is this a bug or new functionality that’s confusing me?

Thank you

Hi snowDrummer,
This bug was in the first releases of the 3.0. It is corected. Maybe you use a older version of jqGrid. Please ensure that you use
…
* jqGrid 3.0 rc – jQuery Grid plugin 29/10/2007
* rev. 13 26/11/2007
…
If you use this version and have a problem plese give a link (if possible to see what is happen).
Please go into the Demo page and check if the problem is the same. See the multiselection examples.

P.S. The functionality is not changed. I have add only a second parameter to onSelectRow if multiselect is not true.

Regards
Tony

More: The checkboxes are only getting id’s of ‘jqg_’, there is no row id (if i switch back to the previous version I was using (Revision 4), they have their correct element id’s (jqg_1, jqg_6, jqg_22, etc.). I’ll let you know if I determine the root of the problem, but I hope this gives you a good lead on it.

Thank you again

snowDrummer ,

What is the version of jQuery?

I’m using Revision 13 right now… maybe it’s just an unlucky revision… I can’t post a direct link unfortunately, but I’ll try to reproduce the problem on a page that I can share.

Thank you

jQuery 1.2.1 (packed, though it shouldn’t matter)
jqGrid 3.0rc rev. 13

Okay, I made my example as simple as possible to demonstrate what’s going on. Here’s the link: http://www.insyt.biz/jqGridExample/
Thank you Tony

Here’s a link to what I’m experiencing: http://www.insyt.biz/jqGridExample/
I am loading my data via XML, the example just has a static xml file but I’m generating the xml in my app. Your multiselect example uses JSON, so that may be the difference right there. Let me know if you need more info, and thank you again.

Hi Tony,
That works, but one thing had changed that I’m not sure if you intended or not.
For the function onSelectRow, rowid was the id attribute for the row element in the source XML. I’ve updated the example I have at http://www.insyt.biz/jqGridExample/.

The functionality I expect when selecting the first row is an alert that says ‘Selected Row ID: 190’, but instead I get ‘Selected Row ID: 1’. I’m pretty sure I can work around this, but I’d prefer it working as it did before.

Thank you

snowDrummer,
Sorry it is a dummy error. Right now I will correct this and let you known
Tony

snowDrummer,
I hope that this will work as expected.
Please check it at:
http://www.trirand.com/jqgrid/js/jquery.jqGrid.js
Regards

Awesome! Thank you!

I’m going to try making context menus for my rows at some point. I’ve looked a couple jquery plugins which override the browser’s default context menu and I think it would be incredible to be able to right click on a row and then select from several things a user may want to do with that row (edit, delete, copy, whatever). Is this anything you’ve considered implementing or will I be on my own for that one?

That functionality would work perfectly, but I think it may be more difficult than it would seem. I haven’t done my own experimenting yet with overriding the browser’s default right click functionality, so I don’t know how much trouble it will truly be. I believe you can do it! Thank you again,
sD

I’ve played with the examples. They look great.

For my application I need some features, at least both some kind of autocomplete and datepicker.

Autocomplete: Start typing an account number, and the app will help you.
Datepicker: Sometimes I need to enter start/end date things.

Will this be easy to do? I guess I ask if it’s easy to integrate other plugins in general.

I haven’t embedded a datepicker inside of a jqGrid yet, but the datepicker plugin I use should be easy to use in conjunction with jqGrid. You would use CDATA to generate the elements you need for your datepickers within the cells of the grid, and have the loadComplete callback call the function which creates your datepickers. Is that right Tony?

I have another question, could we add a selected attribute to the xml rows so that if I were to return for instance , the row would be selected immediately once the grid is loaded?

Thank you!

Is there anyway to rotate the table. In a master/detail situation, I want the large table at the top with the columns left to right, but when selecting one, which returns a single unique dataset, I want the table to go up and down, with the headers on the left and the fields on the right.
master
col1 col2 col3
xx yy zz

Detail
col1 xx
col2 yy
col3 zz
col4 aa

Pretty nice stuff. I am integrating it with ez_mysql and ez_select which allows for quick building of sql on the fly.
Thanks
Katherine

@snowDrummer,
I have configured the right click to work as well, but there is a “problem” when a multiselect is true. Example: let multiselect is false – in this case all goes ok – the user right click on some row – the row is selected and the function onRightClick is executed, but when multiselect is true in terms of jqGrid if the row is selected before it is unselected and onRightClick is executed and vice versa. I think that this logic is not applicable.
I think for another approach: When we right click instead of selection we should mark this column with another color maybe and execute the onRightClick function. What do you think about this?

Looking forward to the hide column function

Regarding onRightClick, I wouldn’t need it for my multiselect grid’s, so I’m not concerned with having a different colored selector. I would avoid the second selector because it doesn’t seem intuitive to me. Instead, you could split the methods up so that you have onClick, onRightClick, and onSelectRow. That way you could define whether onClick or onRightClick selects the row and fires the onSelect event.

I’d like to make it so that you can only select rows in one of my multiselect grids by clicking on the checkbox, and I think that would be easy to do if onSelectRow was split into onClick and onSelectRow. That way I could doubleclick the rows without selecting/deselecting them and such.

Regarding the selected attribute, the method you described is exactly what I’m doing, except I was using a setTimeout instead of loadComplete since I was on jqGrid 2.0 when I made the grid, I’m switching it over now :).

Thank you!

snowDrummer,
You are right.
Ok there is a new release at the same place:
http://www.trirand.com/jqgrid/js/jquery.jqGrid.js

For compatibility the function is onRightClickRow and accept a parameter row id.
One more note. This does not work with Opera browsers, but I will find a solution for this.
Regards
Tony.

wow – you are fast – I see the new function hideCol. Now how would I use it in your master/detail example. I want to link the details page to the maters page byuser_ID but I don’t want user_ID to display in either the master or detail table.
I’ll try to plugin another plugin for the “record form”

Thanks, snowDrummer & tony.

Do any of you have an example that shows this? New to jQuery and jqGrid, a lot of variables that obscures the understanding.

This looks TOO simple 🙂

Hello,

I really like jqGrid, very good work, keep it up.

Is there a way to “resort” the table after a addRowData call?
I tried to call sortData, but that failed, because of some undefined
or uninitialized internal variables.
Do you plan to add a sort function?

Of course clicking on the column works for sorting, but I’d really
like to automate it.

Greetings

Hello again,

I found a simple solution.
Just adding

$.fn.sort = sortArrayData;

allows me to call sort() with the wished result.
You might want to add something similar to the official API.

I also needed sorting for the German date format, adding this code to the else-if ladder in sortArrayData allows me to do that.

else if(st == ‘date-local’) { //german local date
findSortKey = function($cell) {
var date_parts = $cell.html().split(‘.’);
return new Date(date_parts[2],date_parts[1],date_parts[0]).getTime();
}
}

tobgle,
Since is not possible to include all user recommendations in jqGrid I will recommend you to extend jqGrid like other jQuery plugin. This way you will have the new version with all new functionalities and will save your work.
Now one good news – I have make a dateParser function – this way you can parse any date format. The only restriction is that the data values (for now) can only be a numeric.
The implementation is very easy – you can add a new property in colModel. The name is datefmt. Example
…
{name :’mydate’, sorttype:’date’, datefmt:’d.m.Y’…}
The formating is like the PHP function date
You can download the revision from download section.

Regards

Hello Tony,

did you mean that it is not possible to include a sort() function or something similar?
jQuerie’s extensibility is neat, but how would I make use of it in this case?
sortArrayData is inside a function and not visible at the outer level, that’s the reason I had to put $.fn.sort = sortArrayData; directly under the function. And I currently don’t see how to extend it in a third-party file.

The date parser is pretty cool and of course a much cleaner solution than mine, great!

Greetings

tobgle,
It is not trivial task, but I will try (I should check a couple of other conditions like sortable…). Lets extend this for all datatypes (xml,JSON). I have a idea to call a sort method with parameter (column) – if column is not set we should use the current an resort; if the column is set we should make new sorting – what do you think about this?

Regards

hey tony,

I’m not into the code like you, I guess that every choice you make is well reasoned. 🙂

I hope you didn’t get me wrong, I didn’t want a sort to be executed after every addRowData call automagically, my request was just that there was an accessible sort trigger at all. Of course, it would be nice to be able to set the column and the sort order (‘asc’ or ‘desc’). A sane fallback to the defaults and it’d be perfect.

Thanks for all of your efforts. I love the jquery-community.

Greetings

tobgle,
Here you are 🙂 .
There is new method called sortGrid – the parameters are:
sortGrid(colname, reload) where
colname is the name or a index from colModel
reload (boolean) – if true the grid will be sorted with the old settings (page,sortorder and etc) the default value is false.
If colname is not set the method get the last sorted column.
Note that this method can work with xml and JSON data.
If you want to manipulate the sorting you can use the another two methods:
setSortOrder and setSortName and then call the sortGrid with reload = true and empty colname – I hope this help.
You can download the last Revision from Download section (use Last revision of jqGrid)

Enjoy

P.S By the way you can do the same with trigger(“reloadGrid”) – ie
jQuery(“mygrid”).trigger(“reloadGrid”) will reload the grid with the current settings. Of course you can use before that setSortOrder and setSortName to change the settings. The only difference between these two methods is that with sortGrid method a callback onSortCol is executed. Writting this I found a little bug when sorting is local. This will be corrected as soon as possible.
Already corrected 🙂

Very Nice!!!!

I am using data from my accounting software and testing the Master-Detail example.

Master data loads ok.

Detail will load OK at the start if I use following:
jQuery(“#list10_d”).jqGrid({
url:’/ajaxphp/subgrid.php?q=1&invoice_number=4′,

but I cannot get the onSelectRow of the Master to work:
colModel:[
{name:’invoice_number’,index:’invoice_number’, width:55},
…
onSelectRow: function(invoice_number) {

invoice_number is undefined for onSelectRow in the above and thus the data does not load for the detail.

NOTE: the example file shows the following:
colModel:[
{name:’id’,index:’id’, width:55},
…
onSelectRow: function(ids) {
colModel uses “id” but onSelectRow uses “ids”

to test the onSelectRow: function(invoice_number) in the master, I set invoice_number=4. Still does not work. (The LOADING block does flash for the Detail so it seems to try)
jQuery(“#list10_d”).setUrl(“/ajaxphp/subgrid.php?q=1&invoice_number=4”);

PHP
$responce->rows[$i][‘invoice_number’]=$row[invoice_number];
$responce->rows[$i][‘cell’]=array($row[invoice_number],$row[invoice_date],$row[customer_name],$row[sub_total],$row[sales_tax_total],$row[invoice_total],$row[comments]);

Any help?

.

Tony,

Every bit of your last comment sounds amazing.
I will check this out tonight!

Greetings

thanks. changed the PHP and now the onSelectRow now passes the correct invoice_number/id.

but the detail still does not show.

JS
colNames:[‘No’,’Inv No’,’Item’, ‘Qty’, ‘Unit’,’Line Total’],
colModel:[
{name:’uno’,index:’uno’, width:55},
{name:’invoice_number’,index:’invoice_number’, width:55},

PHP – subgrid.php
$responce->rows[$i][‘id’]=$row[uno];
$responce->rows[$i][‘cell’]=array($row[uno],$row[invoice_number],$row[item_desc],$row[quantity],$row[line_rate],number_format($row[line_total],2,’.’,’ ‘));

uno is auto_increment in sql table

I tried to just replace your column names with my column names as above but still no detail lines.

FYI

if id=4 in the following:
jQuery(“#list10_d”).setUrl(“/ajaxphp/subgrid.php?q=1&invoice_number=”+id);

then ajaxphp/subgrid.php?q=1&invoice_number=4” produces:
{“page”:1,”total”:2,”records”:”2″,”rows”:[{“id”:”2″,”cell”:[“2″,”4″,”item descreption 2 for this line”,”4.00″,”15.00″,”60.00″]}]}