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

ClientItemTemplate

NameTitleCustomer InfoCustomer Location
Page size:
 6 items in 2 pages
    
    
    
    
    

From Q2 2012 GridTemplateColumn exposes a ClientItemTemplate property that allows the rendering of pure HTML into the column cell and the evaluation of JavaScript and data expressions.

This RadGrid demo demonstrates how you can use the binding context of the item template to populate and customize the content of the column:

  • The Title column does styling on the rendered text using a javascript call which does a check on the value and based on it, inserts a different color style.
  • The Customer Info column makes a call to a custom HTTP handler passing it the record key value. Based on it, the handler returns the source for the image element.
  • The links in the Customer Info and Customer Location columns are built using the String.format method, where you can again use the binding context of the template to populate the formatted string with a value from the data item object.

Select items in RadGrid to view additional information about the customers.

You can use "Ctrl + Mouse Click" and "Shift + Mouse Click" to select multiple items

The grid rebinds to get and show the additioanl information when selection is changed

  • DefaultCS.aspx
  • CustomersWebService.cs
  • scripts.js
<%@ Page Language="c#"  %>

<%@ 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>
    <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:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AutoGenerateColumns="false" AllowPaging="true" PageSize="5" AllowMultiRowSelection="true">
            <ClientSettings>
                <DataBinding Location="CustomersWebService.svc" SelectMethod="GetCustomers">
                </DataBinding>
                <ClientEvents OnRowSelecting="selectionChanged" OnRowDeselecting="selectionChanged" OnCommand="command"></ClientEvents>
                <Selecting AllowRowSelect="true"></Selecting>
            </ClientSettings>
            <MasterTableView ClientDataKeyNames="CustomerID" TableLayout="Fixed">
                <Columns>
                    <telerik:GridBoundColumn DataField="ContactName" UniqueName="ContactName" HeaderText="Name">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn UniqueName="TitleClientTemplateColumn" HeaderText="Title">
                        <ClientItemTemplate>
                            <span style="#=formatTitle(ContactTitle)#">#=ContactTitle #</span>
                        </ClientItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="InfoClientTemplateColumn" HeaderText="Customer Info">
                        <ClientItemTemplate>
                            <img id="customerPhoto" height="100" width="82" src="ImageHandler.ashx?custID=#=CustomerID#" alt="#=ContactName#" />
                            <br />
                            <a href="#= String.format(searchUrlFormat, ContactName) #">Search Google for <em>#=ContactName#</em></a>
                        </ClientItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="MapClientTemplateColumn" HeaderText="Customer Location">
                        <ClientItemTemplate>
                            <a href="#= String.format(mapSearchUrlFormat, Address, City) #">Find address of <em>#=ContactName#</em></a>
                            <span style="display:#=setDisplay(isSelected)#"><strong>Address:</strong> #=Address#</span>
                            <span style="display:#=setDisplay(isSelected)#"><strong>Phone:</strong> #=Phone#</span>
                        </ClientItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance