Dear Bryntum Support Team,
I am reaching out regarding an issue we’ve encountered with the Grid rows-grouping functionality in your product.
Specifically, when I attempt to group rows by any field, the grouped rows displayed do not match the actual rows within the grouping. This leads to incorrect or inconsistent grouping results, making the feature unusable in its current state.
We’ve reviewed the documentation and tried several troubleshooting steps, but the problem persists. Could you please provide guidance or investigate this issue further?
Thank you for your assistance, and I look forward to your reply.
Best regards,
GPA
const store_Items = new bryntum.grid.AjaxStore({
// This will create an AjaxStore
readUrl: '/MRP/View/Items/Read',
// This will activate the lazy load functionality
lazyLoad: {
chunkSize: 50
},
// This will load the Store initially upon creation
autoLoad: true,
// remoteSort: true,
// remoteFilter: true,
useRestfulMethods: true,
multiSort: true,
httpMethods: {
"create": "POST",
"read": "POST",
"update": "PUT",
"delete": "DELETE"
},
headers: {
'content-type': 'application/json; charset=UTF-8'
},
paramsInBody: true,
sendAsFormData: false,
sortParamName: 'sort', // Nome del parametro per il sort
filterParamName: 'filters', // Nome del parametro inviato
emptyText: "No data is available",
listeners: {
load({
response
}) {
const unfilteredTotal = response.parsedJson.effectiveTotalRows;
// Puoi memorizzare il valore da qualche parte, ad esempio in una variabile globale
window.unfilteredTotal = unfilteredTotal;
}
},
params: SetAjaxParameters({"viewName":"MRP_DispoRiassuntiva","AggregationDetailId":1,"DateOptionId":null,"DateOption":{"Id":1,"Name":"EndDate"},"StartDate":null,"EndDate":null,"MinEventStartDate":"2000-01-01T00:00:00","MaxEventStartDate":"3000-01-01T00:00:00","MinEventEndDate":"2000-01-01T00:00:00","MaxEventEndDate":"3000-01-01T00:00:00","WarehouseMRPFilter":"(null)","ForceTableRebuild":false,"SqliteQueryName":null,"IsShortcutNavigation":false,"AggregatedItemId":null,"AggregatedItemOppTableId":null,"dashboardCardId":null,"dashboardFilterList":[],"dashboardType":null,"count":0,"startIndex":0,"sort":"[]","filters":"[]","columns":[{"autoHeight":null,"autoWidth":null,"field":"RecordId","fitMode":null,"flex":null,"listeners":null,"maxWidth":null,"text":"RecordId","width":null,"readOnly":null,"hidden":null,"cellCls":"","cls":null,"renderer":null,"sortable":null,"locked":null,"draggable":null,"resizable":"true","type":"string","headerMenuItems":null,"cellMenuItems":null,"children":null,"mrpName":null,"index":0},{"autoHeight":null,"autoWidth":null,"field":"ItemId","fitMode":null,"flex":null,"listeners":null,"maxWidth":null,"text":"ItemId","width":null,"readOnly":null,"hidden":null,"cellCls":"b-grid-cell-time-phased-link","cls":null,"renderer":null,"sortable":null,"locked":null,"draggable":null,"resizable":"true","type":"string","headerMenuItems":null,"cellMenuItems":null,"children":null,"mrpName":null,"index":1},{"autoHeight":null,"autoWidth":null,"field":"Description","fitMode":null,"flex":null,"listeners":null,"maxWidth":null,"text":"Description","width":null,"readOnly":null,"hidden":null,"cellCls":"b-grid-cell-description-popup","cls":null,"renderer":null,"sortable":null,"locked":null,"draggable":null,"resizable":"true","type":"string","headerMenuItems":null,"cellMenuItems":null,"children":null,"mrpName":null,"index":2},{"autoHeight":null,"autoWidth":null,"field":"DynamicSafetyStockDays","fitMode":null,"flex":null,"listeners":null,"maxWidth":null,"text":"DynamicSafetyStockDays","width":null,"readOnly":null,"hidden":null,"cellCls":"","cls":null,"renderer":null,"sortable":null,"locked":null,"draggable":null,"resizable":"true","type":"double","headerMenuItems":null,"cellMenuItems":null,"children":null,"mrpName":null,"index":3},{"autoHeight":null,"autoWidth":null,"field":"UnitOfMeasure","fitMode":null,"flex":null,"listeners":null,"maxWidth":null,"text":"UnitOfMeasure","width":null,"readOnly":null,"hidden":null,"cellCls":"","cls":null,"renderer":null,"sortable":null,"locked":null,"draggable":null,"resizable":"true","type":"string","headerMenuItems":null,"cellMenuItems":null,"children":null,"mrpName":null,"index":4},{"autoHeight":null,"autoWidth":null,"field":"MainSupplier","fitMode":null,"flex":null,"listeners":null,"maxWidth":null,"text":"MainSupplier","width":null,"readOnly":null,"hidden":null,"cellCls":"","cls":null,"renderer":null,"sortable":null,"locked":null,"draggable":null,"resizable":"true","type":"string","headerMenuItems":null,"cellMenuItems":null,"children":null,"mrpName":null,"index":5},{"autoHeight":null,"autoWidth":null,"field":"StockOutDays","fitMode":null,"flex":null,"listeners":null,"maxWidth":null,"text":"StockOutDays","width":null,"readOnly":null,"hidden":null,"cellCls":"","cls":null,"renderer":null,"sortable":null,"locked":null,"draggable":null,"resizable":"true","type":"int32","headerMenuItems":null,"cellMenuItems":null,"children":null,"mrpName":null,"index":6},{"autoHeight":null,"autoWidth":null,"field":"MinStockDays","fitMode":null,"flex":null,"listeners":null,"maxWidth":null,"text":"MinStockDays","width":null,"readOnly":null,"hidden":null,"cellCls":"","cls":null,"renderer":null,"sortable":null,"locked":null,"draggable":null,"resizable":"true","type":"int32","headerMenuItems":null,"cellMenuItems":null,"children":null,"mrpName":null,"index":7},{"autoHeight":null,"autoWidth":null,"field":"MaxStockDays","fitMode":null,"flex":null,"listeners":null,"maxWidth":null,"text":"MaxStockDays","width":null,"readOnly":null,"hidden":null,"cellCls":"","cls":null,"renderer":null,"sortable":null,"locked":null,"draggable":null,"resizable":"true","type":"int32","headerMenuItems":null,"cellMenuItems":null,"children":null,"mrpName":null,"index":8},{"autoHeight":null,"autoWidth":null,"field":"OnHand","fitMode":null,"flex":null,"listeners":null,"maxWidth":null,"text":"OnHand","width":null,"readOnly":null,"hidden":null,"cellCls":"","cls":null,"renderer":null,"sortable":null,"locked":null,"draggable":null,"resizable":"true","type":"double","headerMenuItems":null,"cellMenuItems":null,"children":null,"mrpName":null,"index":9}}],"search":null,"ColumnsDefinition":null,"ColReorder":null,"Warning":null,"Context":null,"SubContext":null,"RecordId":null,"SelectAllFlag":false,"SelectedRecords":[],"SelectedColumns":[],"FilterHistory":[],"ExpandedRecords":[],"Export":false,"ExportWithLayout":false,"ExportAllViews":false,"GroupActionId":null,"ViewId":"Items_20250131054200","IsPageRefreshRequest":false},{"Context":"Items","SubContext":"Company","SelectAllFlag":false,"SelectedRecords":"","RecordId":"RecordId","MyPlanContext":{"Id":"Items","MyPlanModule":{"Id":"MRP"},"MyPlanCategory":{"Id":"View"},"Action":"Items","Url":"/MRP/View/Items","UseUrl":true,"TargetBlank":true,"AllowChooseParameters":true,"ForceChooseParameters":false,"OmitModuleInContextUrl":false,"IsFavourite":true,"AuthorizedModules":[{"Id":"MRP"}],"RequiredAuthorizedRoles":null,"DashboardCategoryId":"0e4afce5-9977-4cfc-aaf1-964ffc3d9176"}}),
onAfterRequest({
exception,
action,
exceptionType,
response,
json
}) {
if (json != undefined && json.data != undefined && json.data.length == 0) {
grid_Items.renderContents();
}
}
});
var firstLoadItems = true;
// Adding a listener using the "on" method
store_Items.on('beforeRequest', ({
source,
url,
params,
body,
action
}) => {
var tableId = 'Items';
var table = bryntum.grid.Grid.getById(tableId);
if (firstLoadItems) {
firstLoadItems = false;
params["FilterHistory"] = [];
//table.store.params = params;
//Gestione Layout
$.ajax({
url: '/TableViewLayout/LoadTableState/25047',
dataType: 'json',
async: false,
success: function (json) {
var currentColumns = [
{
Title: 'RecordId',
Name: "RecordId",
Visible: true,
Width: "",
DataType: "string",
Index: 0,
OrderIndex: 0,
resizable: true,
locked: true,
draggable: false,
region: 'leftLocked'
}, {
Title: 'ItemId',
Name: "ItemId",
Visible: true,
Width: "",
DataType: "string",
Index: 1,
OrderIndex: 1,
resizable: true,
locked: true,
draggable: false,
region: 'leftLocked'
}, {
Title: 'Description',
Name: "Description",
Visible: true,
Width: "",
DataType: "string",
Index: 2,
OrderIndex: 2,
resizable: true,
locked: true,
draggable: false,
region: 'leftLocked'
}, {
Title: 'DynSS',
Name: "DynamicSafetyStockDays",
Visible: true,
Width: "",
DataType: "double",
Index: 3,
OrderIndex: 3,
resizable: true,
locked: false,
draggable: true
}, {
Title: 'UnitOfMeasure',
Name: "UnitOfMeasure",
Visible: true,
Width: "",
DataType: "string",
Index: 4,
OrderIndex: 4,
resizable: true,
locked: false,
draggable: true
}, {
Title: 'MainSupplier',
Name: "MainSupplier",
Visible: true,
Width: "",
DataType: "string",
Index: 5,
OrderIndex: 5,
resizable: true,
locked: false,
draggable: true
}, {
Title: 'StockOutDaysxx',
Name: "StockOutDays",
Visible: true,
Width: "",
DataType: "int32",
Index: 6,
OrderIndex: 6,
resizable: true,
locked: false,
draggable: true
}, {
Title: 'MinStockDays',
Name: "MinStockDays",
Visible: true,
Width: "",
DataType: "int32",
Index: 7,
OrderIndex: 7,
resizable: true,
locked: false,
draggable: true
}, {
Title: 'MaxStockDays',
Name: "MaxStockDays",
Visible: true,
Width: "",
DataType: "int32",
Index: 8,
OrderIndex: 8,
resizable: true,
locked: false,
draggable: true
}, {
Title: 'OnHand',
Name: "OnHand",
Visible: true,
Width: "",
DataType: "double",
Index: 9,
OrderIndex: 9,
resizable: true,
locked: false,
draggable: true
}
];
$.each(json.ColumnsDefinition, function (i, col) {
var sameCol = currentColumns.find(x => x.Name === col.Name);
if (sameCol) {
if (sameCol.Index !== col.Index)
sameCol.Index = col.Index;
if (sameCol.OrderIndex !== col.OrderIndex)
sameCol.OrderIndex = col.OrderIndex;
if (sameCol.Title !== col.Title)
sameCol.Title = col.Title;
if (sameCol.Visible !== col.Visible)
sameCol.Visible = col.Visible;
}
//currentColumns.push({ Title: col.Title, Name: col.Name, Visible: col.Visible, Width: col.Width, DataType: col.DataType, Index: i, OrderIndex: i });
});
//Validation of the Layout
var validationResult = ValidateLayoutState(tableId, json, null, currentColumns);
//If Layout needs changes, save it
if (validationResult.NeedUpdate) {
validationResult.State.LayoutProfileId = "25047";
UpdateSavedLayoutState(tableId, validationResult.State, true, null);
}
}
});
}
});
let settingGrid_Items = {
appendTo: "container_Items",
id: "Items",
features: {
search: true,
cellEdit: false,
summary: false,
group: true,
// group : {
// renderer({ column, groupColumn, groupRowFor, count, isFirstColumn, record })
// {
// debugger;
// return `${count} <span style="font-size: .7em; margin: 0 .5em">x</span> ${groupRowFor} star ratings`;
// }
// }
},
columns:
[
{
field: 'RecordId',
text: 'RecordId',
type: '',
hidden: false,
locked:
true,
draggable: false,
region: "leftLocked",
groupable: false,
index: '0',
cellCls: '',
resizable: true
},
{
field: 'ItemId',
text: 'ItemId',
type: '',
hidden: false,
locked:
true,
draggable: false,
region: "leftLocked",
groupable: false,
index: '1',
cellCls: 'b-grid-cell-time-phased-link',
resizable: true
},
{
field: 'Description',
text: 'Description',
type: '',
hidden: false,
locked:
true,
draggable: false,
region: "leftLocked",
groupable: false,
index: '2',
cellCls: 'b-grid-cell-description-popup',
resizable: true
},
{
field: 'DynamicSafetyStockDays',
text: 'DynSS',
type: 'number',
hidden: false,
locked:
false,
index: '3',
cellCls: '',
resizable: true
},
{
field: 'UnitOfMeasure',
text: 'UnitOfMeasure',
type: '',
hidden: false,
locked:
false,
index: '4',
cellCls: '',
resizable: true
},
{
field: 'MainSupplier',
text: 'MainSupplier',
type: '',
hidden: false,
locked:
false,
index: '5',
cellCls: '',
resizable: true
},
{
field: 'StockOutDays',
text: 'StockOutDaysxx',
type: 'number',
hidden: false,
locked:
false,
index: '6',
cellCls: '',
resizable: true
},
{
field: 'MinStockDays',
text: 'MinStockDays',
type: 'number',
hidden: false,
locked:
false,
index: '7',
cellCls: '',
resizable: true
},
{
field: 'MaxStockDays',
text: 'MaxStockDays',
type: 'number',
hidden: false,
locked:
false,
index: '8',
cellCls: '',
resizable: true
},
{
field: 'OnHand',
text: 'OnHand',
type: 'number',
hidden: false,
locked:
false,
index: '9',
cellCls: '',
resizable: true
}
],
selectionMode: {
rowCheckboxSelection: true,
showCheckAll: true,
checkbox: true,
multiSelect: true
},
store: store_Items,
listeners: {
ready: () => {
setRowSelection("Items");
}
},
};
settingGrid_Items.features["cellMenu"] = getStandardRowsMenu('Items');
settingGrid_Items.features["headerMenu"] = getStandardHeaderMenu('Items');
const grid_Items = new bryntum.grid.Grid(settingGrid_Items);
grid_Items.store.on({
lazyLoadEnded: () => {
if ($('#b-checkbox-1-input').prop('checked')) {
grid_Items.selectAll();
}
}
});
