Rank 1
Is there a way to have a Grid with multiple rows spanning a single parent row and both parent and child rows containing checkboxes. The parent checkbox is checked when one or more eligible child rows are checked. All the child rows are selected when parent row is checked. Is this design achievable using PivotGrid/Master-Detail Grid.
Below is the screenshot for reference
1 Answer, 1 is accepted
Hello, Anusha,
You can achieve this by rendering custom cells for the columns, specifically custom header cells. This allows you to render CheckBox components for each header cells, and handle them in controlled mode.
For convenience, I prepared an example of this custom implementation where I am checking and unchecking the child columns when the parent is checked/unchecked. In addition, I also handled the opposite cases that involves checking all the child columns that checks the parent column:
For more information on rendering custom cells for the Grid, check the following article:
I hope this helps, but please let me know if you have any further questions.
Regards,
Wissam
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 1
Thank you Wissam for your quick response!
I do not want checkboxes in the header but rather in each and every grid row with varying number of child rows. We have huge amount of grid data, so I want to know if having custom cells in the regular Grid is the best option or if we can make use of any other kendo component like Pivot/Master-Detail grids to achieve this.
Hi, Anusha,
Thank you for getting back to me with more information. I believe that checkbox selection is what you are looking for:
Regards,Wissam
Progress Telerik
Rank 1
Yes, but I am also looking for how to create child rows having its own checkboxes and them interacting with the parent checkbox in the same grid row. Can you please help me with that.
Please find the below screenshot for reference.
Hi, Anusha,
Thank you for the screenshot.
This can possibly be done using a custom data cell for the Columns. I will need more time to create such an example. I will write you back when I am done.
Regards,Wissam
Progress Telerik
Hi, Anusha,
I prepared an initial example that demonstrates this scenario.
Basically, I rendered custom cells for two columns, where I rendered checkboxes. This allows you to handle their change events to check if they are checked. One possible solution would be to set a property `selected` in the data, and use it to set the selected state for the checkbox in the first column. Nevertheless, you can apply the solution that matches your use case scenario.
Here is an example where I am rendering Checkbox elements in the Grid and handling their change events:
In addition, I would suggest checking the following articles for more information on the above demo:
- https://www.telerik.com/kendo-react-ui-develop/components/grid/cells/
- https://www.telerik.com/kendo-react-ui/components/inputs/checkbox/controlled/
I hope this helps.
Regards,Wissam
Progress Telerik