Switch component on a react grid stacked column
Hi,
I want to customize column display on a SyncFusion react grid.
My requirements are as follows:
- Show a toggle button and a custom display text (refer to attached image) on a single grid column.
- User should be able to toggle the switch on single click. Display text need to change accordingly.
- This needs to happen a on stacked column.
I have achieved all these by capturing QueryCellInfo event. I wrote a handler and custom render the components I wanted. I used ‘ReactDOM.render’ method here. I understand that this render gets executed for every row (twice in my case as I have two columns with this requirements).
Are there any alternatives to this? I want to avoid calling ReactDOM.render multiple times. I have attached sample code and a screenshot of my grid columns.
const renderSwitchComponent = (args: QueryCellInfoEventArgs) => {
const columnName = (args.column as Column).field;
const value = 1;
const displayText = 'Custom Text'
ReactDOM.render(
<div style={{ display: 'flex', width: '100%', gap: '1rem' }}>
<SwitchComponent
className="ABC"
id={columnName}
checked={value}
change={(args: ChangeEventArgs) => {
handleSwitchChange(args.checked, rowData, columnName);
}}
/>
<Label>{displayText}</Label>
</div>,
args.cell as Element
);
}
};
function handleSwitchChange(checked: boolean | undefined, rowData: IMyDataSource, columnName: string): void {
if (checked !== undefined && rowData) {
// update data source
grid?.refreshColumns();
}
}
1) Share your complete Grid rendering code, we would like to check how you are implementing the template with stacked header and expecting the solution.
Refer to attached GridDemo.tsx file. I have one regular toggle switch column and 2 stacked toggle switch columns. I used template methods for regular toggle column, I would like to use the same template approach for stacked columns, but typescript code does not allow this for stacked columns. I used queryCellInfo to achieve the same for stacked columns, but I am looking for alternatives.
2) Please confirm you like to expect that our same shared sample in .tsx format.
Yes, I would like to have your sample code functionality in tsx (typescript code).
3) Share your exact requirement step by step with detailed description for better understanding.
- I want to have 2 grid STACKED columns with switch component and a custom text like Yes, and No.
- On a single click user should be able to toggle the switch, and corresponding custom text should change appropriately to Yes, or No.
- I have achieved this functionality using QueryCellInfo event, refer to attached sample code.
- I would like to have an alternative approach so I avoid calling ReactDOM.Render multiple times.
- I have tried to use column templates, but these do not work for stacked columns. template for a stacked column expects a string or HTML element Id. It does not take a function like your JS code.
- I am using SyncFusion react grid with typescript.
Attachment: GridDemo_3161fe58.zip
