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

ClientTemplate



RadBreadcrumb supports only client templates. The templates are declared in the ClientItemTemplate 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.

When populating the client template you can also access custom attributes added to the BreadCrumb items.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Breadcrumb.ClientTemplate.DefaultCS"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</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" runat="server">
        <telerik:RadAjaxPanel runat="server">
            <telerik:RadBreadcrumb runat="server" ID="RadBreadcrumb1">
                <ClientItemTemplate>
                <li class="k-breadcrumb-item #:itemClass# #if(lastSegment){#k-breadcrumb-last-item#}#">
                #if(data.attributes){ ##: data.attributes['myattr'] ##}#
                    <a href="#:href#" 
                        class="#:linkClass# #if(type !== "rootitem"){# k-breadcrumb-link#}#
                        #if(showText && showIcon){# k-breadcrumb-icontext-link #}#
                        #if(showIcon && !showText){# k-breadcrumb-icon-link #}#
                        #if((lastSegment && type !== "rootitem")||disabled){# k-state-disabled#}#"
                        #if(lastSegment){# aria-current="page"#}# 
                        title="#:text || title#">
                        #if(showIcon) {#<span class="#if(icon){#k-icon k-i-#:icon##}# #:iconClass#"></span>#}#
                        #if(showText) {##:text##}#
                    </a>                    
                    #if(renderDelimiter) {#<span class="k-breadcrumb-delimiter-icon k-icon k-i-#:delimiterIcon#" aria-hidden="true"></span>#}#
                    #if(type === "rootitem" && renderDelimiter) {#<span class="k-breadcrumb-delimiter-icon k-hidden k-icon k-i-#:delimiterIcon#" aria-hidden="true"></span>#}#
                </li>
                </ClientItemTemplate>
                <Items>
                    <telerik:BreadcrumbItem Type="RootItem" Text="" myattr="My Custom Attribute value" />
                    <telerik:BreadcrumbItem Text="Item 1" Disabled="true" ToolTip="Hey tooltip" />
                    <telerik:BreadcrumbItem Text="Item 2" Icon="home" ShowIcon="true" />
                    <telerik:BreadcrumbItem Text="Item 3" Icon="star" ShowIcon="true" ShowText="false" />
                </Items>
            </telerik:RadBreadcrumb>

            <br />
            <br />
            <telerik:RadButton ID="Button1" runat="server" Text="Refresh Breadcrumb">
                <Icon PrimaryIconCssClass="rbRefresh"></Icon>
            </telerik:RadButton>
        </telerik:RadAjaxPanel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance