jQuery Grid Plugin - jqGrid

Hi,

Sorry that I did not mention clearly, but those times were the elapsed times only for the “addJSONData” JQGrid function. So, the times are only for the second timer from your code.

Before using JQGrid plugin into the project I wanted to test it first. I did not even used AJAX calls with this test. The data were taken from a JavaScript file, that contains a JSON representation string of the data. This was loaded into the JavaScript code using ‘eval’ function (the time for eval was not included into the duration presented into the initial post). The JavaScrip variable that resulted from the eval was sent to the “addJSONData” function:

var jsonData=eval(file_data);

$list[0].addJSONData(jsonData);

$list[0] - references the JQGrid object

Is there a fastest way to build a JQGrid ?

Hi,

Because I have tested some grid plugins over the internet and found out that JQGrid is one of the best, I have also taken a quick look into the JQGrid plugin code.

I’ve seen that you used 'document.createElement' JavaScript command, to create DOM elements that are added to the page. I’ve made a test and build an identical table (with same number and content for the columns) with 500 rows using 'innerHTML' command.

The time to load for the table was 0.7 seconds in IE 6 on a Pentium dual core processor (2.13 GHz) with 2GB of RAM. When using document.createElement JavaScript command for the same table with 500 rows the time was 2.3 seconds on the same computer.

Did you considered in your new version of the JQGrid to change the way DOM elements are created?

Do you know what could cause the delay in JQGrid code, so that to exist that difference from 2.3 seconds to 13 seconds (except the DOM creation issue)?

Also, I have made a profile of the code using FireBug for a table with 100 rows and one with 500 rows. I saw that there are created around 90 JQuery objects using init() function for each row of the table (a total of ~9000 calls to init() for 100 rows table), objects that are then deleted using clean() function (~1000 calls for 100 rows table). The total number of function calls to build a table with 100 rows is ~96500. The number of calls is increased linearly when a table of 500 rows is built.

 Do you know if these calls are made directly by the JQGrid plugin or if they are made internally by JQuery?

Is there the possibility that the number of calls and objects generation to be decreased from JQGrid plugin code (maybe using some sort of cache for the JQuery objects)?

It will be great if JQGrid plugin will work 5-10 times faster !

I tested the new version of JQGrid (3.5 beta, build4).

For 500 rows and 9 columns, in IE 6, on a Pentium dual core processor (2.13 GHz) with 2GB of RAM, the time to load the table is aproximatively 4.5 seconds.
There was an improvement of 3 times from the previously 13 seconds !
The time to load for a table of 500 rows and 9 columns, using the 'innerHTML' command, was 0.7 seconds on the same computer.

Do you think that the difference of almost 6 times comes from the JQuery core ?

Did you change something about the way the plugin should be used so that to obtain better performances (because I used it in the same way as described above) ?

Thank you,

Yes, I used 'gridview : true ' parameter when  the jqGrid was built:

  $list.jqGrid( {
   datatype :"local",
   height :220,
   forceFit :true,
   colNames :colNames,
   colModel :colModel,
   imgpath :"./themes/steel/images",
   multiselect :false,
   rowNum:500,
   gridview:true,
   onSelectRow :doOnSelectRow,
   gridComplete : function() {
    var x = $("#list4 a");
    x.click( function(e) {
     alert("clicked on an image.")
     });
   }
  });

I suppose that is why there was a performace improvement from 13 to 4.5 seconds. Does your tests show something else ? I also put above the way I've built the grid in order to give you a clear view about the usage.

Also there is one more thing that I've noticed in the new version: the resize column feature works very slow compared with the resize from the previous version.

Thank you.

Hi,

Regarding the resize feature, it worked fine in IE 6, even with 500 rows in previous version of JQGrid. So, there was something changed in this version of the plugin. Will this new feature (that had an impact on the resize feature) remain in the final version of the plugin?

Regarding the performances, a more accurate profile shows that the improvement was from 13 to 4 seconds. So, the difference between the JQGrid and 'innerHTML' command is from 0.7 to 4 seconds; this means about 5.5 times.

After I removed the ‘gridComplete’ parameter, there was an improvement of about 0.3 seconds: the time to load the data is 3.7 seconds.

Thank you.