Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

Grid / ListView/DataList View

Customer IDCompany NameContact NameContact TitleCityCountry
12345678910...
Page size:
select
 91 items in 16 pages
CustomerID: ALFKI
CompanyName: Alfreds Futterkiste
ContactName: Maria Anders
ContactTitle: Sales Representative
City: Berlin
Country: Germany
CustomerID: ANATR
CompanyName: Ana Trujillo Emparedados y helados
ContactName: Ana Trujillo
ContactTitle: Owner
City: México D.F.
Country: Mexico
CustomerID: ANTON
CompanyName: Antonio Moreno Taquería
ContactName: Antonio Moreno
ContactTitle: Owner
City: México D.F.
Country: Mexico
CustomerID: AROUT
CompanyName: Around the Horn
ContactName: Thomas Hardy
ContactTitle: Sales Representative
City: London
Country: UK
CustomerID: BERGS
CompanyName: Berglunds snabbköp
ContactName: Christina Berglund
ContactTitle: Order Administrator
City: Luleå
Country: Sweden
CustomerID: BLAUS
CompanyName: Blauer See Delikatessen
ContactName: Hanna Moos
ContactTitle: Sales Representative
City: Mannheim
Country: Germany

  • This example shows how to use the global item template feature of RadGrid for ASP.NET AJAX to create ListView/DataList like data presentation. This is useful when you would like to display the data in the control in a custom layout format (simulating ListView/DataList functionality) and still keep the sorting/paging/filtering features over the source records.

    To attain the items appearance in the demo we used asp Panel with custom css class applied for even/odd rows as well as hover effects. The panel is encapsulated inside a table with a single row which hosts a single table cell. The template is repeated horizontally and the sorting/paging/filtering actions are processed with ajax requests using RadAjaxManager to ajaxify the grid control.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="VB" AutoEventWireup="false" Inherits="Telerik.GridExamplesVBNET.Programming.ListView.DefaultVB"
        CodeFile="DefaultVB.aspx.vb" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!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">
        <telerik:HeadTag runat="server" ID="Headtag2"></telerik:HeadTag>
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
            <telerik:Header runat="server" ID="Header1" NavigationLanguage="VB"></telerik:Header>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <!-- content start -->
            <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" AllowFilteringByColumn="true"
                runat="server" GridLines="None" AllowPaging="true" AllowSorting="true" OnPreRender="RadGrid1_PreRender"
                PageSize="6">
                <PagerStyle Mode="NextPrevAndNumeric" />
                <MasterTableView TableLayout="Fixed">
                    <ItemTemplate>
                        <%#IIf(Not CType(Container, GridItem).ItemIndex = 0, "</td></tr></table>", "")%>
                        <asp:Panel ID="ItemContainer" CssClass='<%# IIf(CType(Container, GridItem).ItemType = GridItemType.Item, "item", "alternatingItem") %>'
                            runat="server">
                            <b>CustomerID:</b>
                            <%# Eval("CustomerID")%>
                            <br />
                            <b>CompanyName:</b>
                            <%# Eval("CompanyName")%>
                            <br />
                            <b>ContactName:</b>
                            <%# Eval("ContactName")%>
                            <br />
                            <b>ContactTitle:</b>
                            <%# Eval("ContactTitle")%>
                            <br />
                            <b>City:</b>
                            <%# Eval("City")%>
                            <br />
                            <b>Country:</b>
                            <%# Eval("Country")%>
                        </asp:Panel>
                    </ItemTemplate>
                </MasterTableView>
                <GroupingSettings CaseSensitive="false" />
            </telerik:RadGrid>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                SelectCommand="SELECT CustomerID, CompanyName, ContactName, ContactTitle, City, Country FROM Customers">
            </asp:SqlDataSource>
            <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451