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

Image for disabled node

4 Answers 80 Views

TreeView

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

4 Answers, 1 is accepted

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>

<html xmlns='http://www.w3.org/1999/xhtml'>

<head>

<title>title</title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<telerik:RadSkinManager ID="RadSkinManager1" runat="server" />

<div >

<telerik:RadTreeView ID="RadTreeView1" runat="server" RenderMode="Lightweight" CheckChildNodes="true" CheckBoxes="true" ShowLineImages="false"

OnClientNodeChecking="onClientNodeChecking" />

</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 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 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>

</Tree>

Accepted

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.