Thanks, it really work better in IE.

Patch included

Best Regards

Tony

Thanks

I do not jet have tested this, but it seems ok and reasonable.

Will perform some test and if all is ok will fix it.

The final 3.5 will come soon.

Best Regards

Tony

The slow resizing was due to the selector used in dragStart and dragMove again and again, and IE is really bad at it, so I added a local variable named curGbox (I didn't know how to name it).

I also added some lines to prevent IE from highlighting selected text while scrolling… hope you keep it too ?

Done on the latest beta (12)

Really nice job on JQGrid BTW. Do you have any idea of when a 3.5 final may come out ?

dragStart: function(i,x,y) {
            this.resizing = { idx: i, startX: x.clientX, sOL : y[0]};
            this.hDiv.style.cursor = “col-resize”;

            this.curGbox = $(”#rs_m”+p.id,”#gbox_”+p.id);
            this.curGbox.css({display:”block”,left:y[0],top:y[1],height:y[2]});
            // prevent IE from highlighting text
            document.onselectstart=new Function (”return false”);
        },

dragMove: function(x) {
            (…)
                if(newWidth > 33) {
                    this.curGbox.css({left:this.resizing.sOL+diff});  
            (…)
        },

dragEnd: function() {

            (…)

            this.curGbox=null;
            // enable back IE to  highlight text
            document.onselectstart=new Function (”return true”);

}

Thanks again. Do you have try with other grid components like Ext Grid in order to compare? Also if you load data direct in a table with innerHtml of course it will be quicker - you understand what I mean. Here we have a complex data grid component and it is not possible to do just simple appending of the data.

Best Regards

Tony

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.

Thanks again. Also as of my previous post we do a lot of other  thinks after the data is loaded. I will try to include timers which should estimate the real loading of data.

About resizing - yes it is slow only in IE browsers (do not want to explain why). I have made some other little improvements wich speed a liitle the resizing in IE, but not so much.

P.S. Try to remove all events like loadComplete, gridComplete and do a new test.

Best Regards

Tony

  $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.

Thanks for investigations again. Did you try with parameter

gridview : true ? , where all the data is puted at once.

Some other additional nothes

since you put

datatype:function(..) {

start time

...addJSONData()

enndtime - starttime

}

this is not real check becouse  in this method we do a lot of other thinks like reseting the loading message, updating the pagger values and other calculatins, which adds additinall time.

Also please let me known what is the result if you set gridview to true.

Best Regards

Tony

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,

Thank you for these investigations and tests. You help me a lot to improve the performance.

Actually the bad thing in 3.4 and in 3.5 alfa3 is that there are a lot of jQuery operators when adding data to the grid. This slow down the performance a lot.

I succesed to construct only strings (in my case array) and call jQuery only when the data is appened. I have added two options - load data at once or row by row when we have treegrid, subgrid and afterinsert event.

In first case the speed is about 10 time fater in the second 3-5 time faster compared to previous  versions.

Also if you are interested what technique I use in jqGrid, you can read this

http://www.learningjquery.com/.....-correctly

- this help me a lot.

Thanks

Best Regards

Tony

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 !

You are right. After lot of investigatios and performance test I realized that jqGrid have problems with loading big sets >150 rows. After two days work I make some changes in 3.5 version where the speed (in certain cases) is 5-10 time faster.

With other words - beta release will have these improvements. Hope to publish soon. Actually I need a day or two to document all changes in the new version.

Thanks

Regards

Tony

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 ?

Thanks for this tests. It is well known that IE6 when using ajax calls is one of the slowest browsers. For me these tests should be considered only if they are compared in other browsers. Also if possible could you please make two comparations

datatype: function (data) {

var starttime1 = // first start

$.ajax({

...

complete: function (mydata,status) {

var starttime2 = // second start-

addJSONData here

stop first timer

stop second timer

})

}

This will be very interested.

Regards

Tony

The elapsed time needed to attach 100 rows of data (JSON formatted) to the JQGrid was:

-   4.5 seconds in IE 6 on IE on a Pentium 4 processor (3 GHz) with 2GB of RAM

-   2,1 seconds in IE 6 on a Pentium dual core processor (2.13 GHz) with 2GB of RAM

For 500 rows the performance was:

- 26 seconds in IE 6 on IE on a Pentium 4 processor (3 GHz) with 2GB of RAM

-13 seconds in IE 6 on a Pentium dual core processor (2.13 GHz) with 2GB of RAM

The used function was JQGrid function: “addJSONData”.

Is this the usual performance for JQGrid or did I do something wrong? Which is the fastest way to build a JQGrid ?