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

Custom layouts

Nigiri Sushi

握り寿司

Hand-formed sushi

Futo Maki Sushi

太巻き寿司

Fat rolls sushi

Oshi Sushi

押し寿司

Pressed sushi

Inari Sushi

稲荷寿司

Stuffed sushi

Page 1 of 3

With RadListView, you can layout your data any way you like. Defining your custom layouts enables you to display data in various business scenarios, making your data both efficient to go through and pleasing the eye.

The example demonstrates a RadListView ordering your data in a tiled set of panels in horizontal direction. Including a RadDataPager in your LayoutTemplate automatically enables paging in your RadListView. The example demonstrates how the SelectedItemTemplate can be used to apply a distinctive style to your selected items, and even completely change their layout.

  • DefaultVB.aspx
  • styles.css
<%@ 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>

Support & Learning Resources

Find Assistance