Telerik Web UI DropDownTree Image Preview Demo

About this demo
C#
VB
Download demo code files
Isolate this demo as a stand-alone application

Choose a car model and review it on the right side. The embedded tree nodes are expanded on a single click.

Here is a description of the RadDropDownTree features that are used in the demo:

By setting the Checkable property of the DropDownTreeNode to false, the checkbox will not be rendered.
Client-side clear method of the entries collection removes all of the entries and resets the state of the embeddedTree.

<%@ Page AutoEventWireup="false" CodeFile="DefaultCS.aspx.cs" Inherits="DropDownTree.Examples.ApplicationScenarios.ImageReview.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<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" />
    <script src="scripts.js" type="text/javascript"></script>
    <script type="text/javascript">
        //<![CDATA[
        Sys.Application.add_load(function () {
            demo.imagePlaceHolder = document.getElementById("image-placeholder");
        });
        //]]>
    </script>
    <div class="demo-container no-bg size-wide">
        <div class="qsf-demo-canvas">
            <telerik:RadDropDownTree RenderMode="Lightweight" ID="RadDropDownTree1" runat="server" CssClass="cars-dropdown" Width="210px"
                DefaultMessage="Please select a car" CheckBoxes="SingleCheck" DataValueField="Value"
                FullPathDelimiter=" -> " TextMode="FullPath" ExpandNodeOnSingleClick="true" CheckNodeOnClick="true"
                OnClientEntryAdding="OnClientEntryAdding" OnClientEntryAdded="OnClientEntryAdded" OnClientEntryRemoved="OnClientEntryRemoved"
                DataFieldID="ID" DataTextField="Text" DataFieldParentID="ParentID">
                <DropDownSettings AutoWidth="Disabled" Height="210px" />
            </telerik:RadDropDownTree>
            <div id="image-placeholder"></div>
        </div>
    </div>
    <telerik:RadScriptBlock runat="server">
    </telerik:RadScriptBlock>
    </form>
</body>
</html>

Image Preview

Support & Learning Resources

Find Assistance