jqGrid GridUnload/ GridDestroy

When I use $('#mygrid').jqGrid('GridUnload'); my grid is destroyed: no pager/ no header.

In a wiki I found:

The only difference to previous method is that the grid is destroyed, but the table element and pager (if any) are left ready to be used again.

I can't find any difference between GridUnload/ GridDestroy or do I something wrong?

I use jqGrid 3.8.

Solution 1:

To be able to create jqGrid on the page you have to insert an empty <table> element on the place of the page where you want see the grid. The simplest example of the table element is <table id="mygrid"></table>.

The empty <table> element itself will be not seen on the page till you call $('#mygrid').jqGrid({...}) and the grid elements like column headers will be created.

The method GridDestroy works like jQuery.remove. It deletes all elements which belong to the grid inclusve the <table> element.

The method GridUnload on the other hand delete all, but the empty <table> element stay on the page. So you are able to create new grid on the same place. The method GridUnload is very usefull if you need create on one place different grids depend on different conditions. Look at the old answer with the demo. The demo shows how two different grids can by dynamically created on the same place. If you would be just replace GridUnload in the code to GridDestroy the demo will be not work: after destroying of the first grid no other grids will be created on the same place.

Solution 2:

In addition to Oleg's answer I would like to point out that GridUnload does a little more that just remove the grid from the table. It removes the original HTML table element(and the pager), and ads an identical one in its place(at least in 4.5.4 it does).

This means that if you attached some event handlers to the table HTML element(i.e with jquery on, like ('#gridID').on('event','selector',handler)) they will also be removed. Consiquently the events will not fire on the new grid if you replace the old grid with a new one...

Solution 3:

Oleg's answer works fine for me as long as I have no Group headers.

When I add group header row with 'setGroupHeaders'

the results of a 'GridUnload' followed by a $('#mygrid').jqGrid({...}) are not consistent.

It works fine in Chrome but not in IE11.

In IE11, each 'jqg-third-row-header' item ends up rendered on different rows (diagonally).

I am using free-jqGrid:query.jqgrid.src.js version 4.13.4 for debugging. I traced the problem down to code, in this file, that begins with line 9936:

if (o.useColSpanStyle) {
    // Increase the height of resizing span of visible headers
    $htable.find("span.ui-jqgrid-resize").each(function () {
        var $parent = $(this).parent();
        if ($parent.is(":visible")) {
            this.style.cssText = "height:" + $parent.height() + "px !important; cursor:col-resize;";
            //this.style.cssText = "height:" + $parent.css('line-height'); + "px !important;cursor:col-resize;";
        }
    });
    // Set position of the sortable div (the main lable)
    // with the column header text to the middle of the cell.
    // One should not do this for hidden headers.
    $htable.find(".ui-th-column>div").each(function () {
        var $ts = $(this), $parent = $ts.parent();
        if ($parent.is(":visible") && $parent.is(":has(span.ui-jqgrid-resize)") && !($ts.hasClass("ui-jqgrid-rotate") || $ts.hasClass("ui-jqgrid-rotateOldIE"))) {
            // !!! it seems be wrong now
            $ts.css("top", ($parent.height() - $ts.outerHeight(true)) / 2 + "px");
            // $ts.css("top", ($parent.css('line-height') - $ts.css('line-height')) / 2 + "px");
        }
     });
}
$(ts).triggerHandler("jqGridAfterSetGroupHeaders");
});

This code sets the height and top css values related to each 'jqg-third-row-header' item. This leads to a tall and diagonal layout of the 'jqg-third-row-header'
Potential Bug:.

The $parent.height() and $ts.height() methods, above, return the former jqGrid table height in IE11. In Chrome they return the 'th' computed height(top = 0). I added and tested the 2 commented lines that use line-height. IE11 works fine when line-height is used. I do not completely understand the JqGrid resize logic, so this may not be a fix.
Alternate Solution:

If you specify.

 colModel: 
     {
     label: 'D',
     name: 'W',
     width: 6,
     align: 'center',
     resizable:false  //required for IE11 multiple calls to this init()
     },

When resizable is false the code above is not encountered and the height and top are not set.
Oleg's jqGrid is a very nice control. Perhaps he can test his demo grid with a groupheader on IE11.