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

Client-side Templates

RadNavigation now supports client templates when it is bound to ClientDataSource. 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 items loaded from the ClientDataSource. To apply different client template to an item, you can use the onClientTemplateDataBound() event where you can pass a different HTML for the template:

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • Styles.css
<%@ Page Title="" Language="VB"  AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Navigation_Functionality_Server_side_Templates_Item_Templates_DefaultVB" %>

<!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>
    <link rel="stylesheet" type="text/css" href="Styles.css" />
</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" OnClientTemplateDataBound="onClientTemplateDataBound"
                ClientDataSourceID="RadClientDataSource1" DataTextField="Name" DataFieldID="ID"
                DataFieldParentID="ParentID">
                <ClientNodeTemplate>
                    <span class="imgWrap">
                    <img alt="#= Text #" src="Images/#= Text #.png" />
                    </span>
                    <span class="templateText">#= Text #</span>
                </ClientNodeTemplate>
            </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