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

Client-side Binding

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

RadNavigation 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 node.
  • DataFieldParentID—defines the data source field name which will be associated with the parent ID of the node.
  • DataText—defines the data source field name which will be shown as a text of the node.
  • DataNavigateUrlField—defines the data source field name which will be considered as a navigate URL of the node.

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

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Navigation_Functionality_Client_side_Templates_Item_Templates_DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <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" />
    <div class="demo-container no-bg">
        <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
        </telerik:RadClientDataSource>
        <div class="demo-container size-narrow">
            <telerik:RadNavigation ID="RadNavigation1" runat="server"
                ClientDataSourceID="RadClientDataSource1" DataTextField="Name" DataFieldID="ID"
                DataFieldParentID="ParentID">
            </telerik:RadNavigation>
        </div>
        <script type="text/javascript">

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

                setData(clientDataSource);
            });
        </script>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance