[LWC] To Manipulate the store for local data and push the same to Apex controller on every cell action

[jaiarih]

[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
});
  }

[Maxim Gorkovsky]

Hello.
I'm afraid we do not have much experience with data layer in salesforce. There are known performance issues though if you are using salesforce data objects: https://github.com/bryntum/support/issues/1899 For big datasets we do recommend to proxy the data (see linked issue for a code snippet).

To understand how fields work, please read through these doc articles and guides:
Model - https://bryntum.com/products/grid/docs/api/Core/data/Model
Working with store - https://bryntum.com/products/grid/docs/guide/Core/data/storebasics
How data is displayed - https://bryntum.com/products/grid/docs/guide/Grid/data/displayingdata
How cell editing works - https://bryntum.com/products/grid/docs/api/Grid/feature/CellEdit

Long story short, when you edit cells, editor feature assigns a new value to a record field (field config on a column). When this happens store triggers update event. You can listen to this event and then apply required changes to data using wire service.

[Maxim Gorkovsky]

Also, speaking of this particular configuration, you're creating an extra store which you don't really need.

const dataStore = new bryntum.grid.Store();
dataStore.data = this.data;

new Grid({
  // This will create another store with the same data
  data : dataStore.data
})

// Instead you can use the store you already created
new Grid({
  store: dataStore
})