Style Kendo TreeView Checkboxes as Switches?

[Ryan]

Is there a way to have switches instead of checkboxes (same look as the kendoSwitch control) in a TreeView as seen in the example below?



I am dynamically converting the checkboxes after the treeview initializes using a function that basically does this 

$('input[type="checkbox"]:not([data-role="switch"])').kendoSwitch()

but it seems to have a lot of quirks that we have had to work around. Does the newest version of Kendo support switches in a TreeView out of the box?

[Nikolay]

Hi Ryan,

There is no built-in option for this, however, it can be achieved with checkboxes.template. For example:

      $("#treeview").kendoTreeView({
        template: '<input class="switch" type="checkbox" />',
        dataSource: [
          { text: "foo", inStock: 7, items: [
            { text: "bar", inStock: 2 },
            { text: "baz", inStock: 5 }
          ] }
        ]
      });
      $(".switch").kendoSwitch()

Dojo demo: https://dojo.telerik.com/EtasOLAK

I hope this helps.

Regards,
Nikolay
Progress Telerik