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.
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
Hi,
Thanks for the help it worked.
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.
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.
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
Archive with the sample project:
Hi,
Thanks for the reply but I have done entirely in functional components is there any other way to implement it in functional components ?
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
Hi
Thanks for your help.