.Hi we are using Jqgrid 5.3.2 and are seeing an issue where the paging widget is not properly placed on the screen causing the other buttons to be unreachable. This appears to only be an issue when the grouping feature is turned on. This broke when we upgraded to Jqgrid 5.3.2. Can you please assist with this? I have also added our code sample
[code]
$ ("#reportTable").jqGrid({
caption : "Fraud Report",
colModel : columnModel,
autowidth : <strong>true</strong>,
datatype : ‘json’,
pager : "#reportTable-pager",
viewrecords : <strong>true</strong>,
gridview : <strong>true</strong>,
headertitles : <strong>true</strong>,
altRows : <strong>false</strong>,
rowNum : 50,
loadonce : <strong>true</strong>,
scrollPopUp : <strong>true</strong>,
scrollLeftOffset : "83%",
scroll : 1, // set the scroll property to 1 to enable paging with//
// <u>scrollbar</u> – virtual loading of records
emptyrecords : ‘Scroll to bottom to retrieve new page’,
gridComplete : <strong>function</strong>() {
<strong>if</strong> ($("#reportTable").jqGrid(‘getGridParam’, ‘datatype’) == "json") {
$("#reportTable").setGridParam({
datatype : ‘local’
});
maximizeTable();
$(window).trigger(‘resize’);
}
},
grouping : <strong>true</strong>,
groupingView : {
groupField : [ "issuerPcrDescp", "issuerBin" ],
groupColumnShow : [ <strong>false</strong>, <strong>false</strong> ],
groupText : [ "Issuer Pcr: <b>{0}</b> Fraud Total: <b>{fraudCount}<b>", "Issuer Bin: <b>{0}</b>" ],
groupOrder : [ "asc", "asc" ],
groupSummary : [ <strong>true</strong>, <strong>false</strong> ],
groupSummaryPos : [ ‘footer’, ‘footer’ ],
groupCollapse : <strong>false</strong>,
showSummaryOnHide : <strong>true</strong>
},
jsonReader : {
root : "listOfRecords",
page : "currentPageIndex",
total : "1",
records : "totalItems",
repeatitems : <strong>false</strong>,
cell : "cell",
id : "id",
userdata : "userdata"
}
});
jQuery("#reportTable").jqGrid(‘navGrid’, "#reportTable-pager", {
edit : <strong>false</strong>,
add : <strong>false</strong>,
del : <strong>false</strong>,
search : <strong>false</strong>,
refresh : <strong>false</strong>
});
jQuery("#reportTable").jqGrid(‘navButtonAdd’, ‘#reportTable-pager’, {
caption : "",
title : "Export Fraud Report data to Excel",
id : "exportExcelButton",
buttonicon : ‘ui-icon-print’,
onClickButton : <strong>function</strong>() {
$(‘#exportExcelButton’).addClass(‘ui-state-disabled’); // disable
$("body").css("cursor", "progress");
setTimeout(<strong>function</strong>() {
$("#reportTable").jqGrid("exportToExcel", {
includeLabels : <strong>true</strong>,
includeGroupHeader : <strong>true</strong>,
includeFooter : <strong>true</strong>,
fileName : $("#reportTable").jqGrid("getGridParam", "caption").replace(/\s+/g, ‘_’) + "_" + getTimestamp() + ".xlsx",
maxlength : 50, // <u>maxlength</u> for visible string data
onBeforeExport : appendContextDataToExport,
replaceStr : replaceExportString
});
$("body").css("cursor", "default");
$(‘#exportExcelButton’).removeClass(‘ui-state-disabled’); // enable
}, 30);
}
});
[/code]
$ (“#reportTable”).jqGrid({
caption : “Fraud Report”,
colModel : columnModel,
autowidth : true,
datatype : ‘json’,
pager : “#reportTable-pager”,
viewrecords : true,
gridview : true,
headertitles : true,
altRows : false,
rowNum : 50,
loadonce : true,
scrollPopUp : true,
scrollLeftOffset : “83%”,
scroll : 1, // set the scroll property to 1 to enable paging with//
// <u>scrollbar</u> – virtual loading of records
emptyrecords : ‘Scroll to bottom to retrieve new page’,
gridComplete : function() {
if ($(“#reportTable”).jqGrid(‘getGridParam’, ‘datatype’) == “json”) {
$(“#reportTable”).setGridParam({
datatype : ‘local’
});
maximizeTable();
$(window).trigger(‘resize’);
}
},
grouping : true,
groupingView : {
groupField : [ “issuerPcrDescp”, “issuerBin” ],
groupColumnShow : [ false, false ],
groupText : [ “Issuer Pcr: <b>{0}</b> Fraud Total: <b>{fraudCount}<b>”, “Issuer Bin: <b>{0}</b>” ],
groupOrder : [ “asc”, “asc” ],
groupSummary : [ true, false ],
groupSummaryPos : [ ‘footer’, ‘footer’ ],
groupCollapse : false,
showSummaryOnHide : true
},
jsonReader : {
root : “listOfRecords”,
page : “currentPageIndex”,
total : “1”,
records : “totalItems”,
repeatitems : false,
cell : “cell”,
id : “id”,
userdata : “userdata”
}
});
jQuery(“#reportTable”).jqGrid(‘navGrid’, “#reportTable-pager”, {
edit : false,
add : false,
del : false,
search : false,
refresh : false
});
jQuery(“#reportTable”).jqGrid(‘navButtonAdd’, ‘#reportTable-pager’, {
caption : “”,
title : “Export Fraud Report data to Excel”,
id : “exportExcelButton”,
buttonicon : ‘ui-icon-print’,
onClickButton : function() {
$(‘#exportExcelButton’).addClass(‘ui-state-disabled’); // disable
$(“body”).css(“cursor”, “progress”);
setTimeout(function() {
$(“#reportTable”).jqGrid(“exportToExcel”, {
includeLabels : true,
includeGroupHeader : true,
includeFooter : true,
fileName : $(“#reportTable”).jqGrid(“getGridParam”, “caption”).replace(/\s+/g, ‘_’) + “_” + getTimestamp() + “.xlsx”,
maxlength : 50, // <u>maxlength</u> for visible string data
onBeforeExport : appendContextDataToExport,
replaceStr : replaceExportString
});
$(“body”).css(“cursor”, “default”);
$(‘#exportExcelButton’).removeClass(‘ui-state-disabled’); // enable
}, 30);
}
});
Hello,
It is very strange that the grid break the html content with grouping and it work fine without grouping – this is the reason that I have look deeper in your grouping settings and it seems you have incorrect written open and a close tag for the bold command here:
<b>{fraudCount}<b>
I think the problem is in this line:
|
1 2 3 |
... groupText : [ "Issuer Pcr: <b>{0}</b> Fraud Total: <b>{fraudCount}<b>", "Issuer Bin: <b>{0}</b>" ] ... |
fix it with the following
|
1 2 3 |
... groupText : [ "Issuer Pcr: <b>{0}</b> Fraud Total: <b>{fraudCount}</b>", "Issuer Bin: <b>{0}</b>" ] ... |
and let us know if this fixes the problem
Kind Regards,
Will
Guriddo Support Team
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top
