I have a JQGrid and I've implemented a Collapse/Expand All button on the grid. it works but it's incredibly slow. Here's the code I've used, it takes 5-6 seconds for only 120 rows. is there any way to improve the performance of this? Thanks in advance!
function CollapseAll() {
$(".ui-icon-circlesmall-minus").trigger("click");
$("#grid_toppager_left").find('.ui-icon-minus').removeClass('ui-icon-minus').addClass("ui-icon-plus");
}
function ExpandAll() {
$(".ui-icon-circlesmall-plus").trigger("click");
$("#grid_toppager_left").find('.ui-icon-plus').removeClass('ui-icon-plus').addClass("ui-icon-minus");
}
var groups = [];
$("#grid").jqGrid({
url: '@Url.Action("GetLoanReport", "Report")',
datatype: "json",
emptyrecords: "0 records found",
height: "auto",
mtype: 'POST',
maxHeight: maxHeight,
postData: { startDate: $("#startDate").val(), endDate: $("#endDate").val(), selectedStatuses: selectedStatuses, selectedProductGroups: selectedProductGroups, assignedBranchList: assignedBranchList, assignedToList: assignedToList, createdByList: createdByList, approvedByList: approvedByList, uploadedByList: uploadedByList },
colNames: ['Branch', 'Status', 'Employee', 'Application ID', 'Customer Name', 'CustNo', 'Product Type', 'Description', 'Security Code', 'Final Rate', 'New Money', 'Total'],
colModel: [
{ name: 'Branch', index: 'Branch', cellattr: function () { return ' title="my custom fixed tooltip for the column"'; } },
{ name: 'Status', index: 'Status' },
{ name: 'EmplName', index: 'EmplName' },
{ name: 'ApplicationID', index: 'ApplicationID', sorttype: 'number', width: 125, sortable: true, formatter: createLink },
{ name: 'CustName', index: 'CustName', formatter: custnameFormatter, width: 200, sortable: true },
{ name: 'CustNo', index: 'CustNo', hidden: true, sortable: true },
{ name: 'ProductType', index: 'ProductType', width: 100, sortable: true, sorttype: "text" },
{ name: 'ProdDesc', index: 'ProdDesc', width: 250, sortable: true },
{ name: 'SecurityCode', index: 'SecurityCode', width: 125, sortable: true },
{ name: 'FinalRate', index: 'FinalRate', width: 75, align: "right", formatter: 'currency', formatoptions: { suffix: '%' }, sorttype: 'currency', sortable: true },
{ name: 'NewMoney', index: 'NewMoney', formatter: 'currency', align: "right", sorttype: 'currency', formatoptions: { thousandsSeparator: ",", decimalPlaces: 0, prefix: "$" }, width: 125, sortable: true },
{ name: 'TotalNewMoney', index: 'TotalNewMoney', formatter: 'currency', align: "right", sorttype: 'currency', formatoptions: { thousandsSeparator: ",", decimalPlaces: 0, prefix: "$" }, width: 125, sortable: true }
],
jsonReader: {
repeatitems: false,
root: 'rowdata',
page: 'currpage',
total: 'totalpages',
records: 'totalrecords'
},
loadComplete: function () {
WaitIndicatorClose();
var reportSum = $("#grid").jqGrid('getCol', 'TotalNewMoney', false, 'sum');
$("#gridPager_right").html("<div id='sumTotal'>Number of Applications: " + $("#grid").getGridParam("records") + ", Total: $" + formatMoney(reportSum, false, null, null, null, true, false) + '</div>');
$("#gridPager_right").show();
if (firstLoad == true) {
$(".ui-icon-circlesmall-plus, .ui-icon-circlesmall-minus").each(function () {
groups.push({ hid: $(this).closest("tr").attr("id"), collapsed: true });
});
} else {
$("#grid tr").each(function () {
for (var i = 0; i < groups.length; i++) {
if ($(this).attr("id") === groups[i].hid) {
if (groups[i].collapsed == false) {
$("#grid").jqGrid('groupingToggle', groups[i].hid);
}
}
}
});
}
firstLoad = false;
$(".gridghead_0").attr("title", "Created by Branch");
$(".appLink").on("click", function (e) {
var appID = e.currentTarget.innerHTML;
ConfirmBox("This will redirect you to the Application page. Are you sure?",
function () {
$.ajaxSetup({ cache: false });
$.ajax({
cache: false,
type: "Get",
url: "@Url.Action("VerifyAndSetApplicationID", "Application")",
data: { "applicationID": appID },
success: function (data) {
if (data.Error) {
MessageBox(data.Error);
} else {
if (data.Success) {
InitializeWriteAccess(appID);
} else {
MessageBox(data.NotFound);
}
}
},
error: function (xhr, status, error) {
},
complete: function () {
}
});
},
function () {
});
});
},
loadError: function () {
WaitIndicatorClose();
},
loadui: 'disable',
grouping: true,
onClickGroup: function (hid, collapsed) {
if ($(".ui-icon-circlesmall-plus").length == 0) {
$("#grid_toppager_left").find('.ui-icon-plus').removeClass('ui-icon-plus').addClass("ui-icon-minus");
} else {
$("#grid_toppager_left").find('.ui-icon-minus').removeClass('ui-icon-minus').addClass("ui-icon-plus");
}
for (var i = 0; i < groups.length; i++) {
if (groups[i].hid == hid) {
groups[i].collapsed = collapsed;
}
}
if (collapsed == true) {
$(".ui-icon-circlesmall-minus:hidden").each(function () {
for (var i = 0; i < groups.length; i++) {
if (groups[i].hid == $(this).closest("tr").attr("id")) {
groups[i].collapsed = true;
}
}
});
}
$('#grid').trigger('reloadGrid');
},
groupingView: {
groupField: ['Branch', 'Status', 'EmplName'],
groupText: ['<b>{0}</b> Count: ({1})', '<b>{0}</b> Count: ({1})', '<b>Created by {0}</b> Count: ({1})'],
groupSummary: true,
groupColumnShow: false,
groupSummaryPos: "header",
groupCollapse: true
},
loadonce: true,
rowNum: 10000,
showrownumbers: true,
toppager: true,
shrinkToFit: true,
pgbuttons: false,
pginput: false,
pager: gridPager
});
$("#grid").jqGrid('navGrid', '#gridPager', { add: false, edit: false, del: false, find: false, search: false, refresh: false });
$("#grid").jqGrid('navGrid', '#grid_toppager', { add: false, edit: false, del: false, find: false, search: false, refresh: false, width: 1093 });
$("#grid").jqGrid('navButtonAdd', '#grid_toppager_left', {
caption: "Expand/Collapse All",
buttonicon: "ui-icon-plus",
onClickButton: function () {
if ($(".ui-icon-circlesmall-plus").length == 0) {
CollapseAll();
} else {
ExpandAll();
}
$('#grid').trigger('reloadGrid');
}
});
$("#grid").jqGrid('navButtonAdd', '#gridPager', {
caption: "Export to Excel",
onClickButton: function () {
fnExcelReport();
}
});
});
