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.
select

ListView / Selecting items

Honda  Accord 01.2003 $20500
BMW  320 01.2002 $19800
Citroen  C4 01.2004 $20800
Citroen  DS3 01.2009 $26100
Honda  Civic 01.2006 $22300
BMW  X5 01.2002 $15300
Please select a car from the list

Please select the desired options

  • RadListView for ASP.NET AJAX provides integrated server-side selection mechanism which can be triggered by:
    • link/push/image buttons residing in the RadListView body when its AllowSorting property is set to true. Their CommandName should be set to 'Select' or 'Deselect' respectively.
    • controls outside of the listview body which invoke the FireCommandEvent method of the listview control.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" Inherits="Telerik.ListViewExamplesCSharp.Selecting.DefaultCS"
        CodeFile="DefaultCS.aspx.cs" %>

    <%@ 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="RadListView.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <div>
            <telerik:Header runat="server" ID="Header1" NavigationLanguage="CS" ShowSkinChooser="false" />
            <!-- content start -->
            <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True" />
            <div>
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                    <telerik:RadListView ID="RadListView1" runat="server" ItemPlaceholderID="AutoStorePlaceHolder"
                        DataSourceID="XmlDataSource1" OnSelectedIndexChanged="RadListView1_SelectedIndexChanged">
                        <ItemTemplate>
                            <div class="asItem">
                                <table>
                                    <tr>
                                        <td style="width:100%">
                                            <span class="asItemBasic">
                                                <asp:LinkButton ID="LinkButton1" CssClass="selectedButtons" runat="server" CommandName="Select">
                                                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("Make") %>' />&nbsp;
                                                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("Model") %>' Style="color: #8094ac" />
                                                </asp:LinkButton>
                                            </span>
                                        </td>
                                        <td>
                                            <span class="asItemSmall">01.<asp:Label ID="Label3" runat="server" Text='<%# Bind("Year") %>' />
                                            </span><span class="asItemPrice">$<asp:Label ID="Label4" runat="server" Text='<%# Bind("Price") %>' />
                                            </span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </ItemTemplate>
                        <SelectedItemTemplate>
                            <div class="asSelectedItem transp">
                                <table style="width: 100%;">
                                    <tr>
                                        <td>
    <asp:ImageButton ID="DeselectButton" runat="server" ImageUrl="~/ListView/Examples/Selecting/Images/cancel.png"
    Width="16px" Height="16px" CommandName="Deselect" AlternateText="Deselect" Style="padding-right: 10px;
    margin-top: 3px;" />

                                        </td>
                                        <td>
                                            <div style="position: relative; padding-right: 80px;">
                                                <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# "~/ListView/Examples/Selecting/Images/Manufacturers/" + Eval("Make") + ".png" %>'
                                                    AlternateText='<%# Eval("Make") %>'
                                                    Style="position: absolute; top: -30px;" CommandName="Deselect" />
                                            </div>
                                        </td>
                                        <td>
                                            <asp:Label ID="Label5" runat="server" Text='<%# Bind("Make") %>' Style="color: #ffffff;
                                                font-weight: bold;" />
                                            <br />
                                            <asp:Label ID="Label6" runat="server" Text='<%# Bind("Model") %>' Style="font-weight: bold;" />
                                        </td>
                                        <td>
                                            <ul class="asList">
                                                <li>year:
                                                    <asp:Label ID="Label7" runat="server" Text='<%# Bind("Year") %>' /></li>
                                                <li>mileage: 123,456 miles</li>
                                                <li>transmission: manual/6sp</li>
                                            </ul>
                                        </td>
                                        <td>
                                            <span class="asSelectedBasic">$<asp:Label ID="Label8" runat="server" Text='<%# Bind("Price") %>' />
                                            </span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </SelectedItemTemplate>
                        <LayoutTemplate>
                            <div class="asLayout">
                                <asp:Panel ID="AutoStorePlaceHolder" runat="server" />
                            </div>
                        </LayoutTemplate>
                    </telerik:RadListView>
                    <span class="asItem">
                        <asp:Label ID="SelectedCarLabel" runat="server" Text="Please select a car from the list" /></span>
                    <p>
                    </p>
                    <telerik:RadListView ID="RadListView2" runat="server" ItemPlaceholderID="AutoStoreDetailsPlaceHolder"
                        DataSourceID="XmlDataSource2" AllowMultiItemSelection="true" OnSelectedIndexChanged="RadListView2_SelectedIndexChanged">
                        <ItemTemplate>
                            <div class="buttonWrapper">
                                <asp:LinkButton ID="ChoiceButton" Text='<%# Bind("Option") %>' runat="server" CommandName="Select"
                                    CssClass="normalButtons" ToolTip='<%# Bind("Price") %>' />
                            </div>
                        </ItemTemplate>
                        <SelectedItemTemplate>
                            <div class="selectButtonWrapper buttonWrapper">
                                <asp:LinkButton ID="ChoiceButton" Text='<%# Bind("Option") %>' runat="server" CommandName="Select"
                                    CssClass="selectedButtons" ToolTip='<%# Bind("Price") %>' />
    <asp:ImageButton ID="DeselectButton" AlternateText="x" runat="server" CssClass="deselectButtons"
    ImageUrl="~/ListView/Examples/Selecting/Images/cancel.png" CommandName="Deselect" />

                            </div>
                        </SelectedItemTemplate>
                        <LayoutTemplate>
                            <div class="asLayoutBottom" style="text-align: center;">
                                <asp:Panel ID="AutoStoreDetailsPlaceHolder" runat="server" />
                            </div>
                        </LayoutTemplate>
                    </telerik:RadListView>
                    <span class="asItem">
                        <asp:Label ID="SelectedOptions" runat="server" Text="Please select the desired options" /></span>
                </telerik:RadAjaxPanel>
                <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="autostore.xml" />
                <asp:XmlDataSource ID="XmlDataSource2" runat="server" DataFile="autostoreoptions.xml" />
                <!-- content end -->
            </div>
            <telerik:Footer runat="server" ID="Footer1" />
        </div>
        </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-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451