Why is gridview:true used for and what does it mean?

Question

I am working on JqGrid.

I want to know what does it mean if we specify gridview:true.

And in what cases do we need to provide ?

I recently was working on one such jqGrid and my afterInsertRow was not being called, once I remvoed the gridview:true now the call is made.

This is one case that I myself experienced, I was wondering if there are other cases too which we should know if gridview:true is used.

Please guide me on this.

Solution 1

I agree that gridview: true option is not good explained in the documentation. In some cases (like in case of TreeGrid) the option will be automatically set. So I try to explain what it mean and why I recommend always to use the gridview: true option and the never use afterInsertRow.

Many people start with some other computer languages as JavaScript and write his first program which run in web browser after they have some style of writing of programs. I had the same problem 3 year before. It's important to understand what the web browser have to do after you make some changes on the HTML page. In usage of usage of jQuery it's the thing what you permanently do.

If you change some DOM element on the page the position on all other DOM element existing on the page can be changed. If you think about floating model (like with float: left) or many other CSS settings you will understand that web browser can't just move the bitmap representation of the existing page and insert the new inserted element. So the web browser have to recalculate of position all element existing on the page and move some from the elements on another place. Even if you change CSS style of an element the so named reflow take place. I'd recommend you to read the article and to look the video about the subject.

The main idea to improve performance of web browser the the described above case will be to reduce the number of changes on the page. So is you need to change 5 styles of one DOM elements you should do this in one operation. You can use jQuery.css({...}) with all the changed styles instead of 5 separate calls. Even better could be to define one CSS class and use jQuery.addClass method.

In case of jqGrid one need to fill <tbody> with all rows and cells of the grid. If you use gridview: true option then jqGrid collect the content of all rows as strings with HTML fragments. Later jqGrid call jQuery.append in the line which set internally innerHTML property to set the whole HTML fragment on the page.

Because of the same reason you should use cellattr, rowattr or custom formatters which works with HTML fragments represented the cells or rows as strings. At the end the strings will be appended to other strings and will be used in jQuery.append operation like I described above.

The usage of afterInsertRow callback function require that every row of the grid will be placed on the page before calling of afterInsertRow callback. So it makes impossible the usage of gridview: true option and make working of the page slowly.

To be exact I should mention that the performance decreasing which I described before could be visible only in case of large grid and will be mostly clear seen in case of slow web browser (like Internet Explorer, especially old versions of IE).

Solution 2

According to the jqGrid documentation for gridview:

In the previous versions of jqGrid including 3.4.X, reading a relatively large data set (number of rows >= 100 ) caused speed problems. The reason for this was that as every cell was inserted into the grid we applied about 5 to 6 jQuery calls to it. Now this problem is resolved; we now insert the entry row at once with a jQuery append. The result is impressive - about 3 to 5 times faster. What will be the result if we insert all the data at once? Yes, this can be done with a help of gridview option (set it to true). The result is a grid that is 5 to 10 times faster. Of course, when this option is set to true we have some limitations. If set to true we can not use treeGrid, subGrid, or the afterInsertRow event. If you do not use these three options in the grid you can set this option to true and enjoy the speed.

So by using this option you can get a nice speed improvement, with the caveat that it is not compatible with treeGrid, subGrid, or afterInsertRow. I believe that is the extent of the limitations. If you find any more, let us know so the documentation can be updated.

---

For what it's worth, you can actually see specific cases in grid.base.js methods addXmlData and addJSONData where afterInsertRow is skipped:

if(ts.p.gridview === false ) {
    $("tbody:first",t).append(rowData.join(''));
    $(ts).triggerHandler("jqGridAfterInsertRow", [rid, rd, xmlr]);
    if(afterInsRow) {ts.p.afterInsertRow.call(ts,rid,rd,xmlr);}
    rowData=[];
}

The treeGrid and subGrid limitations are more subtle and are not explicitly called out in the code.

Comments

[Oleg]

Only small correction. The text from the documentation which you referenced had small incorrectnesses. 1) The current implementation of TreeGrid uses gridview: true option (it sets it: see the line of code. 2) the text "we now insert the entry row at once" is not correct. The text will be indirectly corrected later: "What will be the result if we insert all the data at once?". In any way the whole <tbody> with all rows will be placed on the page as one call of jQuery.append in case of gridview: true.