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

Image for disabled node

4 Answers 11 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 07 Nov 2016, 06:35 PM

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

4 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 08 Nov 2016, 08:52 AM
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.
0
David
Top achievements
Rank 1
answered on 08 Nov 2016, 08:10 PM

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>
0
Accepted
Magdalena
Telerik team
answered on 11 Nov 2016, 09:50 AM
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 a rule for opacity as the 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.
0
David
Top achievements
Rank 1
answered on 05 Dec 2016, 03:41 PM

Hello Magdalena,

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

Dave

Tags
TreeView
Asked by
David
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
David
Top achievements
Rank 1
Share this question
or