ASP.NET MVC + jqGrid

Question

Hello, I am using jQgrid with ASP.NET MVC. I am having a couple of problems. I would like to draw the grid when the DOM is created, but I would like to load the data after, when I select a TAB in a tab page. I can’t find any example for that. Is there anyone who tried that?

I am using an custom navigation bar: (”#AttachmentsGrid”).navGrid(’#AttachmentsPager’, { edit: false, add: true, del: true, search: false });

After a couple of selections on the TAB (jQuery UI) I can see the buttons of the nav bar are duplicated. I have one big problem with selections. I can’t select any other row but the first. Anyone else faced the same trouble?

Best regards

Alberto

Answer 1

To draw the grid on DOM ready but populate it later, you could initialize the grid using a local data store:

datatype: "local"

Then, when you select the proper Tab, initiate an AJAX request to get your data. When the data has been retrieved you can do this to load it into the grid:

        // Populate grid data
        jQuery("#myGrid").clearGridData();
        if (data != null){
            for(var i=0;i<data.length;i++){
                    jQuery("#myGrid").addRowData(data[i].id, data[i]);
                }
            }
        }

Regarding duplicate buttons after selecting a tab multiple times. I have seen this before when initializing the jqGrid multiple times (IE, calling .jqGrid each time the tab is selected). You should not see this after following the steps above. Otherwise, one way to prevent this is to keep track of when the grid is initialized, and only have the grid initialized when the corresponding tab is first selected:

        var initialized = false;
        jQuery('#tabs').tabs({
               show: function(event, ui) {
                   if (ui.index == 1 && !initialized){
                       initialized = true;

                       (... create your grid here ...)
                   }
               }
            });