Image for disabled node

5 posts, 1 answers
  1. David
    David avatar
    3 posts
    Member since:
    Nov 2013

    Posted 07 Nov Link to this post

    Hi,

    We have a requirement to always show the checkbox even if the node is disabled. We can achieve the functionality in JavaScript by handling and then canceling the event, but need a visual representation too. We've tried overriding the background image of the checkbox without success. Is there a way to do this? We are using version 2013.3.1234.35.

    Thanks,

    Dave

  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 08 Nov Link to this post

    Hello David,

    RadTreeView has implemented JavaScript API for disabling an item. This will remove all JavaScript events from that item and will change also its appearance.
    var treeView = $find("RadTreeView1");
    var node = treeView.findNodeByValue("valueOfTheItem");
     
    node.set_enabled(false)

    Do not hesitate to contact us if you have other questions.


    Regards,
    Magdalena
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David
    David avatar
    3 posts
    Member since:
    Nov 2013

    Posted 08 Nov Link to this post

    Hello Magdalena,

    Thanks for the quick response. This is almost what we are looking for except we would like to keep the expand behavior of the node and still allow any child node to be selected. Here's a very abridged version of how our app is put together. Ideally, we would like each "Desktop" node to appear uncheckable but still keep its ability to be expand and allow it children to be selected.

    Dave

    <%@ Page AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="RadTreeViewApp.Default"Language="c#"  %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <script type="text/javascript">
        function onClientNodeChecking(sender, eventArgs) {
            var node = eventArgs.get_node();
            if (node.get_attributes().getAttribute("checkable") == "false") {
                eventArgs.set_cancel(true);
                return;
            }
        }
    </script>
     
    <head>
        <title>title</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
            <telerik:RadSkinManager ID="RadSkinManager1" runat="server" />
            <div >
                <div >
                    <telerik:RadTreeView ID="RadTreeView1" runat="server" RenderMode="Lightweight" CheckChildNodes="true" CheckBoxes="true" ShowLineImages="false"
                     OnClientNodeChecking="onClientNodeChecking" />
                </div>
            </div>
        </form>
    </body>
    </html>

     

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using Telerik.Web.UI;
    using System.Drawing;
     
    namespace RadTreeViewApp
    {
        public partial class Default : System.Web.UI.Page
        {
            DataSet _dataSet = new DataSet();
     
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    LoadData();
                    BuildTree();
                }
            }
            void LoadData()
            {
                _dataSet.ReadXml(Server.MapPath("TreeView.xml"));
            }
            void BuildTree()
            {
                DataRow[] drTopItem = _dataSet.Tables[0].Select("TopLevel='Y'", "", DataViewRowState.CurrentRows);
                foreach (DataRow row in drTopItem)
                {
                    RadTreeNode node = new RadTreeNode(row["Text"].ToString(), row["Value"].ToString());
                    node.Attributes.Add("checkable", "false");
                    AddChildNodes(node);
                    RadTreeView1.Nodes.Add(node);
                }
            }
            void AddChildNodes(RadTreeNode node)
            {
                DataRow[] drChildItem = _dataSet.Tables[0].Select("ParentId='" + node.Value + "'", "", DataViewRowState.CurrentRows);
                foreach (DataRow row in drChildItem)
                {
                    RadTreeNode newNode = new RadTreeNode(row["Text"].ToString(), row["Value"].ToString());
                    node.Nodes.Add(newNode);
                    AddChildNodes(newNode);
                }
            }
        }
    }

     

    <?xml version="1.0" encoding="utf-8" ?>
    <Tree>
      <Node Text="Desktop1" TopLevel="Y" Value="10">
        <Node Text="Administrator1" Value="11" ParentId="10" >
          <Node Text="AppData1" Value="12" ParentId="11"/>
          <Node Text="Contacts1" Value="13" ParentId="11" />
        </Node>
        <Node Text="Computer1" Value="14" ParentId="10">
          <Node Text="WebServer1" Value="15" ParentId="14" />
          <Node Text="Local Disk1" Value="16" ParentId="14" />
        </Node>
      </Node>
      <Node Text="Desktop2" TopLevel="Y" Value="20">
        <Node Text="Administrator2" Value="21" ParentId="20" >
          <Node Text="AppData2" Value="22" ParentId="21"/>
          <Node Text="Contacts2" Value="23" ParentId="21" />
        </Node>
        <Node Text="Computer2" Value="24" ParentId="20">
          <Node Text="WebServer2" Value="25" ParentId="24" />
          <Node Text="Local Disk2" Value="26" ParentId="24" />
        </Node>
      </Node>
      <Node Text="Desktop3" TopLevel="Y" Value="30">
        <Node Text="Administrator3" Value="31" ParentId="30" >
          <Node Text="AppData3" Value="32" ParentId="31"/>
          <Node Text="Contacts3" Value="33" ParentId="31" />
        </Node>
        <Node Text="Computer3" Value="34" ParentId="30">
          <Node Text="WebServer3" Value="35" ParentId="34" />
          <Node Text="Local Disk3" Value="36" ParentId="34" />
        </Node>
      </Node>
    </Tree>
  5. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 11 Nov Link to this post

    Hi David,

    Thank you for the provided resources.

    You can add a CSS class to nodes that you would like have disabled checkbox. After that you can use this CSS class in a CSS selector for applying rule for opacity as following:

    JavaScript
    function onClientNodeChecking(sender, eventArgs) {
        var node = eventArgs.get_node();
        if (isNodeCheckboxDisabled(node)) {
            eventArgs.set_cancel(true);
            return;
        }
    }
     
    function isNodeCheckboxDisabled(node) {
        return node.get_attributes().getAttribute("checkable") == "false";
    }
     
    function pageLoad() {
        var treeView = $find("RadTreeView1");
        var nodes = treeView.get_allNodes();
        var node;
     
        for (var i = 0; i < nodes.length; i++) {
            node = nodes[i];
     
            if (isNodeCheckboxDisabled(node)) {
                $telerik.$(node.get_checkBoxElement()).addClass("disabledChck")
            }
        }
    }


    CSS
    .disabledChck {
        opacity: 0.5;
    }

    Do not hesitate to contact us if you have other questions.


    Regards,
    Magdalena
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  6. David
    David avatar
    3 posts
    Member since:
    Nov 2013

    Posted 5 hours ago in reply to Magdalena Link to this post

    Hello Magdalena,

    Thank you for the suggestion, we were able to use this approach and still satisfy the requirement.

    Dave

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017