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

Binding to Telerik ClientDataSource

good food
All

You can data bind RadTileList on the client to a RadClientDataSource control since Q2 2014. This functionality is provided out of the box through the server-side ClientDataSourceID property which also has its client-side counterpart - the set_clientDataSourceID() method.

Client-side data binding means fewer postbacks, easier integration with various data services and a more flexible client-side development.

You can use the DataBindings inner property to control the relation between the data item and the created tiles' properties, just like when using server-side data binding. You can set the tile type, group, the peek template, or in the case of RadContentTemplateTile the content template of the created tiles.

If tiles are already present in the Tile List the AppendClientDataBoundItems property controls whether they will be removed prior to data binding.

There are five client-side events raised in the binding process.

  • tilePeekTemplateDataBound is raised after the peek template set in the DataBindings.ClientTilePeekTemplate property is bound to the data item.
  • tileContentTemplateDataBound is raised after the content template set in the DataBindings.ContentTemplateTileBinding.ClientContentTemplate property is bound to the data item
  • tileCreating is raised before a tile is created. This event is useful for canceling the tile creation and modifying the object which is passed as a properties argument to the $create method.
  • tileDataBound is raised after a tile is created, but before it is appended to a certain group. Here the new tile can be further configured or the index of the group to which it will be added can be changed.
  • tileListDataBound is raised after the data binding process is over.

In this demo you can see how the RadTileList is bound to a RadClientDataSource and you can filter it through the Filter food by category dropdown. This operation is performed on the client and does not require a postback or a call to the service. You can use the Hide foods starting with input to prevent tile creation for certain data items.

In the simplest setup, you only need to provide an array of JSON literals to the RadTileList and define the corresponding data source field names in the DataBindings inner property. You can find examples and read more details in the following article:

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.TileList.DataBinding.ClientSideBinding.ClientDataSourceBinding.DefaultVB"  %>

<!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" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
        <ClientEvents OnDataRequested="telerikDemo.OnDataRequested" />
        <DataSource>
            <WebServiceDataSourceSettings ServiceType="OData">
                <Select Url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products" DataType="JSONP" />
            </WebServiceDataSourceSettings>
        </DataSource>
    </telerik:RadClientDataSource>
    <div class="demo-container no-bg">
        <div class="filtersHeader">
            <img src="images/good-food.png" alt="good food" />
            <div class="filtersContainer">
                <div class="filterRow">
                    <asp:Label ID="lblFilterByCategory" CssClass="filtersLabel" Text="Filter foods by category " AssociatedControlID="FoodCategory" runat="server" />
                    <telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="FoodCategory" Width="150px" Skin="Glow" OnClientItemSelected="telerikDemo.FoodCategoryChange">
                        <Items>
                            <telerik:DropDownListItem Text="All" Value="0" Selected="true" />
                            <telerik:DropDownListItem Text="Beverages" Value="1" />
                            <telerik:DropDownListItem Text="Condiments" Value="2" />
                            <telerik:DropDownListItem Text="Confections" Value="3" />
                            <telerik:DropDownListItem Text="Dairy Products" Value="4" />
                            <telerik:DropDownListItem Text="Grains/Cereals" Value="5" />
                            <telerik:DropDownListItem Text="Meat/Poultry" Value="6" />
                            <telerik:DropDownListItem Text="Produce" Value="7" />
                            <telerik:DropDownListItem Text="Seafood" Value="8" />
                        </Items>
                    </telerik:RadDropDownList>
                </div>
                <div class="filterRow">
                    <asp:Label ID="lblFilterByName" CssClass="filtersLabel" Text="Hide foods starting with " AssociatedControlID="HideFoodNameTextBox" runat="server" />
                    <telerik:RadTextBox RenderMode="Lightweight" ID="HideFoodNameTextBox" Text="Guara" Skin="Glow" runat="server" ClientEvents-OnValueChanged="telerikDemo.HideFoodNameTextBoxChanged"></telerik:RadTextBox>
                </div>
            </div>
        </div>
        <telerik:RadTileList RenderMode="Lightweight" runat="server" Skin="Glow" BackColor="#DEE0C8" SelectionMode="Single" ID="RadTileList1" Height="500px"
            ClientDataSourceID="RadClientDataSource1"
            OnClientTilePeekTemplateDataBound="telerikDemo.OnClientTilePeekTemplateDataBound"
            OnClientTileCreating="telerikDemo.OnClientTileCreating"
            OnClientTileDataBound="telerikDemo.OnClientTileDataBound">
            <DataBindings>
                <CommonTileBinding DataNameField="ProductName" DataGroupNameField="CategoryID" DataBadgeValueField="UnitsInStock" TileType="RadImageTile" />
                <ClientTilePeekTemplate>
                        <div class="peekTemplateContainer" >
                            <h3>#=ProductName#</h3>
                            <div class="peekTemplateTags">
                                Price: $#=UnitPrice#<br />
                            </div>
                        </div>
                </ClientTilePeekTemplate>
            </DataBindings>
        </telerik:RadTileList>
    </div>
    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
        <script type="text/javascript">
            Sys.Application.add_load(function() {
                telerikDemo.clientDataSource = $find('<%= RadClientDataSource1.ClientID%>');
                telerikDemo.tileList = $find('<%= RadTileList1.ClientID%>');
                telerikDemo.hideFoodNameTextBox = $find('<%= HideFoodNameTextBox.ClientID%>');
            });
        </script>
    </telerik:RadCodeBlock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance