Asked  7 Months ago    Answers:  5   Viewed   31 times

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.

 Answers

53

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

Tuesday, June 1, 2021
 
Muazam
answered 7 Months ago
22

You can find the jqGrids existing on the page in many ways. For example you can use $('table.ui-jqgrid-btable') instead of $('div.ui-jqgrid-bdiv table'). Moreover you should not forget that it can be more as one jqGrid on the page in general. I recommend you to write your code so that it will work with many jqGrids of the page even if you currently use only one jqGrid per page.

If you find in any way the table element of jqGrid you can get the DOM element of the first found grid with jqGrids[0]. jqGrid use some extenders of the DOM. It add additional properties grid and p. In every jqGrid method will be checked whether the grid is initialized by verifying that grid property exist. The p property gives you all jqGrid parameters inclusive p.pager. You can create up to two pager on on grid: one on top edge of the grid and another on the bottom (see this for more information). So the code which you need could looks like

var jqGrids = $('table.ui-jqgrid-btable');
if (jqGrid.length > 0) {
    jqGrid.each(function(i) {
        if (this.grid) {
            // one more test for the jqGrid
            // jqGrid[i] is a jqGrid
            if (this.p.toppager) {
                // this.id + '_toppager' is the id of the top pager
            }
            if (this.p.pager) {
                // this.p.pager is the id of the bottom pager
            }
        }
    });
}

To test whether the table element has some customclass class you can use jQuery.hasClass.

UPDATED: In the comment you asked me how to hide or to show the buttons in the navigator bar dynamically. I prepared the demo which demonstrate this:

enter image description here

If one checks the buttons which are placed above the grid the corresponding button from the navigator bar will be hide. Unchecking will show the corresponding button back.

The code just call $('#add_list').hide() or $('#add_list').show() to hide/show the "Add" button. In the example the last part of the id="add_list" is the id of the <table> element used to create the grid. Other standard buttons have the ids starting with the following prefixes: 'edit_', 'view_', 'del_', 'search_', 'refresh_'. More common code which works if the id of the grid has special characters looks as following:

var grid = $("#list"),
    gid = $.jgrid.jqID(grid[0].id);

$('#cbAdd').change(function () {
    var $td = $('#add_' + gid);
    if ($(this).is(':checked')) {
        $td.hide();
    } else {
        $td.show();
    }
});

To find the custom navigator buttons added by navButtonAdd I use title attribute:

$('#cbChooseColumns').change(function () {
    var $td = $(grid[0].p.pager + '_left ' + 'td[title="choose columns"]');
    if ($(this).is(':checked')) {
        $td.hide();
    } else {
        $td.show();
    }
});
Tuesday, June 8, 2021
 
Elxx
answered 6 Months ago
21

The meaning of # as a URL reference (whether as action or formaction attribute value or otherwise) is a reference to the start of the current base document. The base document is the current document, unless a <base href=...> tag has been set.

What happens depends on the situation. Typically, the browser requests for the page again with a query part in the URL (and the page is loaded again, which may imply that client-side scripts are run), but if the same query had been used earlier, the browser probably uses its cache. Moreover, as the start of the document is referred to, focus on any form element is lost and the page may scroll backwards.

So although # is fairly common in some coding styles, it is not reliable; its purpose is better achieved using client-side event handlers.

The formaction attribute has a meaning only for submit buttons. A text input element does not constitute a submit button, even though it may trigger form submission, so here the attribute is ignored.

Saturday, July 3, 2021
 
uiroshan
answered 5 Months ago
40

If I correctly understand your problem you can solve your problem by adding custom sorting function (see here, here and here) on the column DocGroup where you do the grouping:

sorttype: function (cellvalue, rowObject) {
    return cellvalue? cellvalue : rowObject.Documents;
}

As the result the input data which have empty DocGroup will be sorted and so grouped by Documents. You will see the results on Fiddle

enter image description here

Thursday, July 29, 2021
 
Xatoo
answered 5 Months ago
79

When you modify the Tag table, the database might need to lookup corresponding rows in the JoinNotesTags table. To be efficient, this requires an index on the tagId column.

Your composite index is not useful for that; because of the way how indexes work, the column(s) to be searched must be the leftmost column(s) in the index.

You should add an index on only the tagId column. (You could swap the order of the columns in the composite index, but then you'd have the same problem with noteId.)

Tuesday, August 10, 2021
 
ioleo
answered 4 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share