I have 20 jqGrids on page. These grids are set to datatype: 'local' to prevent data loading on initialization ( I fire data loading on user request).

The problem is, that the initialization of all grids takes about 3s - I measured time in gridComplete function.

What I need is to show the page to user before this initialization or fasten grid initialization.

Can You please suggest me any solution to this? I'm lost...

Grid code example:

jQuery(document).ready(function() {

jQuery("#EmailsGrid").jqGrid({
sortable:true,
 jsonReader: {
                userdata: 'UserData'
            },
 xmlReader: {
                userdata: 'UserData'
            },
url: '/CRM/Email/EmailList',
datatype: 'local',
mtype: 'POST',
postData: {filter : '_fn-CRMEmail_Account_FK_cmpop-EqualTo_val-'+21286+'%7cAND%7c'},
colNames: ['ID','PÅ™edmÄ›t','Od','Pro','VytvoÅ™en','PÅ™iÅ™azen k','Typ','Status','Privátní',''],
colModel: [
{ name: 'Email_ID', index: 'Email_ID', width: 40, align: 'center',hidden: true,title:'', editable: false  },
{ name: 'Subject', index: 'Subject', width: 300, align: 'left',title:'', editable: false  },
{ name: 'From', index: 'From', width: 120, align: 'left',title:'', editable: false  },
{ name: 'To', index: 'To', width: 120, align: 'left',title:'', editable: false  },
{ name: 'Created', index: 'Created', width: 110, align: 'left',title:'', editable: false  },
{ name: 'AssignedToUser', index: 'AssignedToUser', width: 100, align: 'left',title:'', editable: false  },
{ name: 'Type_FK', index: 'Type_FK', width: 100, align: 'left',title:'', editable: false  },
{ name: 'Status_FK', index: 'Status_FK', width: 100, align: 'left',title:'', editable: false  },
{ name: 'Sensitivity_FK', index: 'Sensitivity_FK', width: 100, align: 'left',title:'', editable: false  },
{ name: 'Buttons', index: 'Buttons', width: 50, align: 'center', sortable:false, hidedlg:true,title:'', editable: false  }
],
imgpath: '/CRM/Scripts/jqGrid/themes/Docs/images'
,viewrecords: true
,rowNum:10
,rowList:[10,20,30,50],
pager: '#pagerEmailsGrid',height: '100%'
,width: 1030
,afterInsertRow : function(rowid) { ChangeRowStyleForEmailsGrid(rowid);EmailsGridSetRowTooltip(rowid);}
, gridComplete: function() {updateTime('EmailsGrid')}
, ondblClickRow: function(rowid) {EmailsGridDblClick(rowid)}
,beforeRequest : function() { 
var grid = jQuery('#EmailsGrid');var postData = grid.getPostData();
postData.visibleCols = GetColumnsToExport(grid);
postData.columnsList = GetGridColumns(grid);
postData.showRowChecker = false; grid.setPostData(postData);
}
,  loadComplete: function(xhr) {
UpdateHeaderEmails(21286);
}
});