New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Binding to RadClientDataSource

This article demonstrates how to bind RadDropDownTree to RadClientDataSource.

Since Q2 2014 RadDropDownTree can be bound to a RadClientDataSource control. An important aspect of binding to the RadClientDataSource is that the RadDropDownTree DataText and DataValue, DataFieldID, DataFieldParentID and DataNavigateUrlField field should be associated with the custom object properties. Thus you can choose which property value to be shown as RadDropDownTree item text and value. For reference at the bottom of the service implementation below you will find the custom class and its properties declaration.

The code snippet below shows sample configuration of RadDropDownTree bound to RadClientDataSource. The peculiarity of such scenario comes from the fact that the RadDropDownTree represents hierarchical data. Considering that fact we expect such type of data to be returned by the service to the RadClientDataSource.

Initially the RadDropDownTree control requests only the root items data from the RadClientDataSource. In the example below it will check for all items data that have ParentID property value to null.

ASPNET
<telerik:RadClientDataSource runat="server" ID="CD1">
    <ClientEvents />
    <DataSource>
        <WebServiceDataSourceSettings BaseUrl="http://url/Service.svc/">
            <Select Url="LoadCustomSelfReferencingData" DataType="JSON" RequestType="Post" ContentType="application/json; charset=utf-8" />
        </WebServiceDataSourceSettings>
    </DataSource>

    <Schema DataName="d">
    </Schema>
    <ClientEvents />
</telerik:RadClientDataSource>

<telerik:RadDropDownTree RenderMode="Lightweight" ID="RadDropDownTree1" runat="server" ClientDataSourceID="CD1" 
       DataFieldParentID="ParentID" DataFieldID="ID" DataTextField="Name" DataValueField="Value"></telerik:RadDropDownTree>
C#
[OperationContract]
public SelfReferencingData[] LoadCustomSelfReferencingData()
{
    var list = new List<SelfReferencingData>();

    list.Add(new SelfReferencingData() { Name = "Cars", Value = "11", ParentID = null, ID = "1" });
    list.Add(new SelfReferencingData() { Name = "Ford", Value = "22", ParentID = "1", ID = "2" });
    list.Add(new SelfReferencingData() { Name = "Mustang 1", Value = "33", ParentID = "2", ID = "3" });
    list.Add(new SelfReferencingData() { Name = "Mustang 2", Value = "44", ParentID = "2", ID = "4" });

    list.Add(new SelfReferencingData() { Name = "Bikes", Value = "55", ParentID = null, ID = "5" });
    list.Add(new SelfReferencingData() { Name = "Cross", Value = "66", ParentID = "5", ID = "6" });
    list.Add(new SelfReferencingData() { Name = "Mon 1", Value = "77", ParentID = "6", ID = "7" });
    list.Add(new SelfReferencingData() { Name = "Mon 2", Value = "88", ParentID = "6", ID = "8" });

    return list.ToArray();
}

public class SelfReferencingData
{
    public string Name { get; set; }
    public string Value { get; set; }
    public string ID { get; set; }
    public string ParentID { get; set; }
    //public string NavigateURL { get; set; }
}
Not finding the help you need?
Contact Support