[TreeList] Show indeterminate state in selection checkboxes

Progress® Kendo UI® for Angular Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 19 Mar 2024 16:05 by K

Ferdinand

Created on: 14 Oct 2022 11:07

Category: TreeList

Type: Feature Request

[TreeList] Show indeterminate state in selection checkboxes

Hello Telerik Team,

I am currently using your TreeList Component with the CheckboxColumnComponent.

Unfortunately it is not possible to configure the CheckboxColumnComponent to show the indeterminate state of items in the checkboxes.

On further research I discovered, that your TreeView Component supports this feature.

The following Screenshot has the TreeView Component showing the indeterminate state of the Item "Furniture".

(Screenshot was taken from one of your own examples here: https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes/#toc-setup)

Comparing it with a TreeList that has checkboxes in the next screenshot, you can see that the parentitem with an indeterminate state, in this case the item with the name "examples", just shows an empty checkbox.

(Screenshot was taken from one of your own examples here: https://www.telerik.com/kendo-angular-ui/components/treelist/selection/#toc-checkbox-selection-of-child-rows)

Sadly i am not able to switch to the TreeView at this point in time, due to some conflicts this would create concerning my requirements for apearance and features of the application. Thats why i have the following question for you:

Would you consider adding this feature of showing indeterminate states to the CheckboxColumnComponent that is used in the TreeList Component in the future? Or do you have any advice on how to achieve this look similar to checkboxes from the TreeView in the TreeList?

Thank you in advance and best regards

F.Jung

4 comments

Posted on: 19 Mar 2024 16:05

And then I forgot https://developer.apple.com/design/human-interface-guidelines/toggles#Checkboxes and https://m3.material.io/components/checkbox/guidelines#7b87a2d4-8a9f-4360-8eea-d4c6a646c2d1

Posted on: 19 Mar 2024 15:57

We have just run into exactly the same issue. And given that a thr(ee|i)-state is now pretty standard, compare e.g. https://material.angular.io/components/checkbox/overview or https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes, it would be nice to be able to do this without extra code.

Posted on: 19 Apr 2023 08:56

Yes, this would be a nice feature if its implemented. We are also having similar requirement.

ADMIN

Dimiter Topalov

Posted on: 19 Oct 2022 06:34

Hello Ferdinand,

Indeed, currently the TreeList CheckBox column does not support indeterminate state for the checkboxes in the same way the TreeView does. We agree that this would be a nice feature to have, and this is why I converted this support thread to a public feature request in our Feedback portal.

We will track the customer demand, and consider adding this functionality to our future roadmap based on the interest.

Meanwhile, the only solution to achieve the desired functionality with the currently available API seems to create a custom column and render checkboxes in it using the CellTemplate, then apply some custom logic for keeping the state of each checkbox, and the current selection in sync:

https://www.telerik.com/kendo-angular-ui-develop/components/treelist/columns/templates/#toc-cell-template

https://www.telerik.com/kendo-angular-ui-develop/components/treelist/selection/custom-selection/

Regards,
Dimiter Topalov
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/.