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

    Declarative DataSource

    Sales Manager
    Roland Mendel
    Lino Rodriguez
    José Pedro Freyre
    Annette Roulet
    Fran Wilson
    Georg Pipps
    Michael Holz
    Hari Kumar
    Art Braunschweiger
    Palle Ibsen
    Paula Parente
     
    Sales Associate
    Pedro Afonso
    André Fonseca
    Patricia McKenna
    Philip Cramer
    Simon Crowther
    Maurizio Moroni
    Helvetius Nagy
     
    Sales Agent
    Patricio Simpson
    Ann Devon
    Catherine Dewey
    Yvonne Moncada
    Mary Saveley
     
    Sales Representative
    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