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

Declarative DataSource

Roland Mendel
Lino Rodriguez
José Pedro Freyre
Annette Roulet
Fran Wilson
Georg Pipps
Michael Holz
Hari Kumar
Art Braunschweiger
Palle Ibsen
Paula Parente
Pedro Afonso
André Fonseca
Patricia McKenna
Philip Cramer
Simon Crowther
Maurizio Moroni
Helvetius Nagy
Patricio Simpson
Ann Devon
Catherine Dewey
Yvonne Moncada
Mary Saveley
Maria Anders
Thomas Hardy
Hanna Moos
Victoria Ashworth
Elizabeth Brown
Paolo Accorti
Carlos Hernández
Yoshi Latimer
Daniel Tonini
Renate Messner
Rene Phillips
Guillermo Fernández
Isabel de Castro
Sergio Gutiérrez
Jose Pavarotti
Anabela Domingues
Rita Müller

RadTileList can be databound to various server datasources, including SqlDatasource, LinqDataSource and object lists. It requires an IEnumerable collection.

The inner tag DataBindings tag offers the properties that control databinding. It offers inner tags that expose either common or specific properties:

  • CommonTileBinding: the main options that affect all tiles like the field names for the common properties all tiles have and fallback properties for the tile type, shape and target
  • ContentTemplateTileBinding: properties specific to the RadContentTemplateTile. Its ContentTemplate template can be defined in its inner ContentTemplate tag
  • IconTileBinding: properties specific to the RadIconTile
  • ImageAndTextTileBinding: properties specific to the RadImageAndTextTile
  • ImageTileBinding: properties specific to the RadImageTile
  • LiveTileBinding: propertiess specific to the RadLiveTile. Its ClientTemplate template can be defined in its inner ClientTemplate tag
  • TextTileBinding: properties specific to the RadTextTile
  • TilePeekTemplate: The PeekTemplate template can be defined there

If tiles are already present in the control declaration (or in the code-behind) the AppendDataBoundItems property will control whether they will be removed prior to databinding, or they will remain in the control.

Groups are created according to the values of the DataGroupNameField field in the database. The first time a new group name is encountered a new group is created for it. If this value matches a group already defined in the control, the group will be reused. This allows the developer to predefine the order of the groups regardless of the datasource.

Both of these features are shown in the demo: the order of the groups is defined in the markup of the control and one tile in each group is used to show information about the certain group.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • Styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.TileList.DataBinding.ServerSideBinding.DeclarativeDataSource.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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>
    <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" />
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient"
        SelectCommand="SELECT [CustomerID], [ContactTitle], [ContactName], [Phone], [Fax], [City], [Country] FROM [Customers]
            WHERE ContactTitle like 'Sales%'"></asp:SqlDataSource>
    <div class="demo-container no-bg">
        <div class="directoryHeader"></div>
        <telerik:RadTileList RenderMode="Lightweight" runat="server" DataSourceID="SqlDataSource1" ID="RadTileList1" AppendDataBoundItems="true"
            TileRows="4" OnTileDataBound="RadTileList1_OnTileDataBound" OnTileCreated="RadTileList1_OnTileCreated">
            <DataBindings>
                <CommonTileBinding TileType="RadImageAndTextTile" Shape="Square" DataGroupNameField="ContactTitle" />
                <ImageAndTextTileBinding DataTextField="ContactName" />
                <TilePeekTemplate>
                    <div class="peekTemplateClass">
                        <strong>Phone:</strong>
                        <%#DataBinder.Eval(Container.DataItem, "Phone")%>
                        <br />
                        <strong>Fax:</strong>
                        <%#DataBinder.Eval(Container.DataItem, "Fax")%>
                        <br />
                        <strong>City:</strong>
                        <%#DataBinder.Eval(Container.DataItem, "City")%>
                        <br />
                        <strong>Country:</strong>
                        <%#DataBinder.Eval(Container.DataItem, "Country")%>
                    </div>
                </TilePeekTemplate>
            </DataBindings>
            <Groups>
                <telerik:TileGroup Name="Sales Manager">
                </telerik:TileGroup>
                <telerik:TileGroup Name="Sales Associate">
                </telerik:TileGroup>
                <telerik:TileGroup Name="Sales Agent">
                </telerik:TileGroup>
                <telerik:TileGroup Name="Sales Representative">
                </telerik:TileGroup>
            </Groups>
        </telerik:RadTileList>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance