asked on March 4, 2022
Hi Team!
I am using Reactjs, and want to call different functions on clicking different chips(buttons) inside a single cell.
If I am using pure javascript and html, I am able to achieve this (here https://jsfiddle.net/Manav326/dw0fox9v/48/). But in ReactJs, the function, which I have written there, is not accessible to the onclick attribute of the html div.
const handleChipClick=(actionName, sarId)=> {
console.log(actionName, sarId);
}
const addChips = (text) => {
// console.log(text);
let divs = '';
let chips = text.split(',');
for (let i = 0; i < chips.length; i++) {
divs = divs + `<div
style="display: inline-block;
padding: 0 25px;
height: 50px;
font-size: 16px;
line-height: 50px;
border-radius: 25px;
background-color: #f1f1f1;
title="${chips[i]}" onclick="handleChipClick( '${chips[i]}', '${i}')">${chips[i]}</div>`;
}
divs = `<div>` + divs + `</div>`;
return divs;
}
const customizeCellFunction = (cell, data) => {
if (
data.hierarchy &&
data.hierarchy.uniqueName === 'countryName' &&
data.type === 'value'
) {
cell.addClass('link');
cell.text = addChips(cell.text);
}
}
Please provide a solution for this specific problem.
Thanks a lot, in advance::)
⋅ March 7, 2022
Hello,
Thank you for reaching out to us and for providing a code example.
A possible solution is to add your click handlers to the window object.
For example, you could add the handlers when Flexmonster's reportcomplete event is triggered:
onReportCompleteHandler = () => {
this.refs.pivot.flexmonster.off("reportcomplete");
window["LinkClicked"] = this.LinkClicked.bind(this);
window["ChipClicked"] = this.ChipClicked.bind(this);
this.applyCustomization();
}
applyCustomization = () => {
//running grid customization using "customizeCellFunction"
this.refs.pivot.flexmonster.customizeCell(this.customizeCellFunction);
}
removeCustomization = () => {
this.refs.pivot.flexmonster.customizeCell(null);
}
// Your customization logic:
customizeCellFunction = (cell, data) => {...}
// Your click handlers:
LinkClicked = (rowIndex) => {...}
ChipClicked = (rowIndex) => {...}
...
// Rendering Flexmonster React Component:
<FlexmonsterReact.Pivot
ref="pivot"
toolbar={true}
width="100%"
height={600}
report={this.report}
reportcomplete={this.onReportCompleteHandler}
//licenseKey="XXXX-XXXX-XXXX-XXXX-XXXX"
/>
This will make LinkClicked() and ChipClicked() accessible when using React.
Please let us know if this helps.
Kind regards,
Vera
⋅ March 15, 2022
Hi Team!
Thanks a lot for your response, it worked for me.
Now, Is there any way to insert React(Material UI) Components (Pop-up, alert etc..) in cells of the pivot table?
We actually want to achieve this(attached image) UI and functionality in the flexmonster pivot table.
Please reply ASAP.
Thanks.