How to do grouping concept on JqGrid when we are using addRowData
Hi All,
My Requirement is Grouping functionality on Jqgrid 4.6.I have Data with multiple Names.Please check the code below,and tel me If any changes i need to make.Guide me,Thanks in advance
<script type="text/javascript">
$(document).ready(function () {
var lastsel = 0;
$("#jqTable").jqGrid("clearGridData");
var url = '@Url.Action("BindGrid", "Systems")';
$.ajax({
url: url,
cache: false,
type: "GET",
dataType: 'json',
contentType: 'application/json',
success: function (data) {
if (data.length != 0) {
for (var index = 0; index < data.length; index++) {
var SysId = data[index].SysId
var SysName = data[index].SysName
var SysUnits = data[index].SysUnits
var PurchasedDate = data[index].PurchasedDate
var griddata = [ {SysId: SysId, SysName:SysName,SysUnits:SysUnits,PurchasedDate:PurchasedDate }];
$("#jqTable").jqGrid("addRowData", index + 1, griddata[0]); }
jQuery("#jqTable").setGridParam({ rowNum:-1, datatype: 'local', grouping: true }).trigger("reloadGrid"); }
else { } },
error: function (reponse) { } }); });
jQuery("#jqTable").jqGrid({
datatype: "local",
height: 115,
width: 793,
colNames: [ 'SysId', 'SysName', 'SysUnits', 'PurchasedDate'],
colModel: [
{ name: 'SysId', index: 'SysId', editable: true, hidden: true, align: 'center', editrules: { edithidden: false } },
{
name: 'SysName', index: 'SysName', width: 50, NullIfEmpty: true, editable: true, editrules: { required: true }, frozen: true
},
{ name: 'SysUnits', index: 'SysUnits', width: 50, NullIfEmpty: true, editable: true, editrules: { required: true, integer: true }, formatter: 'number', frozen: true, search: false },
{
name: 'PurchasedDate', index: 'PurchasedDate', width: 80, NullIfEmpty: true, formatter: 'date', sorttype: 'date',
datefmt: 'd/m/Y',
formatoptions: { srcformat: 'd/m/Y', newformat: 'd/m/Y' },
stype: "text"
}, ],
pager: '#pager',
rowNum: 5,
rowList: [5, 10, 20],
emptyDataText: 'There are no records.',
viewrecords: true,
editurl: '@Url.Action("SaveEditGrid", "Systems")',
shrinkToFit: true,
altRows: true,
grouping: true,
groupingView: {
groupField: ['SysUnits'],
groupDataSorted: true
},
groupCollapse: true
});
$("#jqTable").jqGrid('setFrozenColumns');
$('#jqTable').jqGrid('filterToolbar', { searchOnEnter: true, enableClear: true });
function editRowFunc(cl) {
jQuery('#jqTable').editRow(cl);
if (cl && cl !== lastsel) {
jQuery('#jqTable').restoreRow(lastsel);
lastsel = cl;
} }
$("#jqTable").navGrid("#pager", { edit: false, add: false, del: false, search: false, refresh: true });
</script>