I have jqgrid. I've grouped few rows based on a column value. Working demo is available at link part of the code that defines jqGrid
var preclosingtable = $('#preclosing');
preclosingtable.jqGrid({
datatype: 'local',
data: data.DOCS,
colNames: ['', 'Documents Received', 'Comments', 'NA', 'DocGroup'],
colModel: [
{ name: 'Documents', index: 'Documents', align: 'left', sortable: false, editable: false, width: 20 },
{ name: 'DocsReceived', index: 'DocsReceived', align: 'center', sortable: false, editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", width: 140 },
{ name: 'Comments', index: 'Comments', align: 'center', sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "3", cols: "16" }, width: 180 },
{ name: 'NA', index: 'NA', editable: true, formatter: 'dynamicText', width: 150, edittype: 'custom', editoptions: { custom_element: radioelem, custom_value: radiovalue} },
{ name: 'DocGroup', index: 'DocGroup', editable: false, width: 1 }
],
rowNum: data.DOCS.length,
//rowList: [10, 20, 30],
pager: '#preclosingpagerdiv',
viewrecords: true,
sortorder: "asc",
sortname: 'Documents',
grouping: true,
groupingView: {
groupField: ['DocGroup'],
groupColumnShow: [false],
groupDataSorted: true,
groupOrder : 'asc'
},
localReader: {
id: 'ConfigId'
},
shrinkToFit: false,
height: 'auto',
loadComplete: function () {
HideGroupHeaders(this);
},
onSelectRow: function (id) {
preclosingtable.jqGrid('saveRow', previouslyselectedRow, false, 'clientArray');
previouslyselectedRow = SetJQGridRowEdit(id, previouslyselectedRow, preclosingtable);
}
});
Following is how my grid looks like
Issue: Is it possible to sort rows in this grid so that the final grid has rows in the following Order
If I correctly understand your problem you can solve your problem by adding custom sorting function (see here, here and here) on the column DocGroup
where you do the grouping:
sorttype: function (cellvalue, rowObject) {
return cellvalue? cellvalue : rowObject.Documents;
}
As the result the input data which have empty DocGroup
will be sorted and so grouped by Documents
. You will see the results on Fiddle
Two things come to my mind, you could create another row to sort on in the grid. Not place any data into that column on the server side, and then add data to the column in the beforeProcessing function on the jqGrid.
In the beforeProcessing function you could test the grouping data and use the first characters to populate this column, and then if the value is blank (for your D, Q examples above) you would use those values.
Here is the beforeProcessing function that you could use as a basis to fill this column that you would then sort on:
beforeProcessing: function (data, status, xhr) {
for (var x = 0, length = data.rows.length; x < length; x++) {
var valueToPutInSortColumn = ....
data.rows[x].cell.splice(sortColumnIndex, 0, valueToPutInSortColumn );
}
....
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With