New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Web Service Binding and Client Templates

Select a category:

  • Politics
  • Sports
  • Events
RadDropDownTree now supports web service binding (WCF and ASMX) and client templates. The DataBindings settings give you the ability to set expand mode on a particular node level. The templates are declared in the ClientNodeTemplate tag and support the following expressions for evaluating code:
  • #= ... # - Data - Evaluates the Javascript code expression or a string property from the data item and outputs the result in the template.
  • # ... # - Code - Evaluates the JavaScript code expression inside. Does not output value.
  • #: ... # - HTML-encode - Same as the data expression, but HTML-encodes the result.
The templates are applied automatically to all nodes loaded through web service.
  • DefaultCS.aspx
  • DropDownTreeWebService.cs
<%@ Page Inherits="Telerik.QuickStart.QsfPage"  %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
     <div class="demo-container size-thin">
       <h2>Select a category:</h2>
        <telerik:RadDropDownTree RenderMode="Lightweight" ID="RadDropDownTree1" runat="server" DataSourceID="EntityDataSource1"
            DataTextField="Text" DataValueField="id" Width="300px">
            <ClientNodeTemplate>
                    <div>
                       <img alt="#= Text #" style="vertical-align: middle;width:20px" src="images/#= Text #.jpg" />
                       <span style="vertical-align: middle;">#= Text #</span>
                    </div>
            </ClientNodeTemplate>
            <DropDownSettings Height="260px" Width="300px" />
            <DataBindings>
                <telerik:DropDownNodeBinding Depth="0" ExpandMode="WebService" />
            </DataBindings>
            <WebServiceSettings Path="DropDownTreeWebService.svc" Method="LoadData"></WebServiceSettings>
        </telerik:RadDropDownTree>
    </div>
    <asp:EntityDataSource runat="server" ID="EntityDataSource1" ConnectionString="name=TelerikReadOnlyEntities"
        DefaultContainerName="TelerikReadOnlyEntities" EntitySetName="Links" Where="it.[parentId] IS NULL">
    </asp:EntityDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance