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

Binding to Telerik ClientDataSource

Since Q2 2014 the RadMenu can be bound to RadClientDataSource control. This functionality is provided out of the box through the server-side ClientDataSourceID property.

RadMenu needs the following properties in order to load its items properly:

  • DataFieldID—defines the data source field name which will be associated with the unique identifier of the item.
  • DataFieldParentID—defines the data source field name which will be associated with the parent ID of the item.
  • DataText—defines the data source field name which will be shown as a text of the item.
  • DataValue—defines the data source field name which will be considered as a value of the item.
  • DataNavigateUrlField—defines the data source field name which will be considered as a navigate URL of the item.

Note: The client data source control is populated with demo data when fetch command is triggered.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page  %>

<!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" />
    <script type="text/javascript" src="scripts.js"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
    </telerik:RadClientDataSource>

    <div class="demo-container size-thin">
        <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" PersistLoadOnDemandItems="false"
            ClientDataSourceID="RadClientDataSource1" DataTextField="Name" DataValueField="Value" DataFieldID="ID"
            DataFieldParentID="ParentID">
        </telerik:RadMenu>
    </div>
    <script type="text/javascript">

        Sys.Application.add_load(function() {
            var clientDataSource = $find('<%=RadClientDataSource1.ClientID%>');

            setData(clientDataSource);
        });

    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance