Treeview stays grey after enabling clientside

5 posts, 0 answers
  1. Didier Prévot
    Didier Prévot avatar
    9 posts
    Member since:
    May 2010

    Posted 02 May 2017 Link to this post

    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

  2.
  3. Didier Prévot
    Didier Prévot avatar
    9 posts
    Member since:
    May 2010

    Posted 02 May 2017 in reply to Didier Prévot Link to this post

    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)

  5. Peter Milchev
    Admin
    Peter Milchev avatar
    467 posts

    Posted 05 May 2017 Link to this post

    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.
  7. Didier Prévot
    Didier Prévot avatar
    9 posts
    Member since:
    May 2010

    Posted 12 May 2017 Link to this post

    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

  8.
  9. Peter Milchev
    Admin
    Peter Milchev avatar
    467 posts

    Posted 17 May 2017 Link to this post

    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.
Back to Top