Product Bundles
DevCraft
All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Web
Mobile
Document Management
Desktop
Reporting
Testing & Mocking
CMS
UI/UX Tools
Debugging
Free Tools
Support and Learning
Productivity and Design Tools
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
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.
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.TileList.Selecting.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" /> </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>