Custom grid cell to preselect/disable certain cells breaking ability to select checkboxes.

1 Answer 58 Views
Checkbox Grid
Brad
Top achievements
Rank 1
Brad asked on 20 May 2022, 07:47 PM

I created a custom grid cell to preselect and disable some columns based on the state, but now I am unable to select any checkboxes.

Is there a way to use the custom cell to set the checkbox values and keep the selection and selection state working the same? 

      <td colSpan={props.colSpan} role={'gridcell'} aria-colindex={props.ariaColumnIndex}>
        <input
          disabled={ifAttached} // value from state
          type="checkbox"
          checked={ifAttached} // value from state
        />
     

</td>

1 Answer, 1 is accepted

Sort by
0
Ina
Telerik team
answered on 24 May 2022, 08:04 AM

Hello Brad,

I have prepared the following example to demonstrate example behavior:

https://stackblitz.com/edit/react-uyp5e4-pptxum?file=app/main.jsx 

In this Stackblitz example, we are using the KendoReact Grid component with the `cellRender` property and working checkboxes. Inside the `ConditionalCellRender` method we have a condition, which can be changed to achieve your wanted behavior. You can also customize the rendered columns to your preferences. 

For more information about the `cellRender` property you can check the following API reference:

https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-cellrender 

For more information about the Grid cell customization, you can check the following article:

https://www.telerik.com/kendo-react-ui/components/grid/cells/#toc-customization 

Hope that was helpful.

Regards,
Ina
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Checkbox Grid
Asked by
Brad
Top achievements
Rank 1
Answers by
Ina
Telerik team
Share this question
or