<%@ Page Language="C#" %>
<%@ 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 rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<div class="demo-container no-bg">
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="SushiPanel">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="SushiPanel" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Black">
</telerik:RadAjaxLoadingPanel>
<telerik:RadListView ID="RadListView1" runat="server" RenderMode="Lightweight" DataSourceID="SqlDataSource2"
ItemPlaceholderID="PlaceHolder1" AllowPaging="true">
<LayoutTemplate>
<div class="sushibar">
<asp:Panel ID="SushiPanel" runat="server">
<div class="sushi">
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</div>
<telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PageSize="4" Skin="Black">
<Fields>
<telerik:RadDataPagerSliderField></telerik:RadDataPagerSliderField>
</Fields>
</telerik:RadDataPager>
</asp:Panel>
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="category">
<h3>
<%#Eval("EnglishName") %>
</h3>
<asp:ImageButton ID="SushiImage" runat="server" AlternateText='<%# Eval("EnglishName") %>'
Width="120px" CommandName="Select" ImageUrl='<%# String.Format("~/ListView/Examples/AppearanceStyling/CustomLayouts/images/{0}.jpg", Eval("ItemID").ToString()) %>'></asp:ImageButton>
<p>
<%#Eval("OriginalName") %>
</p>
<p>
<%#Eval("Description") %>
</p>
</div>
</ItemTemplate>
<SelectedItemTemplate>
<div class="selected">
<h3>
<%#Eval("EnglishName") %>
</h3>
<asp:Image ID="SushiImage" runat="server" AlternateText='<%# Eval("EnglishName") %>'
Width="140px" ImageUrl='<%# String.Format("~/ListView/Examples/AppearanceStyling/CustomLayouts/images/{0}.jpg", Eval("ItemID").ToString()) %>'></asp:Image>
<p>
<%#Eval("OriginalName") %>
</p>
<p>
<%#Eval("Description") %>
</p>
</div>
</SelectedItemTemplate>
</telerik:RadListView>
<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [CategoryID], [CategoryName], [Description], [Picture] FROM [Categories]"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
SelectCommand="SELECT [ItemID], [OriginalName], [EnglishName], [Description] FROM [SushiMenu]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>