jQuery Grid 3.0 rc
October 7th, 2007
At end 3.0 (rc) version of jqGrid is out. This version is a major release, because I have totally rewrite the code for the methods without affecting the behavior of the plugin.
The grid is now compatible with jQuery 1.2.1, but in the example page I use 1.1.4 version of jQuery. The problem is that with 1.2.1 jqGrid has a little slowly behavior. I do not know why?
The example page is totally rewritten. Every example has a separate code for html and javascript. You can view this here.
This version fixes a lot of bugs relating to json data, formating, xml manipulation and add following features.
- The user can now manipulate the number of requested pages. This is done with adding a input box in the pager.
- I have added 4 methods – add, update, delete get row data. With these method we can manipulate the data at client side and of course a possibility to add local array data. See documentation for more information.
- Added is a method to load data only once from the server – loadonce flag in settings. After loading data we do all the manipulation at client side – sorting, scrolling ant etc. Note that in this case pager is disabled.
- Added is a new data type – local (against with xml and json). When this flag is set the grid expect data to be loaded locally via array.
- Now we can multi select rows. This can be done with only one flag multiselect. This feature can be used with server and local array data.
- For first time I introduce a sub grid. This feature can work only with xml data for now. The code and style for sub grid must be optimized and should be used with json too. See example page for more details.
- It is possible now to export the grid data to xml and json format. This is done with two new methods.
- A few new methods are added according to the new features – see documentation page for this.
- New theme of course
Hi,
What is not show? The grid or data? If no data, but still the response is not empty – do you call after setUrl() the jQuery(“#list10_d”).setPage(1); and the jQuery(“#list10_d”).trigger(“reloadGrid”);
Try to pass to the subgrid url non empty id something like:
jQuery(“#list10_d”).jqGrid({
height: 100,
url:’subgrid.php?q=1&invoice_number=4′,
datatype: “json”,
…
or configure both grid independent and then use onSelectRow method
What is? happen
Hi:
Great plugin, have a question.. we are building an ajax based POST query, we cant use GET method, can we work it with jqgrid? how?
thank you.
Hi Alejandro,
Yes You can use the plugin with POST – there is a option ‘mtype’ which default value is GET. If you change this to mtype:”POST” all requests will be made via POST
Regards
I am looking at your examples, the search big sets is very interesting but with POST doesnt work I cant make the POST variable for the query, Am I failling ? or it only works with GET?
Hey Toni,
I finally tested the new sorting functions. The reloadGrid trigger worked very well, but I couldn’t get to work sortGrid right from the start, so I debugged it and found two bugs.
Here is the new code, where I commented on my changes.
$.fn.sortGrid = function(colname,reload){
var $t=this[0],idx = -1; //idx was originally initialized with zero, so the test if(idx) excluded the possibility to sort by the first col (0)
if(!colname)
colname = $t.p.sortname;
for(var i=0;i
Hey Toni,
I finally tested the new sorting functions. The reloadGrid trigger worked very well, but I couldn’t get to work sortGrid right from the start, so I debugged it and found two bugs.
Here is the new code, where I commented on my changes.
$.fn.sortGrid = function(colname,reload){
var $t=this[0],idx = -1; //idx was originally initialized with zero, so the test if(idx) excluded the possibility to sort by the first col (0)
if(!colname)
colname = $t.p.sortname;
for(var i=0;i
I’ve to send it again, because of html-code messups.
for(var i=0;i < $t.p.colModel.length;i++) {
if($t.p.colModel[i].index == colname || //in the original code it was checked for *.index == colname two times
$t.p.colModel[i].name == colname) {
idx = i;
break;
}
}
if(idx != -1){ //originally the first column was excluded
var sort = $t.p.colModel[idx].sortable;
if( typeof sort !== ‘boolean’) sort = true;
if( typeof reload !==’boolean’) reload = false;
if(sort) $t.sortData(colname, idx, reload);
}
return false;
}
Yeah and greetings.
sorry, I’ve been testint the Big Set Examples and work very good until I switch the method to POST, the first query it does, I mean the url: query works good, fills all the grid, but when it comes to query the databases with inputs it doesnt work with POST, only with GET method.
If I am mistaken can you give a tip?
Thanks
Alejandro,
The other think is on php script – Do you have make:
id= $_POST[‘id’]
….
instead of $_GET[‘id’]
The same apply to other parameters
tobgle ,
Thank you very much for the corrections – you are right.
The changes are made and published to the site.
Thank you again.
P.S. The other difference between these two methods – reloadGrid and SortData is that you can sort columns with reloadGrid which are not sortable in the colModel 🙂
Best Regards
Tony
uploaded the jqGrid files again and now all works.
I really like your plugin and recommend it to others.
I tried to sign up to the forum but either the confirmation came to my spam folder or it somehow failed.
Yeah I did on the php file $_POST to capture the data from the variables posted from the inputs.. and doesnt work..see on the first query for filling the grid I use mtype:”POST” but with query from the search button I have to get the data on the PHP file $_GET is strange but gets no data to build the sql string with $_POST.
aw.
Tony,
now there is only one feature missing in your grid plugin, I think.
My problem is, I’ve column data, which represents ids in database
tables, but for usability reasons I don’t want a grid with numeric, plain ids, the user should see the name which is connected to this id.
So what I’d like see in your grid plugin would be an abstraction layer between representation and data, model and view if you will.
Let’s say I’ve a column with people name’s and these people all have a unique id in my database and software.
A solution could be to add an option to the colmodel like ‘separate_data_view’, except with a better name. The user could set a function that takes the real data and converts it to the representational text.
I want that my php script receives only the real data and that the representation layer doesn’t generate any extra traffic.
Greetings
tobgle
@alejandro,
The grid work with post, but to make all data posted to the server in bigdataset example it is needed maybe to create a form with method post and then create a button to submit the data from the form. Do not forget to use $_POST in the script.
@tobgle,
I know that there are a couple of undocumented features – the one of them is a xmlReader and jsonReader (if I understand you right). Go into the example page and select Data Mapping examples. In your case you can do this with more than one way:
1. In colModel – specify {name:”somename”…,key:true}
In this case you do not worry about the data from server -i.e. you should not set the id attributte in xml or json.
2. Using the xmlReader (or jsonReader). In this way you can use xmlmap(or jsonmap ) property in colModel and specify the id which can be attribute from xml (json) or real data.
I hope this helps.
P.S.The documentation is still in progress
Regards
Tony
Tony,
I was wondering if you could tell me how to support JSON in the following format. Have tried a couple of methods, but with no success.
Here is the data.
{“recordcount”:53,”columnlist”:”gallery,height,path,photo_id,thumbheight,thumbpath,thumbwidth,width”,”data”:{“gallery”:[“china”,”china”,”china”,”china”,”china”,”china”,”china”,”china”,”china”,”china”,”china”,”china”,”china”,”china”,”china”,”china”,”china”,”china”,”china”,”china”,”china”,”china”,”china”,”egypt”,”egypt”,”egypt”,”egypt”,”egypt”,”egypt”,”egypt”,”egypt”,”egypt”,”egypt”,”egypt”,”egypt”,”egypt”,”egypt”,”egypt”,”egypt”,”egypt”,”egypt”,”paris”,”paris”,”paris”,”paris”,”paris”,”paris”,”paris”,”paris”,”paris”,”paris”,”paris”,”paris”],”height”:[350,263,263,263,467,467,467,263,350,350,263,263,263,263,263,476,350,350,350,350,263,263,263,262,262,262,262,262,262,262,262,199,199,350,263,263,263,263,263,263,263,262,350,263,350,350,262,350,350,350,262,262,262],”path”:[“china_01.jpg”,”china_02.jpg”,”china_03.jpg”,”china_04.jpg”,”china_05.jpg”,”china_06.jpg”,”china_07.jpg”,”china_08.jpg”,”china_09.jpg”,”china_10.jpg”,”china_11.jpg”,”china_12.jpg”,”china_13.jpg”,”china_14.jpg”,”china_15.jpg”,”china_16.jpg”,”china_17.jpg”,”china_18.jpg”,”china_20.jpg”,”china_21.jpg”,”china_22.jpg”,”china_23.jpg”,”china_24.jpg”,”egypt_01.jpg”,”egypt_02.jpg”,”egypt_03.jpg”,”egypt_04.jpg”,”egypt_05.jpg”,”egypt_06.jpg”,”egypt_07.jpg”,”egypt_08.jpg”,”egypt_09.jpg”,”egypt_10.jpg”,”egypt_11.jpg”,”egypt_12.jpg”,”egypt_13.jpg”,”egypt_14.jpg”,”egypt_15.jpg”,”egypt_16.jpg”,”egypt_17.jpg”,”egypt_18.jpg”,”paris_01.jpg”,”paris_02.jpg”,”paris_03.jpg”,”paris_04.jpg”,”paris_05.jpg”,”paris_06.jpg”,”paris_07.jpg”,”paris_08.jpg”,”paris_09.jpg”,”paris_10.jpg”,”paris_11.jpg”,”paris_12.jpg”],”photo_id”:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53],”thumbheight”:[75,56,56,56,75,75,75,56,75,75,56,56,56,56,56,75,75,75,75,75,56,56,56,56,56,56,56,56,56,56,56,56,56,75,56,56,56,56,56,56,56,56,56,56,75,75,56,75,75,75,56,56,56],”thumbpath”:[“china_01.jpg”,”china_02.jpg”,”china_03.jpg”,”china_04.jpg”,”china_05.jpg”,”china_06.jpg”,”china_07.jpg”,”china_08.jpg”,”china_09.jpg”,”china_10.jpg”,”china_11.jpg”,”china_12.jpg”,”china_13.jpg”,”china_14.jpg”,”china_15.jpg”,”china_16.jpg”,”china_17.jpg”,”china_18.jpg”,”china_20.jpg”,”china_21.jpg”,”china_22.jpg”,”china_23.jpg”,”china_24.jpg”,”egypt_01.jpg”,”egypt_02.jpg”,”egypt_01.jpg”,”egypt_04.jpg”,”egypt_05.jpg”,”egypt_06.jpg”,”egypt_07.jpg”,”egypt_08.jpg”,”egypt_09.jpg”,”egypt_10.jpg”,”egypt_11.jpg”,”egypt_12.jpg”,”egypt_13.jpg”,”egypt_14.jpg”,”egypt_15.jpg”,”egypt_16.jpg”,”egypt_17.jpg”,”egypt_18.jpg”,”paris_01.jpg”,”paris_02.jpg”,”paris_03.jpg”,”paris_04.jpg”,”paris_05.jpg”,”paris_06.jpg”,”paris_07.jpg”,”paris_08.jpg”,”paris_09.jpg”,”paris_10.jpg”,”paris_11.jpg”,”paris_12.jpg”],”thumbwidth”:[56,75,75,75,56,56,56,75,56,56,75,75,75,75,75,56,56,56,56,56,75,75,75,75,75,75,75,75,75,75,75,75,75,56,75,75,75,75,75,75,75,75,75,75,56,56,75,56,56,56,75,75,75],”width”:[263,350,350,350,350,350,350,350,263,263,350,350,350,350,350,350,263,263,263,263,350,350,350,350,350,350,350,350,350,350,350,350,350,262,350,350,350,350,350,350,350,350,262,350,262,262,350,262,262,262,350,350,350]}}
Timothy,
Currently jqGrid can not be configured via data returned from the server.
In other words you should manually configure the headers and names of the grid.
Only data can be parsed using the jsonReader or xmlReader. Please look into the example page and see haw you can parse data.
Regards
Tony
Tony,
I looked at your jsonReader examples, and I believe this can work for me, but maybe I just don’t quite understand it yet.You are using an array, that has structures as array elements. In my data, I have a structure, with each key containing an array. Sort of an inversion of what your data sturcture is. I tried the following, but couldn’t get it to work yet.
jsonReader:{repeatitems:true,page:1, total:”53″, records:53, root:”data”, id: “data.photo_id” }
This is what I get when I take my query object and just json encode it.
Thanks alot for the help,
Timothy
Hi Timothy,
Let me explain the readers – in this case jsonReader:
repeatitems – this means that the element that holds the data array has the same name defined with the cell element, which root is root element. So in case of
repeatItems: true,
root: “data” ,
cell: “cell”
the data should look like this:
{total: xxx, page: yyy, records: zzz, data: [ {cell:[item1..,itemN]},{cell:[..]}… ]}.
If the cell element is “” then this shoild look like this:
{total: xxx, page: yyy, records: zzz, data: [ {item1..,itemN},{…} ]}.
Now the id.
If you set the id to some name (as in you example) then in this case the data should look like this:
{total: xxx, page: yyy, records: zzz, data: [ {photo_id:”1″,cell:[item1..,itemN]},{photo_id:”2″,cell:[..]}… ]}.
If you set the id to number e.g “0”,”1″,”2″…, then the program think that the first second… element holds the id for the row. Example:
repeatItems: true,
root: “data” ,
cell: “cell”
id: “0”
{total: xxx, page: yyy, records: zzz, data: [ {cell:[item1..,itemN]},{cell:[..]}… ]}.
In this case item1 will be the id of the row.
I hope this helps.
Regards
Tony
Tony, firstly thx for nice grid you provide…
i ve got two questions:
first, what i have to do to make grid save data to the server (im msql novice so if you can explain in detail) 🙂
and secondly, i want to enable central european character encoding..my question is where and what kind of changes i have to make to accomplish that?
thx a lot!
mario
Tony,
Thanks for your help with the jsonReader. I think I understand what I need to do now. Now another question. With the xmlParser do you support attributes?
For example I have an xml file with the following structure.
… other xml elemets.
I can already use this data as a datasource for my grid that is fine, but I haven’t been able to select that ID attribute of the employee tag.
Thanks again, your grid is very cool,
Timothy
whoops,
my mistake 🙂
Forgot that it wouldn’t show my xml markup if I didn’t encode the signs. So here it is again so that you can see if you can help me.
<employees>
<employee id=”myID”>
….Other xml element nested here
</employee>
</employees>
Thanks again,
Timothy
Mario,
Generally you can do this two ways.
1. Using the methods addRowData,setRowData,delRowData – this methods are able to manipulate the data at client side. In this case before manipulating the data you should use your own post ajax method to post data to the server. You should maybe get back response from the server if the data is ok and then use these methods to manipulate the data. This is usually used if you have separate form for the data.
2. Using editRow, saveRow, restoreRow methods. (See examples Row editing).
With these methods you can use the build in functionality to post the data to the server and manipulate it. Usually used if do not have separate form for the values
About encoding I can give you some directions.
1. Encoding in the database (if you use mysql maybe you should use SET NAMES command with your encoding after every connect. There are other ways to do that-read mysql documentation )
2. If you use xml you should send header with the charset that you use. See examples
3. Encoding into the html – use meta tag to define you encoding.
I hope this will help
Regards
Tony
Timothy,
xmlReader is similar as jsonReader, but is more “user friendly”, because of the nature of the xml. Generally in xmlReader you can use a CSS rules to parse the data. Example “books>ASIN” will get the value ASIN which parent is books.
About the id. Yes the id use a CSS specification to get attribute. If you set in the reader id:”[id]” you can use the id attribute of the row element. If you set id:”[myid]” the parser will get value from myid attribute of the row element. The id can be a element from the xml data. Example: id:”ASIN” will get the value ASIN from row (parent) element. Important note. If you use attribute you can specify only [attribute] and NOT element[attribute] for the id.
I personally recommend you to use a “key” option in the colModel (if you do not have any special data mapping).
Example: in colModel
{name:???somename?????¦,key:true}
In this case you do not worry about the id -i.e. you should not set the id attributte in xml or json. jqGrid will assign the value of this cell as id.
I hope this helps. If you have any questions please let me known.
Regards
Tony
thx Tony!
ill see what i can do…
In fact Tony what i meant was how to make the jqGrid saving data to the server because you wrote im quoting:
Due to security reasons data is not saved to this server.
What i have to enable, and where?
thx!
Hi mario,
Ok here is a simple example:
I suppose that you have the colModel like this
[
{name:’id’,index:’id’, width:55},
{name:’invdate’,index:’invdate’, width:90},
{name:’name’,index:’name’, width:100},
{name:’amount’,index:’amount’, width:80, align:”right”,editable:true},
{name:’tax’,index:’tax’, width:80, align:”right”,editable:true},
{name:’total’,index:’total’, width:80,align:”right”},
{name:’note’,index:’note’, width:150, sortable:false}
]
As you can see only two columns are editable: amount and tax.
If you call a method saveRow the data is posted to the server via ajax post method – editurl parameter point to the file(in our case server.php). The posted data is in format amount=someamount and tax=sometax
At server side you should use $_POST to obtain the values – something like:
–begin php
…
if(isset($_POST[‘amount’]))
$amount_value = $_POST[‘amount’];
if(isset($_POST[‘tax’]))
$tax_value = $_POST[‘tax’];
…
—end php
Now you have the values at server and you can update your database.
I hope this help.
Regards
Tony
Tony,
Was looking at the grid examples this morning, and working on my implementation of it, and I found a minor issue that has to do with the grid’s resizing functionality.
When you resize the grid, if you make it larger of smaller than the pager element, the pager element does not resize with the grid. I don’t know if it should necessarily resize when you enlarge the grid, although I would like that on mine (maybe that could be optional), but it should definitely resize to match the grid’s width when you make the grid smaller.
Thanks,
Timothy
Tony,
I found another resizing issue with the grid. If you make the furthest right column just a little so that the size increases, but not enough for the scroll bar to show, and then go back and try to resize off of the same column, it some times will not allow you to go resize that column again. You then have to go and resize another column until the grid shrinks, and then it is resizable again. Also… I was talking with the lead developer at my shop, and he pointed out that you might want to rename your ‘local’ data type option to client or something like this that more specifically would represent that the data was being pulled from the page as it was sent to the browser. The term ‘local’ as being used, has less meaning when you are setting the grid up on a serverside page.
Thanks again,
Timothy
Hi Timothy,
I found this bug. Thanks. It is not only on furthest right column. I try to correct this.
As for the name “local” I think it is too late to change this. Imagine haw many people should change this in the app.
For the resizing of the pager width I have do some stuff here (many thanks to Brice Burgess). There will be additional options in the next revision.
Regards
Tony
Tony,
I see your point about the name local. It would definitely be a bit late to change it. What about in future releases allowing both ‘local’ and ‘clientSide’ as values. This way it would be more clear, and it wouldn’t break old code.
Thanks,
Timothy
Tony,
Another suggestion that would make the grid even cooler.
Along the idea of the integration example, how about letting us declare a custom edit type. So for example, right now, you let us declare a date, but if we wanted to declare another custom date picker, or one from another library, maybe we could pass a function to the edit options, that returned the markup of whatever we wanted to use as the editor for that column. For example, someones data might support multiple options, and they might want to use a multi select list.Someone may want to use a single option select, but may want to use a tree view plugin from jquery, extjs,prototype, or some other library. This would make the edit feature on your grid absolutely awesome IMO.
Thanks again,
Timothy
PS: By the way, I am currently working on a coldfusion custom tag implementation of your grid, and these are ideas that I am coming up with that would make the jqgrid even cooler.
Tony,
Also another feature request, that I think is vital to the functionality of your grid. Right now you can make selections based on the presence of an attribute in the xml data structure, but in some cases, people will want to display the value of the attribute itself. Can your grid support this? It may do this already, but I didn’t see this in the docs, or in the examples when I skimmed them briefly.
Thanks
Timothy
Timothy,
Thank you very much for the recommendations.Now step by step.
1. Name “local” – I think that the right name should be “array” – this is more natural and close to the user – What do you think about this?
2. Custom edit type – this is great and I think that this can be implemented.
3. Display the attribute from row element in grid – currently not possible, but you can use loadComplete callback to do that.
Happy Holidays,
Tony
Regards
Tony,
Not quite clear how you are saying I could select an xml attribute to be displayed in my grid even if I did use the loadComplete callback. Could you post a quick example. This would be cool. Also about the ‘array’ data set. This is closer yes, but I still think you may want to consider supporting ‘clientData’ as an option. For example, in the case of the coldfusion tag I am creating, the programmer can set up the grid to work with xml,arrays of structures, and JSON data right now. If you want the data to be what the grid currently thinks of as ‘local’ data, then you set the datatype attribute to “clientSide”. See the example below.
The reason I would be inclined to say array is not right, is because, we are setting the grid up on the server, and the grid will often be using data that initially at least will come from the server. On the server, array’s can be used as data for the grid, so saying datatype is ‘array’ does not tell the developer that his data will be on the clientside (browser) page.
Those is my Initial thoughts, and by the way I am excited that you think the custom edit types can be implemented,
Thanks,
Timothy
Timothy,
Here is a example. The only “limitation” is that you need to have the id column and fill the column with empty or some data, before do that
loadComplete: function() {
myids = jQuery('#mygrid').getDataIDs() // get the ids from the grid as array
for(var i=0;i < myids.length;i++){ jQuery('#mygrid').setRowData(myids[i],{myrowid:myids[i]}) // set data in given row } }
Oh bummer I did it again… Failed to encode my example for my coldfusion grid implemtation.
Here it is now.
<coop:JQGrid id=”myJQGrid” data=”#myData#” dataType=”clientSide” />
sorry for the delay on the answer! thank you, will try to make the form.
Tony
Was also wondering… would it be possible to get your grid to support dirty fields? This is a common feature in grids, that shows which fieldshave been changed. The extJS grid has a good example of this if you wanted to check this out.
Thanks,
Timothy
PS. If you want any help beta testing the grid in the future, let me know. I am on a team that is developing a Coldfusion framework called COOP, and we are trying especially to support JQuery plugins, so I am veryinterested in getting involved in these projects.
Hi Tony.
Where I can see an example, how to renew DB by id.
I saw that you answered mario, but not all is clear
Thanks very mach
Hello!
I could not be registered, the letter has not come. At me a problem with a demo. On a local server does not work BigSet and others connected with MySQL. There is a table, inscription Loading… And more nothing occurs. Please help!
In advanced thanks!
Tony,
Another good feature in some grids out there that I think we could support, is reordering of columns. What are your thoughts on this?
Timothy
Tony,
Another question. When I pass an ‘editurl’ parameter to my grid, and edit my data. The request that get sent out to my edit url, appears to have no arguments passed to it. I would think that it should have the rows data, and the row ID, but see absolutely nothing.
Am I doing something wrong here?
Please help me out,
Timothy
Never mind, was using ‘editUrl’ parameter not ‘editurl’ so the case sensitivity of JS was killing me. Then I found that the data of course is accessed in form scope, and it worked perfectly.
Thanks, and my appologies,
Timothy
@levy,
I have forgot to mention that again with this data the id parameter is passed – i.e. the example should be:
??“begin php
??¦
if(isset($_POST[??™id??™]))
$row_id = $_POST[??™id??™];
if(isset($_POST[??™amount??™]))
$amount_value = $_POST[??™amount??™];
if(isset($_POST[??™tax??™]))
$tax_value = $_POST[??™tax??™];
??¦
??”end php
Sorry for this mistake. I hope this will help.
@RomanovAS,
Please open the readme.txt and read the needed steps to make exmples to work – i.e.
Enter the appropriate information in dbconfig.php.
Execute the database.sql script in MySQL server.
Regards
Tony
No, a problem at all in it. I have made that is written in readme.txt. The base is normally connected, as function populateDBRandom (); works normally and writes down data in the table from longtext.txt. In what there can be a mistake? You can result listing of the program and tables which you use on your site? Please help!
RomanovAS,
populateDBRandom() function normally is called only once and should not be executed every time. If you have Firefox, please install Firebug and see what is happen to the server. What of data is returned from the server?
Regards
Tony
I have solved a problem. The mistake was that I have disconnected JSON.php. Did under the instruction (php 5 versions), however did not work. Now all works.
Thank you very much for help!
Whether it is possible to draw a conclusion of data from MySQL, but the usual table, that it was possible to make the reference to editing to other file in the next cell of the table, for example:
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$row[user_id];
$row[user_name];
}
???? And how? Please help! Very need!