3

I know you can use checkbox template to control its look-and-feel but how would I hide the checkbox for the root node (and only the root node)?

UPDATE

The answer below does the trick as well. However, I ended up using a template like this:

checkboxes: {
    checkChildren: true,
    template: "# if(item.Id != 1){# <input type='checkbox'  name='section[#= item.Id #]' value='true' />#} #"
}

"Id" is the id field in my dataSource.

3 Answers 3

5

This might do the trick but it is dirty, it's much nicer defining a template:

$("#treeview").kendoTreeView({
    ...
    checkboxes: true,
    dataBound : function () {
        $("#treeview > ul > li > div span.k-checkbox").hide();
    }
});

See it running here: http://jsfiddle.net/OnaBai/b3UBh/1/

1
  • 1
    note that this only works with local databinding. Other way is to hide nodes in css. Commented Jun 23, 2015 at 15:19
0

Try assigning a class name by using HTMLAttributes

.HtmlAttributes(new { @class = "hideHeaderCheckbox" })

Then do something like this during document.ready

$("#idofyourtreeView .hideHeaderCheckbox").each(function () {
            $(this).find("div .k-checkbox input").eq(0).hide();
        });

Hope that helps.

0

Answer found from this article of Telerik : https://www.telerik.com/forums/hide-treeview-checkboxes-on-parent-nodes

From the reference:

The easiest approach is to hide checkboxes in root items with CSS:

<TelerikTreeView Class="root-checkboxes" />

<style>
    .root-checkboxes > ul > li > div:first-child .k-checkbox-wrapper > .k-checkbox {
        display: none;
    }
</style>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.