TileList - Selecting

$31.00
$6.00
$62.50
$25.89
$19.00
$26.00
$18.40
$9.65
$9.50
$12.00
$13.25
$15.00
BasketCheckout

Demo Configurator

Change SelectionMode On The Server


Change SelectionMode On The Client


Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Tiles in a RadTileList controls can be selected by using the right mouse button or by holding down the tile and dragging it a little downward or upward, like in Windows 8.

A selected tile shows an indicator in its top-right corner.

The SelectionMode property controls this behavior - depending on its value selection can be disabled, many items can be selected at once, or only a single item can be selected. The type of the property is Telerik.Web.UI.TileListSelectionMode, both on the server and on the client, and the possible values in the enum are None, Single, Multiple.

Like in Windows 8, use the right mouse button to select a tile or hold down the tile and drag it a little downward or upward. A selected tile shows an indicator in its top right corner.

When a product is selected it will be added to the basket with the data obtained from the tile list.

By default, the TileList performs selection on the client, and you can have it postback on each selection by toggling the "AutoPostBack on selection" checkbox.

Disabling or enabling automatic postbacks clears the basket, so you can use the client-side or server-side API of the control to perform the same task.

Use the RadioButton Lists to choose the selection mode of the control.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.TileList.Selecting.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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" />
    <script src="scripts.js" type="text/javascript"></script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTileList1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="basketContents" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadTileList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="basketContents" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient"
        SelectCommand="SELECT TOP(12)
                        [ProductID],
                        [ProductName],
                        ('$' + CAST([UnitPrice] as VARCHAR(15))) As UnitPrice ,
                        ('../../images/Square/' + CAST([ProductID] as VARCHAR(15)) + '.jpg') As ImageUrl
                    FROM
                        [Products]
                    WHERE
                        ([CategoryID] = @CategoryID)">
        <SelectParameters>
            <asp:Parameter DefaultValue="8" Name="CategoryID" Type="Int32"></asp:Parameter>
        </SelectParameters>
    </asp:SqlDataSource>
    <div class="demo-containers">
        <div class="demo-container no-bg">
            <div class="qsf-ib tileListHolder">
                <div class="foodStoreBanner"></div>
                <telerik:RadTileList RenderMode="Lightweight" runat="server" DataSourceID="SqlDataSource1" ID="RadTileList1" Width="634px" TileRows="3"
                    EnableDragAndDrop="true"
                    OnTileDataBound="RadTileList1_TileDataBound"
                    ScrollingMode="None"
                    SelectionMode="Multiple" AutoPostBack="false" OnSelectionChanged="RadTileList1_SelectionChanged"
                    OnClientLoad="tileListClientLoad"
                    OnClientTileClicking="preventRandomClicks" OnClientTileSelected="fillBasket">
                    <DataBindings>
                        <CommonTileBinding TileType="RadImageTile" DataTitleTextField="UnitPrice" DataNameField="ProductName" />
                        <ImageTileBinding DataImageUrlField="ImageUrl" />
                        <TilePeekTemplate>
                            <div class="productNamePeek"><%# DataBinder.Eval(Container.DataItem,"ProductName") %></div>
                        </TilePeekTemplate>
                    </DataBindings>
                </telerik:RadTileList>
            </div>
            <div class="basket">
                <div class="basketHeader">Basket<span class="checkoutButton">Checkout</span></div>
                <div class="basketContent" runat="server" id="basketContents">
                </div>
            </div>
        </div>
    </div>
    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow" Title="Change SelectionMode On The Server">
                    <ul class="fb-group">
                        <li>
                            <qsf:RadioButtonList ID="RadiobuttonlistServerSettings" runat="server" OnSelectedIndexChanged="RadiobuttonlistServerSettings_SelectedIndexChanged"
                                CssClass="serverConfig" AutoPostBack="true">
                                <asp:ListItem Text="None" Value="1" />
                                <asp:ListItem Text="Single" Value="2" />
                                <asp:ListItem Text="Multiple" Value="4" Selected="True" />
                            </qsf:RadioButtonList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow" Title="Change SelectionMode On The Client">
                    <ul class="fb-group">
                        <li>
                            <qsf:RadioButtonList ID="RadiobuttonlistClientSettings" runat="server" CssClass="clientConfig">
                                <asp:ListItem Text="None" Value="1" />
                                <asp:ListItem Text="Single" Value="2" />
                                <asp:ListItem Text="Multiple" Value="4" Selected="true" />
                            </qsf:RadioButtonList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckboxAutoPostBack" Text="AutoPostback on Selection" AutoPostBack="true" Checked="false" OnCheckedChanged="CheckboxAutoPostBack_CheckedChanged" runat="server" />
                            </span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?