JqGrid is Loading Very slow using ajax

Posted by Manorama under jQuery on 8/20/2013 | Points: 10 | Views : 3444 | Status : [Member] | Replies : 0
hi..I am using jqGrid 4.4.4 in mvc4......and i have jus 158 records...On page Load i am binding jq grid likethis

<script type="text/jscript">
$("#jqUser").jqGrid("clearGridData");
//Ajax call to Fill JqGrid Data
$.ajax({
url: '@Url.Action("GetUsers", "ManageUser")',
type: 'POST',
dataType: 'json',
contentType: 'application/json',
success: function (data) {
if (data.length != 0) {
for (var index = 0; index < data.length; index++) {
// Table Columns//
var griddata = [
{ UserID: UserID, FirstName: FirstName, LastName: LastName, EmailId: EmailId,Active: Active
}];
$("#jqUser").jqGrid("addRowData", index + 1, griddata[0]);
}
jQuery("#jqUser").setGridParam({ rowNum: 5 }).trigger("reloadGrid");
}
else {
alert("No data to Bind");
}
}
});
//Displaying JqGrid
jQuery("#jqUser").jqGrid({
datatype: "local",
height: 100,
width: 793,
colNames: ['Action', 'UserID', 'FirstName', 'LastName', 'EmailId', 'Active'],
colModel: [
{ name: 'act', index: 'act', sortable: false, width: 75, align: "Center" },
{ name: 'UserID', index: 'UserID', width: 95, hidden: true, sortable: false, editable: true, edittype: 'text' },
{ name: 'FirstName', index: 'FirstName', width: 95, editable: true, edittype: 'text', NullIfEmpty: true, editrules: { required: true} },
{ name: 'LastName', index: 'LastName', width: 95, editable: true, edittype: 'text', NullIfEmpty: true, editrules: { required: true} },
{ name: 'EmailId', index: 'EmailId', width: 350, formatter: 'mail', editable: true, edittype: 'text', editrules: { required: true, email: true, regex: /\w+([-+.']\w+)*@@\w+([-.]\w+)*\.\w+([-.]\w+)*/} },
{ name: 'Active', index: 'Active', editable: true, edittype: 'checkbox', width: 75, align: 'center', editoptions: { value: "True:False" }, editrules: { required: true }, formatter: "checkbox", formatoptions: { disabled: true} },
],
gridComplete: function () {
var ids = jQuery("#jqUser").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
be = "<input class = 'edit' type='button' value='' Title = 'Edit' onclick=\"editRowFunc('" + cl + "');\" />";
se = "<input class = 'save' type='submit' value='' Title = 'Save' onclick=\"jQuery('#jqUser').saveRow('" + cl + "');\" />";
ce = "<input class = 'cancel' type='button' value='' Title = 'Cancel' onclick=\"jQuery('#jqUser').restoreRow('" + cl + "');\" />";
jQuery("#jqUser").jqGrid('setRowData', ids[i], { act: be + se + ce });
}
},
editurl: '@Url.Action("UpDateUsers", "ManageUser")',
pager: '#pager',
rowNum: 5,
rowList: [5, 10, 20, 30],
loadtext: &

ManoRama


Responses

(No response found.)

Login to post response