ListView

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadListView - Telerik's ASP.NET ListView

Configurator

Editable RadListView with tiled layout

Customers
Page size:
select
Page: of 46
1 to 2 of 91
Company name: ewr
Name: rwer
Title: rwer
City: rewr
Country: werwe
Phone: rwerwer
Contact Photo
Company name: Ana Trujillo Emparedados y helados
Name: Ana Trujillo
Title: Owner
City: México D.F.
Country: Mexico
Phone: (5) 555-4729
Contact Photo
select

Grouped RadListView

Select a category to view its description
Categories group
Category Photo
Beverages
Category Photo
Condiments
Category Photo
Confections
Categories group
Category Photo
Dairy Products
Category Photo
Grains/Cereals
No Category to display
 
Description

tlrk.it/1dJ5NSQ To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/1dJ5NSQ

About RadListView for ASP.NET AJAX

Telerik RadListView is designed to give you the freedom to specify predefined or customized type of layout for the items displayed in the control and in the same time gives you integrated sorting, paging, grouping, editing, selecting, etc. capabilities. You can embed various controls of your choice in RadListView's templates and model their appearance in a custom manner. Thanks to its innovative architecture Telerik RadListView is extremely fast and generates very little output.

RadListView and 80+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

About This Demo

This demo illustrates RadListView control with RadDataPager for paging navigation. Automatic datasource operations within the RadListView control are also enabled. In order to enable the execution of the automatic operations, one needs to properly define the Insert/Update/Delete parameters of the datasources. Other than this, the functionality is automatically handled, without the need to write any custom code.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular ListView demo, you can use the following path to find it in the sample website application:
listview/examples/overview

Key Features

  • Various templates for data and layout presentation.
  • Set of commonly used predefined layouts and unlimited possibilities for custom layouts definitions.
  • Codeless DataBinding using the DataSourceControls introduced in ASP.NET 2.x/3.5.
  • Data-Binding to various data sources which implement the IEnumerable, IList or ICustomTypeDescriptor interfaces.
  • Easily customizable skinning mechanism (setting single Skin property of the ListView).
  • Integrated sorting, paging, selecting, edit or insert operations and grouping capabilities.

Resources

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

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/ListView/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!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">
    <title>ASP.NET ListView control Tutorial | RadListView Demos</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="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <div>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="ListViewPanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ListViewPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadListView2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="lblDescription" LoadingPanelID="RadAjaxLoadingPanel1">
                        </telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="RadListView2" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBoxList1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="CheckBoxList1"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="ListViewPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
            <ClientEvents OnRequestStart="RequestStart"></ClientEvents>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function RequestStart(sender, eventArgs)
                {
                    //disable ajax on update/insert operation to upload the image
                    if ((eventArgs.get_eventTarget().indexOf("Update") > -1) || (eventArgs.get_eventTarget().indexOf("PerformInsert") > -1))
                    {
                        eventArgs.set_enableAjax(false);
                    }
                }
            </script>
        </telerik:RadCodeBlock>
        <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configurator"
            Expanded="false">
            <label for="CheckBoxList1">
                Use check boxes bellow to customize the RadDataPager control</label>
            <asp:CheckBoxList runat="server" ID="CheckBoxList1" AutoPostBack="true" RepeatColumns="2"
                RepeatDirection="Vertical" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged"
                RepeatLayout="Table" CellSpacing="10">
                <asp:ListItem Value="1" Text="FirstPrev button fields" Selected="True"></asp:ListItem>
                <asp:ListItem Value="2" Text="Numeric button fields" Selected="True"></asp:ListItem>
                <asp:ListItem Value="3" Text="NextLast button fields" Selected="True"></asp:ListItem>
                <asp:ListItem Value="4" Text="Page size field" Selected="True"></asp:ListItem>
                <asp:ListItem Value="5" Text="Go-to-page field" Selected="True"></asp:ListItem>
                <asp:ListItem Value="6" Text="Template field" Selected="True"></asp:ListItem>
            </asp:CheckBoxList>
        </qsf:ConfiguratorPanel>
        <table>
            <tr>
                <td>
                    <h3>
                        Editable RadListView with tiled layout</h3>
                    <asp:Panel ID="ListViewPanel1" runat="server">
                        <telerik:RadListView ID="RadListView1" DataSourceID="SqlDataSource1" runat="server"
                            ItemPlaceholderID="CustomersContainer" DataKeyNames="CustomerID" AllowPaging="true"
                            OnItemCommand="RadListView1_ItemCommand">
                            <LayoutTemplate>
                                <!-- Set the id of the wrapping container to match the CLIENT ID of the RadListView control to display the ajax loading panel
                         In case the listview is embedded in another server control, you will need to append the id of that server control -->
                                <fieldset id="FiledSet1" style="max-width: 946px;">
                                    <legend>Customers</legend>
                                    <table cellpadding="0" cellspacing="0" width="100%">
                                        <tr>
                                            <td>
                                                <telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
                                                    PageSize="2" CssClass="pagerStyle">
                                                    <Fields>
                                                        <telerik:RadDataPagerButtonField FieldType="FirstPrev"></telerik:RadDataPagerButtonField>
                                                        <telerik:RadDataPagerButtonField FieldType="Numeric" PageButtonCount="6"></telerik:RadDataPagerButtonField>
                                                        <telerik:RadDataPagerButtonField FieldType="NextLast"></telerik:RadDataPagerButtonField>
                                                        <telerik:RadDataPagerPageSizeField PageSizeComboWidth="60" PageSizeText="Page size: ">
                                                        </telerik:RadDataPagerPageSizeField>
                                                        <telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go"
                                                            TextBoxWidth="25"></telerik:RadDataPagerGoToPageField>
                                                        <telerik:RadDataPagerTemplatePageField>
                                                            <PagerTemplate>
                                                                <div style="float: right; padding-left: 50px;">
                                                                    <b>
                                                                        <asp:Label runat="server" ID="CurrentPageLabel" Text="<%# IIF((Container.Owner.TotalRowCount > 0), Container.Owner.StartRowIndex + 1, 0)%>"></asp:Label>
                                                                        to
                                                                        <asp:Label runat="server" ID="TotalPagesLabel" Text="<%# IIF((Container.Owner.TotalRowCount > 0), Container.Owner.StartRowIndex + Container.Owner.PageSize, 0) %>"></asp:Label>
                                                                        of
                                                                        <asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>"></asp:Label>
                                                                    </b>
                                                                </div>
                                                            </PagerTemplate>
                                                        </telerik:RadDataPagerTemplatePageField>
                                                    </Fields>
                                                </telerik:RadDataPager>
                                            </td>
                                        </tr>
                                    </table>
                                    <asp:PlaceHolder ID="CustomersContainer" runat="server"></asp:PlaceHolder>
                                    <div style="clear: both">
                                    </div>
                                    <table style="width: 100%; margin-top: 5px;">
                                        <tr>
                                            <td style="width: 25%;">
                                                <asp:Button ID="btnInitInsert" runat="server" Text="Insert Customer" OnClick="btnInitInsert_Click">
                                                </asp:Button>
                                            </td>
                                            <td style="text-align: right; width: 75%;">
                                                <asp:Label ID="lblSort1" runat="server" AssociatedControlID="ddListSort" Text="Sort by:"
                                                    Style="padding-right: 5px;"></asp:Label>
                                                <telerik:RadComboBox ID="ddListSort" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddListSort_SelectedIndexChanged">
                                                    <Items>
                                                        <telerik:RadComboBoxItem Text="-Select field to sort-" Value=""></telerik:RadComboBoxItem>
                                                        <telerik:RadComboBoxItem Text="Company name" Value="CompanyName"></telerik:RadComboBoxItem>
                                                        <telerik:RadComboBoxItem Text="Contact name" Value="ContactName"></telerik:RadComboBoxItem>
                                                        <telerik:RadComboBoxItem Text="Title" Value="ContactTitle"></telerik:RadComboBoxItem>
                                                        <telerik:RadComboBoxItem Text="City" Value="City"></telerik:RadComboBoxItem>
                                                        <telerik:RadComboBoxItem Text="Country" Value="Country"></telerik:RadComboBoxItem>
                                                        <telerik:RadComboBoxItem Text="Clear sort" Value="ClearSort"></telerik:RadComboBoxItem>
                                                    </Items>
                                                </telerik:RadComboBox>
                                                <asp:RadioButtonList RepeatLayout="Flow" RepeatDirection="Horizontal" ID="rblSort"
                                                    runat="server" AutoPostBack="true" OnSelectedIndexChanged="rblSort_SelectedIndexChanged">
                                                    <asp:ListItem Text="Ascending" Value="ASC" Selected="True"></asp:ListItem>
                                                    <asp:ListItem Text="Descending" Value="DESC"></asp:ListItem>
                                                </asp:RadioButtonList>
                                            </td>
                                        </tr>
                                    </table>
                                </fieldset>
                            </LayoutTemplate>
                            <ItemTemplate>
                                <!--The widths/heights of the fieldset/outer tables in the item/edit/insert templates should match to avoid wrapping or visual discrepancies
                             in the tiles layout-->
                                <fieldset class="fieldset">
                                    <legend>Company name:
                                        <%# Eval("CompanyName") %></legend>
                                    <table cellpadding="0" cellspacing="0" style="height: 100%;" width="100%">
                                        <tr>
                                            <td>
                                                <table cellpadding="0" cellspacing="0" style="width: 95%;">
                                                    <tr>
                                                        <td>
                                                            <table cellpadding="0" cellspacing="0">
                                                                <tr>
                                                                    <td style="width: 25%">
                                                                        Name:
                                                                    </td>
                                                                    <td style="width: 50%">
                                                                        <%#Eval("ContactName")%>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        Title:
                                                                    </td>
                                                                    <td>
                                                                        <%#Eval("ContactTitle")%>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        City:
                                                                    </td>
                                                                    <td>
                                                                        <%# Eval("City")%>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        Country:
                                                                    </td>
                                                                    <td>
                                                                        <%# Eval("Country")%>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        Phone:
                                                                    </td>
                                                                    <td>
                                                                        <%#Eval("Phone")%>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                        <td align="right" style="width: 30%; padding-left: 10px;">
                                                            <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AlternateText="Contact Photo"
                                                                ToolTip="Contact Photo" Width="90px" Height="110px" ResizeMode="Fit" DataValue='<%# IIf(Eval("Photo") IsNot DBNull.Value, Eval("Photo"),New System.Byte(-1) {})%>'>
                                                            </telerik:RadBinaryImage>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <table style="width: 95%; margin-top: 30px">
                                                    <tr>
                                                        <td>
                                                            <asp:Button ID="btnEdit" runat="server" Text="Edit" CommandName="Edit" Width="70px">
                                                            </asp:Button>
                                                        </td>
                                                        <td style="text-align: right">
                                                            <asp:Button ID="btnDelete" runat="server" Text="Delete" CommandName="Delete" Width="70px">
                                                            </asp:Button>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </fieldset>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <!--The widths/heights of the fieldset/outer tables in the item/edit/insert templates should match to avoid wrapping or visual discrepancies
                             in the tiles layout-->
                                <fieldset class="fieldset">
                                    <legend>Company name:
                                        <asp:TextBox ID="txtBoxCompanyName" runat="server" Text='<%#Bind("CompanyName")%>'></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rvCompanyName" runat="server" ControlToValidate="txtBoxCompanyName"
                                            ErrorMessage="Please enter company name" Display="Dynamic"></asp:RequiredFieldValidator>
                                    </legend>
                                    <table cellpadding="0" cellspacing="0" style="height: 80%;" width="100%">
                                        <tr>
                                            <td>
                                                <table cellpadding="0" cellspacing="0" style="width: 95%; margin-bottom: 5px">
                                                    <tr>
                                                        <td>
                                                            <table cellpadding="0" cellspacing="2">
                                                                <tr>
                                                                    <td style="width: 25%">
                                                                        Name:
                                                                    </td>
                                                                    <td style="width: 75%">
                                                                        <asp:TextBox ID="txtBoxName" runat="server" Text='<%#Bind("ContactName")%>'></asp:TextBox>
                                                                        <asp:RequiredFieldValidator ID="rvName" runat="server" ControlToValidate="txtBoxName"
                                                                            ErrorMessage="Please enter name" Display="Dynamic"></asp:RequiredFieldValidator>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        Title:
                                                                    </td>
                                                                    <td>
                                                                        <asp:TextBox ID="txtBoxTitle" runat="server" Text='<%#Bind("ContactTitle")%>'></asp:TextBox>
                                                                        <asp:RequiredFieldValidator ID="rvTitle" runat="server" ControlToValidate="txtBoxTitle"
                                                                            ErrorMessage="Please enter title" Display="Dynamic"></asp:RequiredFieldValidator>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        City:
                                                                    </td>
                                                                    <td>
                                                                        <asp:TextBox ID="txtBoxCity" runat="server" Text='<%#Bind("City")%>'></asp:TextBox>
                                                                        <asp:RequiredFieldValidator ID="rvCity" runat="server" ControlToValidate="txtBoxCity"
                                                                            ErrorMessage="Please enter city" Display="Dynamic"></asp:RequiredFieldValidator>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        Country:
                                                                    </td>
                                                                    <td>
                                                                        <asp:TextBox ID="txtBoxCountry" runat="server" Text='<%#Bind("Country")%>'></asp:TextBox>
                                                                        <asp:RequiredFieldValidator ID="rvCountry" runat="server" ControlToValidate="txtBoxCountry"
                                                                            ErrorMessage="Please enter country" Display="Dynamic"></asp:RequiredFieldValidator>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        Phone:
                                                                    </td>
                                                                    <td>
                                                                        <asp:TextBox ID="txtBoxPhone" runat="server" Text='<%#Bind("Phone")%>'></asp:TextBox>
                                                                        <asp:RequiredFieldValidator ID="rvPhone" runat="server" ControlToValidate="txtBoxPhone"
                                                                            ErrorMessage="Please enter phone" Display="Dynamic"></asp:RequiredFieldValidator>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                        <td align="right" style="width: 25%; padding-left: 10px;">
                                                            <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AlternateText="Contact Photo"
                                                                ToolTip="Contact Photo" Width="90px" Height="110px" ResizeMode="Fit" DataValue='<%# IIf(Eval("Photo") IsNot DBNull.Value, Eval("Photo"),New System.Byte(-1) {})%>'>
                                                            </telerik:RadBinaryImage>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <div style="float: left; width: 238px;">
                                                    <telerik:RadUpload ID="ruCustomerImage" runat="server" AllowedFileExtensions=".jpg,.jpeg,.gif,.png"
                                                        MaxFileSize="1000000" ControlObjectsVisibility="None" InputSize="12" Width="160px"
                                                        CssClass="radUploadStyle">
                                                    </telerik:RadUpload>
                                                </div>
                                                <div style="clear: both">
                                                </div>
                                                <div style="float: left; padding-left: 30%;">
                                                    <asp:Button ID="btnUpdate" runat="server" Text="Update" CommandName="Update"></asp:Button>
                                                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" CommandName="Cancel" CausesValidation="false">
                                                    </asp:Button>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </fieldset>
                            </EditItemTemplate>
                            <InsertItemTemplate>
                                <!--The widths/heights of the fieldset/outer tables in the item/edit/insert templates should match to avoid wrapping or visual discrepancies
                             in the tiles layout-->
                                <fieldset class="fieldset" style="clear: left; width: 540px">
                                    <legend>Company name:
                                        <asp:TextBox ID="txtBoxCompanyName" runat="server" Text='<%# Bind("CompanyName") %>'></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rvCompanyName" runat="server" ControlToValidate="txtBoxCompanyName"
                                            ErrorMessage="Please enter company name" Display="Dynamic"></asp:RequiredFieldValidator>
                                    </legend>
                                    <table cellpadding="0" cellspacing="0" style="height: 80%;" width="100%">
                                        <tr>
                                            <td>
                                                <table cellpadding="0" cellspacing="5" style="width: 95%; margin-bottom: 5px">
                                                    <tr>
                                                        <td style="width: 25%">
                                                            Name:
                                                        </td>
                                                        <td style="width: 75%">
                                                            <asp:TextBox ID="txtBoxName" runat="server" Text='<%# Bind("ContactName") %>'></asp:TextBox>
                                                            <asp:RequiredFieldValidator ID="rvName" runat="server" ControlToValidate="txtBoxName"
                                                                ErrorMessage="Please enter name" Display="Dynamic"></asp:RequiredFieldValidator>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            Title:
                                                        </td>
                                                        <td>
                                                            <asp:TextBox ID="txtBoxTitle" runat="server" Text='<%# Bind("ContactTitle") %>'></asp:TextBox>
                                                            <asp:RequiredFieldValidator ID="rvTitle" runat="server" ControlToValidate="txtBoxTitle"
                                                                ErrorMessage="Please enter title" Display="Dynamic"></asp:RequiredFieldValidator>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            City:
                                                        </td>
                                                        <td>
                                                            <asp:TextBox ID="txtBoxCity" runat="server" Text='<%# Bind("City") %>'></asp:TextBox>
                                                            <asp:RequiredFieldValidator ID="rvCity" runat="server" ControlToValidate="txtBoxCity"
                                                                ErrorMessage="Please enter city" Display="Dynamic"></asp:RequiredFieldValidator>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            Country:
                                                        </td>
                                                        <td>
                                                            <asp:TextBox ID="txtBoxCountry" runat="server" Text='<%# Bind("Country") %>'></asp:TextBox>
                                                            <asp:RequiredFieldValidator ID="rvCountry" runat="server" ControlToValidate="txtBoxCountry"
                                                                ErrorMessage="Please enter country" Display="Dynamic"></asp:RequiredFieldValidator>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            Phone:
                                                        </td>
                                                        <td>
                                                            <asp:TextBox ID="txtBoxPhone" runat="server" Text='<%# Bind("Phone") %>'></asp:TextBox>
                                                            <asp:RequiredFieldValidator ID="rvPhone" runat="server" ControlToValidate="txtBoxPhone"
                                                                ErrorMessage="Please enter phone" Display="Dynamic"></asp:RequiredFieldValidator>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td align="right" style="width: 25%; padding-left: 10px;">
                                                <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AlternateText="No Photo"
                                                    ToolTip="No Photo" Width="90px" Height="110px" ResizeMode="Fit" ImageUrl="~/ListView/Examples/Overview/Img/EmtpyCategoryImage.jpg">
                                                </telerik:RadBinaryImage>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <div style="float: left; width: 238px;">
                                                    <telerik:RadUpload ID="ruCustomerImage" runat="server" AllowedFileExtensions=".jpg,.jpeg,.gif,.png"
                                                        MaxFileSize="1000000" ControlObjectsVisibility="None" InputSize="12" Width="160px"
                                                        CssClass="radUploadStyle">
                                                    </telerik:RadUpload>
                                                </div>
                                                <div style="clear: both">
                                                </div>
                                                <div style="float: left; padding-left: 40%;">
                                                    <asp:Button ID="btnPerformInsert" runat="server" Text="Insert" CommandName="PerformInsert">
                                                    </asp:Button>
                                                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" CommandName="Cancel" CausesValidation="false">
                                                    </asp:Button>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </fieldset>
                            </InsertItemTemplate>
                            <EmptyDataTemplate>
                                <fieldset style="width: 800px">
                                    <legend>Customers</legend>No records for customers available.
                                </fieldset>
                            </EmptyDataTemplate>
                        </telerik:RadListView>
                    </asp:Panel>
                </td>
            </tr>
            <tr>
                <td>
                    <h3>
                        Grouped RadListView</h3>
                    <qsf:InformationBox ID="InfoBox1" runat="server">
                        Select a category to view its description
                    </qsf:InformationBox>
                    <telerik:RadListView ID="RadListView2" DataSourceID="SqlDataSource2" runat="server"
                        ItemPlaceholderID="CategoriesContainer" GroupPlaceholderID="GroupCategoriesContainer"
                        GroupItemCount="3" DataKeyNames="CategoryID" OnSelectedIndexChanged="RadListView2_SelectedIndexChanged">
                        <LayoutTemplate>
                            <fieldset id="GroupCategoriesContainer" runat="server">
                            </fieldset>
                        </LayoutTemplate>
                        <GroupTemplate>
                            <fieldset style="float: left;">
                                <legend>Categories group</legend>
                                <table>
                                    <tr>
                                        <asp:PlaceHolder ID="CategoriesContainer" runat="server"></asp:PlaceHolder>
                                    </tr>
                                </table>
                            </fieldset>
                        </GroupTemplate>
                        <ItemTemplate>
                            <td>
                                <asp:LinkButton ID="imgButton" runat="server" CommandName="Select">
                                    <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AlternateText="Category Photo"
                                        Style="margin-left: 10px" ToolTip="Category Photo" Width="90px" Height="62px"
                                        BorderColor="White" BorderWidth="2px" ResizeMode="Fit" ImageUrl='<%# string.Format("IMG/{0}.jpg", Eval("CategoryID")) %>'>
                                    </telerik:RadBinaryImage>
                                </asp:LinkButton>
                                <div class="itemDiv">
                                    <%#Eval("CategoryName")%>
                                </div>
                            </td>
                        </ItemTemplate>
                        <EmptyItemTemplate>
                            <td>
                                <img src="Img/EmtpyCategoryImage.jpg" width="110px" height="62px" alt="No Category to display"
                                    title="No Category to display" />
                                <div class="itemDiv">
                                    &nbsp;
                                </div>
                            </td>
                        </EmptyItemTemplate>
                        <SelectedItemTemplate>
                            <td>
                                <asp:LinkButton ID="imgButton" runat="server" CommandName="Select">
                                    <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AlternateText="Category Photo"
                                        Style="margin-left: 10px" ToolTip="Category Photo" Width="90px" Height="62px"
                                        BorderColor="#58954D" BorderWidth="2px" ResizeMode="Fit" ImageUrl='<%# string.Format("IMG/{0}.jpg", Eval("CategoryID")) %>'>
                                    </telerik:RadBinaryImage>
                                </asp:LinkButton>
                                <div class="selectedDiv">
                                    <%#Eval("CategoryName")%>
                                </div>
                            </td>
                        </SelectedItemTemplate>
                    </telerik:RadListView>
                </td>
            </tr>
            <tr>
                <td>
                    <fieldset>
                        <legend>Description</legend>
                        <asp:Label ID="lblDescription" runat="server"></asp:Label>
                    </fieldset>
                </td>
            </tr>
        </table>
        <br />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>"
            SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle], [City], [Country], [Phone], [Photo] FROM [CustomerPhotos]"
            DeleteCommand="DELETE FROM [CustomerPhotos] WHERE [CustomerID] = @CustomerID"
            InsertCommand="INSERT INTO [CustomerPhotos] ([CustomerID], [CompanyName], [ContactName], [ContactTitle], [City], [Country], [Phone], [Photo]) VALUES (@CustomerID, @CompanyName, @ContactName, @ContactTitle, @City, @Country, @Phone, @Photo)"
            UpdateCommand="UPDATE [CustomerPhotos] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [ContactTitle] = @ContactTitle, [City] = @City, [Country] = @Country, [Phone] = @Phone, [Photo] = @Photo WHERE [CustomerID] = @CustomerID"
            OnInserting="SqlDataSource1_Inserting" OnUpdating="SqlDataSource1_Updating">
            <DeleteParameters>
                <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
            </DeleteParameters>
            <UpdateParameters>
                <asp:Parameter Name="CompanyName" Type="String"></asp:Parameter>
                <asp:Parameter Name="ContactName" Type="String"></asp:Parameter>
                <asp:Parameter Name="ContactTitle" Type="String"></asp:Parameter>
                <asp:Parameter Name="City" Type="String"></asp:Parameter>
                <asp:Parameter Name="Country" Type="String"></asp:Parameter>
                <asp:Parameter Name="Phone" Type="String"></asp:Parameter>
                <asp:Parameter Name="Photo" DbType="Binary"></asp:Parameter>
            </UpdateParameters>
            <InsertParameters>
                <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
                <asp:Parameter Name="CompanyName" Type="String"></asp:Parameter>
                <asp:Parameter Name="ContactName" Type="String"></asp:Parameter>
                <asp:Parameter Name="ContactTitle" Type="String"></asp:Parameter>
                <asp:Parameter Name="City" Type="String"></asp:Parameter>
                <asp:Parameter Name="Country" Type="String"></asp:Parameter>
                <asp:Parameter Name="Phone" Type="String"></asp:Parameter>
                <asp:Parameter Name="Photo" DbType="Binary"></asp:Parameter>
            </InsertParameters>
        </asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 5 CategoryID, CategoryName, Description, Picture FROM Categories">
        </asp:SqlDataSource>
    </div>
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/ListView.png" AlternateText="tlrk.it/1dJ5NSQ" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/1dJ5NSQ">tlrk.it/1dJ5NSQ</a>
    </div>
    </form>
</body>
</html>