CODEWITHSUNDEEP
kendo-uikendo-treeview
notlkk
notlkk

Reputation: 1231

Hide the Root Checkbox in a Kendo TreeView

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.

Upvotes: 3

Views: 3109

Answers (3)

Ajay2707
Ajay2707

Reputation: 5808

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>

Upvotes: 0

DinoMyte
DinoMyte

Reputation: 8868

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.

Upvotes: 0

OnaBai
OnaBai

Reputation: 40917

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/

Upvotes: 5

Related Questions