asked on February 11, 2022
Hello.
For customizeCellFunction if i add button to the column how to i write functions to that button
cell.style["text-align"] = "center";
cell.style["z-index"] = 2;
cell.text = `<button class="mybutton" onChange="myfunction()"></button>`;
if i write this in react it shows error how do achieve this functionality.
⋅ February 11, 2022
Hello!
We recommend you implement this functionality by adding event listeners via the addEventListener function. Please see the code sample below:
const addListeners = () => {
var elements = document.getElementsByClassName("mybutton");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('change', eventHandlerFunction);
}
}
Also, you should add these event listeners every time your table is redrawn. To achieve this functionality, specify this in the Flexmonster React Component:
aftergriddraw={addListeners}
Please let us know if it works for you.
Best Regards,
Maksym
⋅ February 15, 2022
Hi,
Thanks for the help it worked.
⋅ February 15, 2022
Hi,
I am having doubt with this aftergriddraw this method trigger after every grid render if the table is scrolled it grid again renders and the aftergriddraw is triggered now if i call axios method it calls how much times it has rendered that much times the network call is going how to solve this problem.
⋅ February 15, 2022
the issues is when i scroll addEventListener is keep on adding to when i add axios i am getting lot of network call help me to sort this issues.
⋅ February 15, 2022
Hello!
Thank you for your question.
We recommend you to work with Flexmonster as a React Class Component. This approach will allow you to assign onchange functions for checkboxes and use this in the customizeCell method, as is shown below:
customizeCellHandler = (cell, data) => {
if (data.type !== "header" && data.measure.uniqueName === "ID") {
cell.style["text-align"] = "center";
cell.style["z-index"] = 2;
cell.text = `<input type="checkbox" onchange="onChangeHandler()"></input>`;
}
}
Please see the attached example project, with this approach for realization. To run the project replace the placeholder in licenseKey property with your real key.
Hope you will find this answer helpful.
Best Regards,
Maksym
⋅ February 15, 2022
Archive with the sample project:
⋅ February 15, 2022
Hi,
Thanks for the reply but I have done entirely in functional components is there any other way to implement it in functional components ?
⋅ February 16, 2022
Hello!
Thank you for quick response
Please note that the recommended approach for using Flexmonster in React is a class component. Such an approach ensures that refs to Flexmonster API object will be always accessible from the client's code. The other components, which do not rely on Flexmonster directly, can remain functional.
Best Regards,
Maksym
⋅ February 17, 2022
Hi
Thanks for your help.