Hi,
I have a custom menu handler to add records inside the grid with the Insert Before and Insert After options. This code works fine in the regular scenario
In the current requirement, I have a Bryntum grid inside a div element. I also have an Add button that will enable me to add another instance of the div along with the grid. The Add button should allow me to add any number of grid instances this way.
The issue I am facing in this case is when I am adding the grid dynamically, I am able to add records for the current grid. However, when I add the 2nd grid and go back to the 1st grid to add any row before or after a selected row, the new record is added to the 2nd grid (the latest grid) and not the 1st.
(If there are 5 grids, and you try to add a record to any grid created prior to it, the record gets added in the 5th grid)
It would be great if you can provide a working snippet that will guide me in this scenario.
features: {
sort: false,
cellEdit: true,
rowCopyPaste : false,
cellMenu: {
items: {
insertBefore: {
text: 'Insert above',
icon: 'b-fa b-fa-plus',
cls: 'b-separator color',
weight: 110, // Insert after the first default item
onItem: ({ item, record, column }) => {
const selected = grid.selectedRecords;
var index = grid.store.indexOf(selected[0])
var added = grid.store.insert(index,
{
"intervalSequenceNumber": null,
"perfOperationID": null,
"intervalID": null,
//...
}
);
grid.selectedRecord = added[0];
setSequenceNumber();
}
},
insertAfter: {
text: 'Insert below',
icon: 'b-fa b-fa-plus',
cls: 'b-separator color',
weight: 110, // Insert after the first default item
onItem: ({ item, record, column }) => {
const selected = grid.selectedRecords;
var index = grid.store.indexOf(selected[0])
var added = grid.store.insert(index + 1,
{
"intervalSequenceNumber": null,
"perfOperationID": null,
"intervalID": null,
//...
}
);
grid.selectedRecord = added[0];
setSequenceNumber();
}
},
}
},
},
Please note that I am adding records using a context menu for Add.
addEmptyRecords(gridObjTemp) {
const menu = new Menu({
anchor: true,
autoShow: false,
items: [
{
icon: 'b-fw-icon b-icon-add',
text: 'Add'
},
],
onItem(item) {
var added = gridObjTemp.store.add(
{
"intervalSequenceNumber": null,
"perfOperationID":null,
"intervalID":null,
//....
}
);
gridObjTemp.selectedRecord = added[0];
}
});
if(gridObjTemp.subGrids){
gridObjTemp.subGrids.normal.currentElement.addEventListener("contextmenu", (ev) => {
if (gridObjTemp.store.records.length === 0) {
menu.show();
menu.setXY(ev.clientX, ev.clientY);
ev.preventDefault();
}
})
}
}