[LWC] To Manipulate the data store for local data and push the same to Apex controller on every cell action (Onchange, Onclick)
Please suggest how to manipulate the data on datastore using editable cells, and storing the changes synchronously to the JS controller/Client Side and commit to the Database afterwards.
The code looks something like this for now where the data is coming form the server side and this data is assigned to datastore to pass to the grid.
createGrid() {
const themeCSSRegexp = new RegExp("https:.+?grid.stockholm.css");
const dataStore = new bryntum.grid.Store();
dataStore.data = this.data;
window.grid = new bryntum.grid.Grid({
appendTo: this.template.querySelector(".container"),
rowHeight: 60,
features: {
columnPicker: true,
regionResize: true,
rowReorder: true,
filter: true,
quickFind: true,
excelExporter: {
filename: "exported_data"
},
pdfExport: {
// NOTE: THIS IS DONE FOR DEMO PURPOSES, DO NOT USE dev.bryntum.com IN PRODUCTION!
exportServer: "https://dev.bryntum.com:8082",
//exportServer : 'http://export-host:8081',
translateURLsToAbsolute: true,
filterStyles: (styles) =>
styles
.filter((style) => style.match(themeCSSRegexp))
.map((style) => {
return style.replace(themeCSSRegexp, "https://bryntum.com/products/grid/build/grid.stockholm.css");
})
}
},
subGridConfigs: {
locked: {
width: 350
}
},
tbar: {
items: {
recordCount: {
type: "numberfield",
label: "Record count:",
width: 200,
value: 200
},
genButton: {
type: "button",
text: "Generate",
onClick() {
const grid = this.up("grid");
grid.store.data = bryntum.grid.DataGenerator.generateData(grid.tbar.widgetMap.recordCount.value);
}
},
exportToExcel: {
type: "button",
text: "Export to Excel",
onClick() {
const grid = this.up("grid");
grid.features.excelExporter.export();
}
},
exportToPDF: {
type: "button",
text: "Export to PDF",
onClick() {
this.up("grid").features.pdfExport.showExportDialog();
}
}
}
},
columns: [
{
type: "rownumber",
locked: true
},
{
text: "Client",
field: "Company",
locked: true,
width: 200,
type: "template",
template: (data) => `${data.record.data.Company}`
},
{
text: "Role",
field: "Role__c",
width: 200,
type: "template",
template: (data) => `${data.record.data.Role__c}`
},
{ text: "2022 RS", field: "Relationship_Status_FY_Minus_2__c", flex: 1 },
{
field: "Relationship_Status_Current_FY__c",
text: "2023 RS",
flex: 1,
editor: {
type: "combo",
store: this.salesProbStore.data,
valueField: "value",
displayField: "label"
}
},
{ text: "Length Of Coverage (Yrs)", field: "LengthOfCoverage", flex: 1 },
{ text: "Exposure", field: "Exposure__c", type: "check", flex: 1, align: "center",
renderer ({ record, widgets }) {
console.log('popup');
this.openModal();
}
}
],
// Generate some dummy data and calculate the bar widths for air quality metrics
data: dataStore.data
});
}