Our blazing fast Grid component built with pure JavaScript


Post by jaiarih »

Getting below error while calling a function from Column Parameters in a Grid.

Error : caught (in promise) TypeError: LWC component's @wire target property or method threw an error during value provisioning. Original error:
[this.openModal is not a function]

Calling the function from the parameter in Checkbox Column :

{ text: "Exposure", field: "Exposure__c", type: "check", flex: 1, align: "center", 
        renderer ({ record, widgets }) {
          console.log('popup'); 
          this.openModal(); // Defined a function in JavaScript file which opens the popup basically a child component
        } 
}

We are trying to perform certain JavaScript actions and method calling from grid cell actions (ie. onchange, onclick, popup)


Post by Maxim Gorkovsky »

Hello.
this in your renderer function refers to the Column instance. If you want to refer to the function defined in lightning component, you can try using closure:

renderer : ({ record, widgets }) => { this.openModal(); }

Post by jaiarih »

Hi Maxim,
After making the suggested changes, getting the below error :
CheckColumn is configured with a field, but this is not part of your Model fields collection.
Also, after this change, data stopped rendering in the grid.


Post by jaiarih »

Renderer Worked with closure.
However, Model is opening on the load of the grid. Please share the snippet to call a function on self click, i.e OnChange/Onclick action on the grid cell.


Post by mats »

Listen to cellClick event:

new Grid({

columns: [{ text: "Exposure", field: "Exposure__c", type: "check", flex: 1, align: "center", 
        renderer ({ record, widgets }) {
          console.log('popup'); 
          this.openModal(); // Defined a function in JavaScript file which opens the popup basically a child component
        } 
}],

onCellClick({ grid, record, column }) {
}

Post by jaiarih »

onCellClick worked. But,
1) Please let me know how do i listen to the "Change" event on a cell.

2) Can I listen to different "Events" for each column definitions. Currently i am using Grid level onCellClick like this :

new Grid({

columns: [{ text: "Exposure", field: "Exposure__c", type: "check", flex: 1, align: "center", 
        renderer ({ record, widgets }) {
          console.log('popup'); 
          this.openModal(); // Defined a function in JavaScript file which opens the popup basically a child component
        } 
}],

onCellClick({ grid, record, column }) {
}

Can I replace the above thing to column specific definition, something like this :

 { text: "Exposure", field: "Exposure__c", type: "check", flex: 1, align: "center",
        callOnFunctions : true,
        onClick(){
          console.log('Exposure click');
        }
  }

Post by Animal »


Post by jaiarih »

Could you please point me to an example in the documentation on :
1) How to catch the onChange event when a user tries to update a cell in the Grid?
2) How to store and manipulate the same on the server?

Our code :

new Grid({
columns: [{ text: "Exposure", field: "Exposure__c", type: "check", flex: 1, align: "center", 
        renderer ({ record, widgets }) {
          console.log('popup'); 
          this.openModal(); // Defined a function in JavaScript file which opens the popup basically a child component
        } 
}],
store : dataStore,
onUpdate({ grid, record, column }) {
}
});

Tried another approach :

store : dataStore.on(
        {
          update : () => {
            console.log('Store DAta Update');
          }
        }
      )

But I specifically want to listen events fired from specific cells in a grid.
Basically we are trying data manipulation synchronously back to JavaScript controller and then server. Like change of Dropdown Value for a row/record, checkbox updates, or text field data entry.


Post by fabio.mazza »

Hi jaiarih,

regarding your first question, try something like this

new Grid({

columns: [{ text: "Exposure", field: "Exposure__c", type: "check", flex: 1, align: "center" }],

onCellClick({ grid, record, column }) {
     if (column.field == "Exposure__c") {
          console.log('popup'); 
          this.openModal(); // Defined a function in JavaScript file which opens the popup basically a child component
     }
}

....

Regarding sync with server, you could listen for beforeUpdate event, you can easily revert changes by returning false.
https://www.bryntum.com/products/grid/docs/api/Core/data/Store#event-beforeUpdate
An example:

beforeUpdate: ({changes}) => {
    ....
}

Best regards,
Fabio


Post by jaiarih »

Please suggest how to capture and print the old and new values for the field action. eg. In a dropdown cell, value is changed from 'Low' to 'Medium'. How to pass and print the old value ('Low') and new value ('Medium') to the custom JavaScript controller method?

Where should we add these action in the Grid Definition. Is it on column definitions, or where we have assigned data from store in Grid Definition?

In other words, I would like to understand how the events should be used to get the old and new values from the onChange event on cells.


Post Reply