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

Predefined layouts

  • Floated Tiles
  • Grid
  • Unordered List
  • Ordered List
  • Flow
  • Single Row

14
Tofu
40 - 100 g pkgs.
23.25
35

18
Carnarvon Tigers
16 kg pkg.

100

19
Teatime Chocolate Biscuits
10 boxes x 12 pieces
9.20
25

20
Sir Rodney's Marmalade
30 gift boxes
81.00
40

21
Sir Rodney's Scones
24 pkgs. x 4 pieces
10.00
3

22
Gustaf's Knäckebröd
24 - 500 g pkgs.
21.00
104

23
Tunnbröd
12 - 250 g pkgs.
9.00
61
ProductID ProductName QuantityPerUnit UnitPrice UnitsInStock
123
14 Tofu 40 - 100 g pkgs. 23.25 35
18 Carnarvon Tigers 16 kg pkg. 100
19 Teatime Chocolate Biscuits 10 boxes x 12 pieces 9.20 25
20 Sir Rodney's Marmalade 30 gift boxes 81.00 40
21 Sir Rodney's Scones 24 pkgs. x 4 pieces 10.00 3
22 Gustaf's Knäckebröd 24 - 500 g pkgs. 21.00 104
23 Tunnbröd 12 - 250 g pkgs. 9.00 61
24 Guaraná Fantástica 12 - 355 ml cans 4.50 20
25 NuNuCa Nuß-Nougat-Creme 20 - 450 g glasses 14.00 76
26 Gumbär Gummibärchen 100 - 250 g bags 31.23 15
  •  14  Tofu  40 - 100 g pkgs.  23.25  35
  •  18  Carnarvon Tigers  16 kg pkg.    100
  •  19  Teatime Chocolate Biscuits  10 boxes x 12 pieces  9.20  25
  •  20  Sir Rodney's Marmalade  30 gift boxes  81.00  40
  •  21  Sir Rodney's Scones  24 pkgs. x 4 pieces  10.00  3
  •  22  Gustaf's Knäckebröd  24 - 500 g pkgs.  21.00  104
  •  23  Tunnbröd  12 - 250 g pkgs.  9.00  61
  •  24  Guaraná Fantástica  12 - 355 ml cans  4.50  20
  •  25  NuNuCa Nuß-Nougat-Creme  20 - 450 g glasses  14.00  76
  •  26  Gumbär Gummibärchen  100 - 250 g bags  31.23  15
123
  1.  14  Tofu  40 - 100 g pkgs.  23.25  35
  2.  18  Carnarvon Tigers  16 kg pkg.    100
  3.  19  Teatime Chocolate Biscuits  10 boxes x 12 pieces  9.20  25
  4.  20  Sir Rodney's Marmalade  30 gift boxes  81.00  40
  5.  21  Sir Rodney's Scones  24 pkgs. x 4 pieces  10.00  3
  6.  22  Gustaf's Knäckebröd  24 - 500 g pkgs.  21.00  104
  7.  23  Tunnbröd  12 - 250 g pkgs.  9.00  61
  8.  24  Guaraná Fantástica  12 - 355 ml cans  4.50  20
  9.  25  NuNuCa Nuß-Nougat-Creme  20 - 450 g glasses  14.00  76
  10.  26  Gumbär Gummibärchen  100 - 250 g bags  31.23  15
123
 14  Tofu  40 - 100 g pkgs.  23.25  35
 18  Carnarvon Tigers  16 kg pkg.    100
 19  Teatime Chocolate Biscuits  10 boxes x 12 pieces  9.20  25
 20  Sir Rodney's Marmalade  30 gift boxes  81.00  40
 21  Sir Rodney's Scones  24 pkgs. x 4 pieces  10.00  3
 22  Gustaf's Knäckebröd  24 - 500 g pkgs.  21.00  104
 23  Tunnbröd  12 - 250 g pkgs.  9.00  61
 24  Guaraná Fantástica  12 - 355 ml cans  4.50  20
 25  NuNuCa Nuß-Nougat-Creme  20 - 450 g glasses  14.00  76
 26  Gumbär Gummibärchen  100 - 250 g bags  31.23  15
123
14
Tofu
40 - 100 g pkgs.
23.25
35
18
Carnarvon Tigers
16 kg pkg.

100
19
Teatime Chocolate Biscuits
10 boxes x 12 pieces
9.20
25
20
Sir Rodney's Marmalade
30 gift boxes
81.00
40
21
Sir Rodney's Scones
24 pkgs. x 4 pieces
10.00
3
22
Gustaf's Knäckebröd
24 - 500 g pkgs.
21.00
104
23
Tunnbröd
12 - 250 g pkgs.
9.00
61

RadListView gives you the opportunity to specify custom layouts and thus display your data in any preferrable way. In addition, as a greater convenience to the developer, the control offers five predefined layouts that enable you to display your data as a Grid, as an Ordered or Unordered list, in a flow or single row pattern.

In order to take advantage of this feature of RadListView's you need to use the smart tag control designer and pick the Open Layout Editor option. The designer will open a dialog window where you can choose the preferred layout, the skin that should be applied to the control as well as several other options related to operations on the data populating the ListView. After a layout has been chosen the designer will automatically generate the necessary mark-up and binding expressions.

This example demonstrates all five predefined layouts. Just go over the tab strip options to see what display pattern the given layout offers.

This demo demonstrates the predefined layouts of the RadListView control. Switch the tab options to see the different possibilities to layout your control without writing any code for this.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="VB"  AutoEventWireup="false"
    CodeFile="DefaultVB.aspx.vb" Inherits="ListView.Examples.PredefinedLayouts.DefaultVB" %>

<%@ 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 href="styles.css" rel="stylesheet" />
</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">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="ListViewPanel">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ListViewPanel" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadTabStrip RenderMode="Lightweight" runat="server" ID="LayoutsTabStrip" MultiPageID="LayoutsMultiPage"
            ShowBaseLine="true">
            <Tabs>
                <telerik:RadTab Text="Floated Tiles" Selected="true">
                </telerik:RadTab>
                <telerik:RadTab Text="Grid">
                </telerik:RadTab>
                <telerik:RadTab Text="Unordered List">
                </telerik:RadTab>
                <telerik:RadTab Text="Ordered List">
                </telerik:RadTab>
                <telerik:RadTab Text="Flow">
                </telerik:RadTab>
                <telerik:RadTab Text="Single Row">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <asp:Panel runat="server" ID="ListViewPanel" CssClass="mainPanel">
            <telerik:RadMultiPage runat="server" ID="LayoutsMultiPage">
                <telerik:RadPageView ID="RadPageView1" runat="server" Selected="true">
                    <telerik:RadListView runat="server" ID="FloatedTilesListView" RenderMode="Lightweight" AllowPaging="True"
                        DataKeyNames="ProductID" DataSourceID="SqlDataSource1">
                        <AlternatingItemTemplate>
                            <div class="rlvA productItemWrapper">
                                <br />
                                <asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
                                <br />
                                <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                                <br />
                                <asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>'></asp:Label>
                                <br />
                                <asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label>
                                <br />
                                <asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                            </div>
                        </AlternatingItemTemplate>
                        <ItemTemplate>
                            <div class="rlvI productItemWrapper">
                                <br />
                                <asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
                                <br />
                                <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                                <br />
                                <asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>'></asp:Label>
                                <br />
                                <asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label>
                                <br />
                                <asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                            </div>
                        </ItemTemplate>
                        <EmptyDataTemplate>
                            <div class="RadListView RadListView_<%# Container.Skin %>">
                                <div class="rlvEmpty">
                                    There are no items to be displayed.
                                </div>
                            </div>
                        </EmptyDataTemplate>
                        <LayoutTemplate>
                            <div class="RadListView RadListViewFloated RadListView_<%# Container.Skin %>">
                                <div class="rlvFloated rlvAutoScroll">
                                    <div id="itemPlaceholder" runat="server">
                                    </div>
                                </div>
                                <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PageSize="7">
                                    <Fields>
                                        <telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
                                    </Fields>
                                </telerik:RadDataPager>
                            </div>
                        </LayoutTemplate>
                    </telerik:RadListView>
                </telerik:RadPageView>
                <telerik:RadPageView runat="server" ID="RadPageView2">
                    <telerik:RadListView runat="server" ID="GridListView" RenderMode="Lightweight" AllowPaging="True" DataKeyNames="ProductID"
                        DataSourceID="SqlDataSource1">
                        <AlternatingItemTemplate>
                            <tr class="rlvA">
                                <td>
                                    <asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
                                </td>
                                <td>
                                    <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                                </td>
                                <td>
                                    <asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>'></asp:Label>
                                </td>
                                <td>
                                    <asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label>
                                </td>
                                <td>
                                    <asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                                </td>
                            </tr>
                        </AlternatingItemTemplate>
                        <ItemTemplate>
                            <tr class="rlvI">
                                <td>
                                    <asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
                                </td>
                                <td>
                                    <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                                </td>
                                <td>
                                    <asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>'></asp:Label>
                                </td>
                                <td>
                                    <asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label>
                                </td>
                                <td>
                                    <asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                                </td>
                            </tr>
                        </ItemTemplate>
                        <EmptyDataTemplate>
                            <div class="RadListView RadListView_<%# Container.Skin %>">
                                <div class="rlvEmpty">
                                    There are no items to be displayed.
                                </div>
                            </div>
                        </EmptyDataTemplate>
                        <LayoutTemplate>
                            <div class="RadListView RadListView_<%# Container.Skin %>">
                                <table cellspacing="0" class="gridMainTable">
                                    <thead>
                                        <tr class="rlvHeader">
                                            <th>ProductID
                                            </th>
                                            <th>ProductName
                                            </th>
                                            <th>QuantityPerUnit
                                            </th>
                                            <th>UnitPrice
                                            </th>
                                            <th>UnitsInStock
                                            </th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <td colspan="5">
                                                <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server">
                                                    <Fields>
                                                        <telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
                                                    </Fields>
                                                </telerik:RadDataPager>
                                            </td>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        <tr id="itemPlaceholder" runat="server">
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </LayoutTemplate>
                    </telerik:RadListView>
                </telerik:RadPageView>
                <telerik:RadPageView runat="server" ID="RadPageView3">
                    <telerik:RadListView runat="server" ID="UnorderedListView" RenderMode="Lightweight" AllowPaging="True" DataKeyNames="ProductID"
                        DataSourceID="SqlDataSource1">
                        <AlternatingItemTemplate>
                            <li class="rlvA">&nbsp;<asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
                                &nbsp;<asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                                &nbsp;<asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>'></asp:Label>
                                &nbsp;<asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label>
                                &nbsp;<asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                            </li>
                        </AlternatingItemTemplate>
                        <ItemTemplate>
                            <li class="rlvI">&nbsp;<asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
                                &nbsp;<asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                                &nbsp;<asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>'></asp:Label>
                                &nbsp;<asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label>
                                &nbsp;<asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                            </li>
                        </ItemTemplate>
                        <EmptyDataTemplate>
                            <div class="RadListView RadListView_<%# Container.Skin %>">
                                <div class="rlvEmpty">
                                    There are no items to be displayed.
                                </div>
                            </div>
                        </EmptyDataTemplate>
                        <LayoutTemplate>
                            <div class="RadListView RadListView_<%# Container.Skin %>">
                                <ul class="listItem">
                                    <li id="itemPlaceholder" runat="server"></li>
                                </ul>
                                <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server">
                                    <Fields>
                                        <telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
                                    </Fields>
                                </telerik:RadDataPager>
                            </div>
                        </LayoutTemplate>
                    </telerik:RadListView>
                </telerik:RadPageView>
                <telerik:RadPageView runat="server" ID="RadPageView4">
                    <telerik:RadListView runat="server" ID="OrderedListView" RenderMode="Lightweight" AllowPaging="True" DataKeyNames="ProductID"
                        DataSourceID="SqlDataSource1">
                        <AlternatingItemTemplate>
                            <li class="rlvA">&nbsp;<asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
                                &nbsp;<asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                                &nbsp;<asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>'></asp:Label>
                                &nbsp;<asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label>
                                &nbsp;<asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                            </li>
                        </AlternatingItemTemplate>
                        <ItemTemplate>
                            <li class="rlvI">&nbsp;<asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
                                &nbsp;<asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                                &nbsp;<asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>'></asp:Label>
                                &nbsp;<asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label>
                                &nbsp;<asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                            </li>
                        </ItemTemplate>
                        <EmptyDataTemplate>
                            <div class="RadListView RadListView_<%# Container.Skin %>">
                                <div class="rlvEmpty">
                                    There are no items to be displayed.
                                </div>
                            </div>
                        </EmptyDataTemplate>
                        <LayoutTemplate>
                            <div class="RadListView RadListView_<%# Container.Skin %>">
                                <ol class="listItem">
                                    <li id="itemPlaceholder" runat="server"></li>
                                </ol>
                                <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server">
                                    <Fields>
                                        <telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
                                    </Fields>
                                </telerik:RadDataPager>
                            </div>
                        </LayoutTemplate>
                    </telerik:RadListView>
                </telerik:RadPageView>
                <telerik:RadPageView runat="server" ID="RadPageView5">
                    <telerik:RadListView runat="server" ID="FlowListView" RenderMode="Lightweight" AllowPaging="True" DataKeyNames="ProductID"
                        DataSourceID="SqlDataSource1">
                        <AlternatingItemTemplate>
                            <div class="rlvA">
                                &nbsp;<asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
                                &nbsp;<asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                                &nbsp;<asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>'></asp:Label>
                                &nbsp;<asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label>
                                &nbsp;<asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                            </div>
                        </AlternatingItemTemplate>
                        <ItemTemplate>
                            <div class="rlvI">
                                &nbsp;<asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
                                &nbsp;<asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                                &nbsp;<asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>'></asp:Label>
                                &nbsp;<asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label>
                                &nbsp;<asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                            </div>
                        </ItemTemplate>
                        <EmptyDataTemplate>
                            <div class="RadListView RadListView_<%# Container.Skin %>">
                                <div class="rlvEmpty">
                                    There are no items to be displayed.
                                </div>
                            </div>
                        </EmptyDataTemplate>
                        <LayoutTemplate>
                            <div class="RadListView RadListView_<%# Container.Skin %>">
                                <div id="itemPlaceholder" runat="server">
                                </div>
                                <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server">
                                    <Fields>
                                        <telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
                                    </Fields>
                                </telerik:RadDataPager>
                            </div>
                        </LayoutTemplate>
                    </telerik:RadListView>
                </telerik:RadPageView>
                <telerik:RadPageView runat="server" ID="RadPageView6">
                    <telerik:RadListView runat="server" ID="SingleRowListView" RenderMode="Lightweight" AllowPaging="True" DataKeyNames="ProductID"
                        DataSourceID="SqlDataSource1">
                        <AlternatingItemTemplate>
                            <td class="rlvA">
                                <asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
                                <br />
                                <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                                <br />
                                <asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>'></asp:Label>
                                <br />
                                <asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label>
                                <br />
                                <asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                                <br />
                            </td>
                        </AlternatingItemTemplate>
                        <ItemTemplate>
                            <td class="rlvI">
                                <asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
                                <br />
                                <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                                <br />
                                <asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>'></asp:Label>
                                <br />
                                <asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label>
                                <br />
                                <asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                                <br />
                            </td>
                        </ItemTemplate>
                        <EmptyDataTemplate>
                            <div class="RadListView RadListView_<%# Container.Skin %>">
                                <div class="rlvEmpty">
                                    There are no items to be displayed.
                                </div>
                            </div>
                        </EmptyDataTemplate>
                        <LayoutTemplate>
                            <div class="RadListView RadListView_<%# Container.Skin %>">
                                <table cellspacing="0">
                                    <tr>
                                        <td id="itemPlaceholder" runat="server"></td>
                                    </tr>
                                </table>
                                <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PageSize="7">
                                    <Fields>
                                        <telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
                                    </Fields>
                                </telerik:RadDataPager>
                            </div>
                        </LayoutTemplate>
                    </telerik:RadListView>
                </telerik:RadPageView>
            </telerik:RadMultiPage>
        </asp:Panel>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT top 30 [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice], [UnitsInStock] FROM [Products]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance