Treeview stays grey after enabling clientside

[Didier Prévot]

Hello,

 

I just came across an issue trying to enable/disable the Treeview control

It is declared this way : 

<telerik:RadTreeView RenderMode="Classic" runat="Server" ID="trProvince" Height="350" CheckBoxes="True" TriStateCheckBoxes="true"  CheckChildNodes="true" OnClientNodeClicked="ClientNodeClicked" Enabled="False" CssClass="Province"  >

 

Next of it, there's a checkbox that allows to enable/disable it

 

Here's the JS doing that : 

function ToggleRow(sender, eventArgs) {
    var rowClass = "." + sender.get_id().substring(3);
    var isChecked = sender.get_checked();

    console.log(rowClass);
    console.log(isChecked);

    $(rowClass).each(function() {
        $(this).each(function () {
            var element = $find($(this)[0].id);

            console.log(element);
            console.log("enabled :" + element.get_enabled());

            if (isChecked) {
                element.enable && element.enable();
                element.set_enabled && element.set_enabled(true);
            } else {
                element.disable && element.disable();
                element.set_enabled && element.set_enabled(false);
            }

        });
    });
}

 

It's working as in : When checkbox is checked, I can click the checkboxes in the TreeView, expand/collapse its node but it still has a "disabled" style (greyed)

How do I get it to remove the grey layer on the control?

Thank you 

Telerik version : 2017.1.118

[Didier Prévot]

I should add : this issue happens when the control is disabled by default, I just removed the "Enabled=false" and the issue disappeared

(I can correctly toggle its state through the same JS)

[Peter Milchev]

Hello Didier,

Here is a screencast demonstrating the behavior of the following implementation, where the ТreeView is enabled/disabled in the OnClientCheckedChanged event of a CheckBox, using the set_enabled() client-side method.

<telerik:RadButton RenderMode="Lightweight" ID="RadButton10" runat="server" OnClientCheckedChanged="ToggleRow" ToggleType="CheckBox" ButtonType="ToggleButton"
    AutoPostBack="false">
    <ToggleStates>
        <telerik:RadButtonToggleState Text="Checked"></telerik:RadButtonToggleState>
        <telerik:RadButtonToggleState Text="UnChecked"></telerik:RadButtonToggleState>
    </ToggleStates>
</telerik:RadButton>
<telerik:RadTreeView RenderMode="Classic" runat="Server" ID="trProvince" Height="350" CheckBoxes="True" TriStateCheckBoxes="true"
    CheckChildNodes="true" Enabled="False" CssClass="Province">
    <Nodes>
        <telerik:RadTreeNode runat="server" Text="Island" Expanded="true" AllowDrag="false"
            AllowDrop="false">
            <Nodes>
                <telerik:RadTreeNode runat="server" Text="Zanzibar" AllowDrag="false">
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Weekend Package" AllowDrop="false" Value="1999">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="1 Week Package" AllowDrop="false" Value="2999">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="2 Week Package" AllowDrop="false" Value="3999">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode runat="server" Text="Mauritius" AllowDrag="false">
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Weekend Package" AllowDrop="false" Value="2999">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="1 Week Package" AllowDrop="false" Value="3999">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="2 Week Package" AllowDrop="false" Value="4999">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode runat="server" Text="Maldives" Expanded="true" AllowDrag="false">
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Weekend Package" AllowDrop="false" Value="3999">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="1 Week Package" AllowDrop="false" Value="4999">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="2 Week Package" AllowDrop="false" Value="5999">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeNode>
    </Nodes>
</telerik:RadTreeView>

<script>
    function ToggleRow(sender, eventArgs) {
        var treeview = $find("<%= trProvince.ClientID %>");
        treeview.set_enabled(eventArgs.get_checked());
    }
</script>

If that is not the desired behavior, would you please provide more details on the expected functionality?

Regards,
Peter Milchev
Telerik by Progress

[Didier Prévot]

It's probably a css issue as the toggling works correctly on my side : when enabled, I can click checkbox, when it's not, I cannot, but the grey overlay that is put upon controls when they're disabled does not disappear if the TreeView was set as disabled first

 

Skin used is Windows 7

Telerik version is 2017.1.118

 

You will find attached to this post a gif of the issue

[Peter Milchev]

Hello Didier,

Upgrading to the 2017 R1 SP1 or later version would resolve the problem as this issue is fixed in the 2017 R1 SP1 release.

Regards,
Peter Milchev
Telerik by Progress