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

    Binding to Telerik ClientDataSource

    • Products
    • Company

    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.

    • DefaultVB.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