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

Answer 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).