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

    Client Templates

    Customers
    •  Howard Snyder
      • Howard Snyder
      • Marketing Manager
      • Eugene
    •  Mario Pontes
      • Mario Pontes
      • Accounting Manager
      • Rio de Janeiro
    •  Philip Cramer
      • Philip Cramer
      • Sales Associate
      • Brandenburg
    •  Daniel Tonini
      • Daniel Tonini
      • Sales Representative
      • Versailles
    •  Annette Roulet
      • Annette Roulet
      • Sales Manager
      • Toulouse
    •  Yoshi Tannamuri
      • Yoshi Tannamuri
      • Marketing Assistant
      • Vancouver
    •  John Steel
      • John Steel
      • Marketing Manager
      • Walla Walla
    •  Renate Messner
      • Renate Messner
      • Sales Representative
      • Frankfurt a.M.
    •  Jaime Yorres
      • Jaime Yorres
      • Owner
      • San Francisco
    •  Carlos González
      • Carlos González
      • Accounting Manager
      • Barquisimeto
    •  Felipe Izquierdo
      • Felipe Izquierdo
      • Owner
      • I. de Margarita
    •  Fran Wilson
      • Fran Wilson
      • Sales Manager
      • Portland
    •  Giovanni Rovelli
      • Giovanni Rovelli
      • Marketing Manager
      • Bergamo
    •  Catherine Dewey
      • Catherine Dewey
      • Sales Agent
      • Bruxelles
    •  Jean Fresnière
      • Jean Fresnière
      • Marketing Assistant
      • Montréal
    •  Alexander Feuer
      • Alexander Feuer
      • Marketing Assistant
      • Leipzig
    •  Simon Crowther
      • Simon Crowther
      • Sales Associate
      • London
    •  Yvonne Moncada
      • Yvonne Moncada
      • Sales Agent
      • Buenos Aires
    •  Rene Phillips
      • Rene Phillips
      • Sales Representative
      • Anchorage
    •  Henriette Pfalzheim
      • Henriette Pfalzheim
      • Owner
      • Köln
    •  Marie Bertrand
      • Marie Bertrand
      • Owner
      • Paris
    •  Guillermo Fernández
      • Guillermo Fernández
      • Sales Representative
      • México D.F.
    •  Georg Pipps
      • Georg Pipps
      • Sales Manager
      • Salzburg
    •  Isabel de Castro
      • Isabel de Castro
      • Sales Representative
      • Lisboa
    •  Bernardo Batista
      • Bernardo Batista
      • Accounting Manager
      • Rio de Janeiro
    •  Lúcia Carvalho
      • Lúcia Carvalho
      • Marketing Assistant
      • Sao Paulo
    •  Horst Kloss
      • Horst Kloss
      • Accounting Manager
      • Cunewalde
    •  Sergio Gutiérrez
      • Sergio Gutiérrez
      • Sales Representative
      • Buenos Aires
    •  Paula Wilson
      • Paula Wilson
      • Assistant Sales Representative
      • Albuquerque
    •  Maurizio Moroni
      • Maurizio Moroni
      • Sales Associate
      • Reggio Emilia
    •  Janete Limeira
      • Janete Limeira
      • Assistant Sales Agent
      • Rio de Janeiro

    RadListBox now supports 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.

    The templates are applied automatically to all items loaded through web service. To apply a client template to an arbitrary item, you have to call the bindTemplate() function on that item:

    function addItem(itemText) {
    	var item = new Telerik.Web.UI.RadListBoxItem();
    	var list = $find('<%=RadListBox1.ClientID%>');
    	item.set_text(itemText);
    	list.get_items().add(item);
    	item.bindTemplate();
    }
    

    You can also define a specific template to individual items on the client:

    function setTemplate(item) {
    	item.set_clientTemplate("Item Text: #= Text #");
    	item.bindTemplate();
    }
    
    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • styles.css
    <%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ListBox.Examples.Functionality.ClientTemplates.DefaultCS"ResponseEncoding="UTF-8" Language="c#"  %>
     
    <!DOCTYPE html>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <link href="styles.css" rel="stylesheet" type="text/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 size-thin">
            <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBox1" Width="300" Height="400" Skin="Telerik">
                <HeaderTemplate>Customers</HeaderTemplate>
                <ClientItemTemplate>
                    <div class="imageWrap">
                        <img src="#= Attributes.ImageUrl # " alt=" #= Text # " style="height:80px;width:65px;" />
                    </div>
                    <div class="panelWrap">
                        <ul class="personDetails">
                            <li class="contactName">#= Text #</li>
                            <li class="title">#= Attributes.ContactTitle #</li>
                            <li class="city">#= Attributes.City #</li>
                        </ul>
                    </div>
                </ClientItemTemplate>
                <WebServiceSettings Method="GetCustomers" Path="defaultcs.aspx" />
            </telerik:RadListBox>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance