Hi,
I am using the KendoReact grid with checkbox selection as outlined here: https://www.telerik.com/kendo-react-ui/components/grid/selection/#toc-customizing-the-selection
I was hoping for some help on the best way to selectively hide the checkbox for certain rows based on row data while still using default Grid selection behaviours i.e. Grid selectedField, onSelectionChange and onHeaderSelectionChange.
I know that I can use a custom cell template to selectively hide or show the checkbox, but if I do this is there any way to still use the Grid onSelectionChange handler for the checkboxes that are shown? Or do I have to use the Grid onItemChange event to change the selected field instead?
Kind regards,
David
1 Answer, 1 is accepted
Hi David,
Adding a custom cell is an option, but you can take advantage of the "cellRender" of the Grid and based on your condition from the data item, either return the default cell or add an empty cell or one with disabled checkbox. Following is an example demonstrating this approach:
And this is the cellRender that adds disabled checkbox if UnitsInStock is less than 20:
const ConditionalCellRender = (td, props) => {
if (props.field == SELECTED_FIELD && props.dataItem.UnitsInStock < 20) {
return (
<td>
<Checkbox disabled={true} />
</td>
);
} else {
return td;
}
};Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
Iron
Veteran
Thanks Konstantin,
Is one approach more efficient than the other? The only problem with the approach you suggest is that by returning a simple <td></td> the cell is then missing all of the props a standard grid cell is decorated with for navigation etc. for example
<td colspan="1" class="" aria-colindex="1" role="gridcell" tabindex="-1" data-keyboardnavlevel="0" data-keyboardnavid="499a3ab8-9360-4f96-bad1-eb421cb90ffc_ai0-0_cell">
Is there any simple way to return an empty cell that still has all of these props? Otherwise I'll stick with the custom cell approach.
Kind regards,
David
Hi David,
You can easily re-use the attributes that were already generated by the Grid with the following change for the disabled checkbox cell:
const ConditionalCellRender = (td, props) => {
if (props.field == SELECTED_FIELD && props.dataItem.UnitsInStock < 20) {
return (
<td {...td.props}>
<Checkbox disabled={true} />
</td>
);
} else {
return td;
}
};As for any particular difference in the two approaches, using the cellRender will allow you to easily use the built-in functionality and only change the disabled state when needed. With the custom cell you will have to manually add all attributes to the custom cell. I would personally recommend the cellRender approach.
Rank 1
Iron
Iron
Veteran
Thanks Konstantin,
I agree that seems to be a cleaner approach, however it doesn't work in Typescript because of the mismatch between the cellRender td: React.ReactElement<HTMLTableCellElement> and the returned JSX td: HTMLTableDataCellElement. Using the approach you suggested results in an error due to property type incompatibilities.
I would have to list each of the built-in property values and seeing as we already have a custom cell template in our project that does this I will stick with that approach.
Hi David,
Yes, you are correct that with TypeScript you need to list each property manually and re-using the td.props will not be an option. You can however re-use the configuration of the TD properties from the following example:
In the context of the cellRender you just need to ensure that you are adding the properties only when "props.rowType" is "data", because the cellRender is called for group headers and footers as well.
Hi,
I believe I may have figured it out. It looks like you can just call the selectionChange event on GridCellProps from the custom cell editor i.e.
const handleChange = (e: CheckboxChangeEvent) => { props.selectionChange!({ syntheticEvent: e.syntheticEvent }); };Is this a suitable solution?
Kind regards,
David