[Solved] Show treeview checkbox but disable it?

[Wai Kei]

Hi Telerik Support and other members,

    I am trying to display the treeview with a list of nodes showing the checkbox (.ShowCheckBox(true)). Currently the checkbox of each node is binded to a property of the tree node whichs drives whether the checkbox is checked or not. It works fine.

    But now I am trying to disable the checkbox if the user does not have privilege to check/uncheck the checkboxes. I found that I am not able to do it at the binding level as the .Disabled property would only disable the node display name but not the checkbox.

    Is there any other way to do it?

Thanks.

<% Html.Telerik().TreeView()

.Name(

 

"TreeView")

 

.ShowCheckBox(

 

true)

 

.ExpandAll(

 

true)

 

.BindTo(Model, mappings =>

{

mappings.For<

 

Code>(

 

binding => binding.ItemDataBound((item, code) => { item.Checked = code.PhaseId.HasValue; item.Text = code.CodeName +

 

" (" + code.CodeNumber + ")"; item.Value = code.CodeId.ToString(); })

 

.Children(code => code.ChildCodes));

mappings.For<

 

Code>(binding => binding.ItemDataBound((item, code) => { item.Text = code.CodeName; }));

 

})

.Render(); %>

[Alex Gyoshev]

Hello Wai Kei,

Thank you for reporting this problem -- we fixed it for the upcoming release. The fix consists in the following (treeview.toggle client-side method):

    $(li, this.element).each($.proxy(function (index, item) {
        var $item = $(item),
            isCollapsed = !$item.find('> .t-group, > .t-content').is(':visible');

        this.collapse($item);

        $item.find('> div > .t-in')
                .toggleClass('t-state-default', enable)
                .toggleClass('t-state-disabled', !enable)
             .end()
             .find('> div > .t-checkbox > :checkbox')
                .attr('disabled', enable ? '' : 'disabled')
             .end()
             .find('> div > .t-icon')
                .toggleClass('t-plus', isCollapsed && enable)
                .toggleClass('t-plus-disabled', isCollapsed && !enable)
                .toggleClass('t-minus', !isCollapsed && enable)
                .toggleClass('t-minus-disabled', !isCollapsed && !enable);

    }, this));

Kind regards,
Alex Gyoshev
the Telerik team