We have multiple columns but when we use sort feature of bryntum grid for sorting the dataset (spread across multiple pages) on the basis of a particular column value, it just sorts the first page and when we move to next page we again have to sort on the second page. Is there any way to sort rows for a particular column across all the pages?
here is my config file:
export default {
id: 'tripsScheduler',
cellTooltipFeature: {
allowOver: true,
width: 200,
hoverDelay: 0
},
regionResizeFeature: false,
resources: [],
rowHeight: 70,
barMargin: 10,
subGridConfigs: {
locked: { flex: 1 },
normal: { collapsed: true }
},
columns: [
{
text: 'Trip ID',
field: 'TcTripId',
resizable: false,
flex: 1,
editor: false,
enableCellContextMenu: false,
enableHeaderContextMenu: false,
draggable: false
},
{
text: 'Number <br />of Shipments',
field: 'NumberOfShipments',
type: 'number',
resizable: false,
enableHeaderContextMenu: false,
flex: 1,
editor: false,
htmlEncodeHeaderText: false,
enableCellContextMenu: false,
draggable: false,
},
{
text: 'Shipment ID',
field: 'ShipmentNames',
resizable: false,
flex: 1,
editor: false,
enableCellContextMenu: false,
enableHeaderContextMenu: false,
draggable: false,
renderer: ({ value }) => arrayToString(value),
sortable: (obj1, obj2) => {
let shipmentNames1 = obj1 && obj1.data ? arrayToString(obj1.data.ShipmentNames) : '';
let shipmentNames2 = obj2 && obj2.data ? arrayToString(obj2.data.ShipmentNames) : '';
if (shipmentNames1 > shipmentNames2) {
return 1;
} else if (shipmentNames1 < shipmentNames2) {
return -1;
} else {
return 0;
}
},
tooltipRenderer: ({ record }) => {
const shipmentNames = record.data.ShipmentNames;
return `${arrayToString(shipmentNames)}`;
}
},
]
};And we are apply the default sorting for the column field: 'NumberOfShipments',.
