This is a migrated thread and some comments may be shown as answers.

Treeview stays grey after enabling clientside

4 Answers 74 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Didier Prévot
Top achievements
Rank 2
Didier Prévot asked on 02 May 2017, 08:10 AM

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

4 Answers, 1 is accepted

Sort by
0
Didier Prévot
Top achievements
Rank 2
answered on 02 May 2017, 08:19 AM

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)

0
Peter Milchev
Telerik team
answered on 05 May 2017, 10:14 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Didier Prévot
Top achievements
Rank 2
answered on 12 May 2017, 08:59 AM

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

0
Peter Milchev
Telerik team
answered on 17 May 2017, 08:21 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
TreeView
Asked by
Didier Prévot
Top achievements
Rank 2
Answers by
Didier Prévot
Top achievements
Rank 2
Peter Milchev
Telerik team
Share this question
or