CODEWITHSUNDEEP
jqueryjquery-pluginsjqgridjqgrid-asp.net
Alaa Osta
Alaa Osta

Reputation: 4339

Add data on the client side to Jqgrid

I am using Jqgrid to show some data, using DataType as local, I don't want to post back to the server and return jsonString with the data to bind. I am passing the Json String to the client and adding the data one by one using addRowData. It seems it is taking a noticeable time to the user if the number of the data is big due to the information I have in each cell.

   for (var i = 0; i < gridData.length; i++)
       jQuery("#jqgInventory").jqGrid('addRowData', i + 1, JSON.parse(gridData[i]));

Is there any alternative way to bind the data to jqgrid, for example just give it the JsonString as a datasource and it will bind it faster or any other suggestion.

Note: Using DataType as Json and setting the postUrl will work faster than the above method.

please any help ! Thanks in advance, Alaa

Upvotes: 1

Views: 19415

Answers (2)

jeffery_the_wind
jeffery_the_wind

Reputation: 18178

This sentence comes directly from the jqGrid documentation: "A array that store the local data passed to the grid. You can directly point to this variable in case you want to load a array data. It can replace addRowData method which is slow on relative big data". That is exactly what you are talking about.

See it here: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

Here is your working example: http://jsfiddle.net/yNw3C/649/

You simply have to put in the option:

data: my_data

Where my_data is the array of information.

Upvotes: 3

Oleg
Oleg

Reputation: 221997

I agree with another answer from Jeffery_The_Wind. He don't wrote only the name of the option which he recommended: data parameter. It's important to add that one should use gridview: true option and don't use afterInsertRow callback.

For the understanding: The usage of addRowData is the most slowly and ineffective way to fill the grid. The most problem is that if you insert an element on the page or change the element at least the position of all existing elements have to be recalculated by web browser. The more elements you placed on the page the more slowly will be inserting on the next one.

One solve the problem mostly in one from the two ways:

  • one uses DocumentFragment to prepare detached hierarchy of DOM elements and then place the fragment in one operation on the page.
  • one create the content of all or the most of the changes as string which represent HTML fragment and use innerHTML property to place many elements in one operation on the page.

jqGrid uses the second method. It's important to use gridview: true to have the behavior. So the recommended ways to fill local grid are:

  • The usage of datatype: 'local' and data parameter with data. The standard format of the value of the input data parameter is the array with row items. Every item has the same properties like the value of name property of colModel. Additionally every item should has id property which defines the "rowid" - the id of the <tr> elements (the rows) of the grid. If you has another format of input data you have to use correspondent localReader parameter which describes the format of data.
  • The usage of datatype: 'jsonstring' and datastr parameter which specify the input data. The value of datastr parameter can be either JSON string or JavaScript object with the same content. So if you have the data as object you don't need to convert it to JSON string using JSON.stringify. You can additionally use jsonReader in the same format like you probably know for datatype: 'json'.

The main difference inserting of data from data parameter (in case of datatype: 'local') and datastr parameter (in case of datatype: 'jsonstring') is that the input data will be sorted by jqGrid in case of the usage of data parameter and will be included unsorted in case of datastr parameter.

Upvotes: 0

Related Questions