TreeView - Validating Selection

Pending Orders

Process Orders
  • Aniseed Syrup
    • OrderID: 10289, Quantity: 30, Unit Price: 8.00
    • OrderID: 10405, Quantity: 50, Unit Price: 8.00
    • OrderID: 10485, Quantity: 20, Unit Price: 8.00
    • OrderID: 10540, Quantity: 60, Unit Price: 10.00
    • OrderID: 10591, Quantity: 14, Unit Price: 10.00
    • OrderID: 10702, Quantity: 6, Unit Price: 10.00
    • OrderID: 10742, Quantity: 20, Unit Price: 10.00
    • OrderID: 10764, Quantity: 20, Unit Price: 10.00
    • OrderID: 10849, Quantity: 49, Unit Price: 10.00
    • OrderID: 10857, Quantity: 30, Unit Price: 10.00
    • OrderID: 11017, Quantity: 25, Unit Price: 10.00
    • OrderID: 11077, Quantity: 4, Unit Price: 10.00
  • Chocolade
    • OrderID: 10403, Quantity: 70, Unit Price: 10.20
    • OrderID: 10453, Quantity: 15, Unit Price: 10.20
    • OrderID: 10507, Quantity: 15, Unit Price: 12.75
    • OrderID: 10604, Quantity: 6, Unit Price: 12.75
    • OrderID: 10704, Quantity: 24, Unit Price: 12.75
    • OrderID: 10814, Quantity: 8, Unit Price: 12.75
 

Processed Orders

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
This example demonstrates RadTreeView's validation support. By using a RequiredFieldValidator control you can verify that your users have selected a tree node:
<telerik:RadTreeView runat="server" ID="RadTreeView1">
  <Nodes>
    <telerik:RadTreeNode Text="Node 1">
      <Nodes>
         <telerik:RadTreeNode Text="Node 1.1" />
         <telerik:RadTreeNode Text="Node 1.2" />
      </Nodes>
    </telerik:RadTreeNode>
  </Nodes>
</telerik:RadTreeNode>

<asp:RequiredFieldValidator runat="server" 
 ID="RequiredFieldValidator1" 
 ControlToValidate="RadTreeView1"
 ErrorMessage="Please select a node" 
/>
RadTreeView can also can trigger validation. You can use the ValidationGroup property to specify the validation group that should be triggered.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TreeView.Examples.Functionality.Validating.DefaultCS"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">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager runat="Server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="PendingOrdersPanel"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="ProcessedOrdersPanel" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxLoadingPanel>
    <div class="demo-container">
        <asp:Image ID="Image1" ImageUrl="images/header.png" CssClass="header" runat="server" />
        <div class="pending-orders orders">
            <p class="heading">Pending Orders</p>
            <asp:LinkButton runat="server" ID="Button1" CssClass="process" OnClick="Button1_Click"
                Text="Process Orders"></asp:LinkButton>
            <asp:Panel runat="server" ID="PendingOrdersPanel">
                <telerik:RadTreeView RenderMode="Lightweight" runat="server" ID="RadTreeView1" MultipleSelect="true" OnClientNodeClicked="onNodeClick" 
                    Height="250px">
                    <Nodes>
                        <telerik:RadTreeNode Text="Aniseed Syrup" Value="3" Category="Product">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Chocolade" Value="48" Category="Product">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeView>
                <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="RadTreeView1"
                    ErrorMessage="<span class='validationMsg'>Please select a product or an order</span>"
                    EnableClientScript="true"></asp:RequiredFieldValidator>
            </asp:Panel>
        </div>
        <div class="processed-orderers orders">
            <p class="heading">Processed Orders</p>
            <asp:Panel runat="server" ID="ProcessedOrdersPanel">
                <telerik:RadGrid RenderMode="Lightweight" runat="server" ID="RadGrid1" AutoGenerateColumns="False" AllowPaging="true"
                    OnNeedDataSource="RadGrid1_NeedDataSource" PageSize="5" Visible="false">
                    <PagerStyle Mode="NextPrev"></PagerStyle>
                    <MasterTableView>
                        <Columns>
                            <telerik:GridBoundColumn DataField="Value" HeaderText="OrderID">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
            </asp:Panel>
        </div>
    </div>
    <script type="text/javascript">
        /* <![CDATA[ */
        function onNodeClick(sender, args) {
            var node = args.get_node();
            if (node.get_category() == "Product") {
                var childNodes = node.get_nodes();

                for (var i = 0; i < childNodes.get_count() ; i++) {
                    var childNode = childNodes.getNode(i);
                    childNode.select();
                }
            }
        }
        /* ]]> */
    </script>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?