How to disable the tree view item checkbox but not the text?

[Wai Kei]

Hi Telerik,

    I have a need to disable the treeview item conditionally (which works fine with the latest build). But disabling the item will disable two things: the checkbox (if applicable) and the item text. I have a request to actually keep the text enabled while the checkbox remains to be disabled so that the user can highlight/select the item and perform some other actions. But we don't want them to check/uncheck the item.

   I guess what I need is probably a document ready function which will enable all treeview item text (again text only) after the page is ready. Checkboxes will remain disabled if it's meant to be disabled. I don't want to modify the telerik.treeview.js if at all possible since we will forget that it's a custom one and the change will get overwritten.

  So I would probably need a logic to enable the item text for the tree view items so that they can be selected.

Please help.

Thank you so much.

[Alex Gyoshev]

Hello Wai Kei,

The following jQuery code will do the trick, assuming that the items are initially disabled:

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

    $item.find('> div > .t-in')
            .addClass('t-state-default')
            .removeClass('t-state-disabled')
        .end()
        .find('> div > .t-icon')
            .toggleClass('t-plus', isCollapsed)
            .removeClass('t-plus-disabled')
            .toggleClass('t-minus', !isCollapsed)
            .removeClass('t-minus-disabled');
});

Disabling all checkboxes on the client would require much less code, though -- I highly recommend this approach if it is plausible in your scenario.

$('#TreeView1 .t-checkbox > :checkbox').attr('disabled', 'disabled');

Kind regards,
Alex Gyoshev
the Telerik team