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)
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:
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.
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.
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.
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.