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
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
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.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
  • autostore.xml
    • autostore.xml
    • autostoreoptions.xml
<%@ Page Language="c#" Inherits="Telerik.ListViewExamplesCSharp.Selecting.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ 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">
    <title>Telerik ASP.NET Example</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="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <div>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                <telerik:RadListView ID="RadListView1" runat="server" RenderMode="Lightweight" ItemPlaceholderID="AutoStorePlaceHolder"
                    DataSourceID="XmlDataSource1" OnSelectedIndexChanged="RadListView1_SelectedIndexChanged">
                    <ItemTemplate>
                        <div class="asItem">
                            <table>
                                <tr>
                                    <td class="maxWidth">
                                        <span class="asItemBasic">
                                            <asp:LinkButton ID="LinkButton1" CssClass="selectedButtons" runat="server" CommandName="Select">
                                                <asp:Label ID="Label1" runat="server" Text='<%# Bind("Make") %>'></asp:Label>&nbsp;
                                                <asp:Label ID="Label2" runat="server" Text='<%# Bind("Model") %>' CssClass="modelLabel"></asp:Label>
                                            </asp:LinkButton>
                                        </span>
                                    </td>
                                    <td>
                                        <span class="asItemSmall">01.<asp:Label ID="Label3" runat="server" Text='<%# Bind("Year") %>'></asp:Label>
                                        </span><span class="asItemPrice">$<asp:Label ID="Label4" runat="server" Text='<%# Bind("Price") %>'></asp:Label>
                                        </span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </ItemTemplate>
                    <SelectedItemTemplate>
                        <div class="asSelectedItem transp">
                            <table class="maxWidth">
                                <tr>
                                    <td>
                                        <asp:ImageButton ID="DeselectButton" runat="server" ImageUrl="~/ListView/Examples/Selecting/images/cancel.png"
                                            Width="16px" Height="16px" CommandName="Deselect" AlternateText="Deselect" CssClass="deselectButton"></asp:ImageButton>
                                    </td>
                                    <td>
                                        <div class="manufacturersButtonWrapper">
                                            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# "~/ListView/Examples/Selecting/images/Manufacturers/" + Eval("Make") + ".png" %>'
                                                AlternateText='<%# Eval("Make") %>' CssClass="manufacturersButton" CommandName="Deselect">
                                            </asp:ImageButton>
                                        </div>
                                    </td>
                                    <td>
                                        <asp:Label ID="Label5" runat="server" Text='<%# Bind("Make") %>' CssClass="makeLabel"></asp:Label>
                                        <br>
                                        <asp:Label ID="Label6" runat="server" Text='<%# Bind("Model") %>' CssClass="modelLabel"></asp:Label>
                                    </td>
                                    <td>
                                        <ul class="asList">
                                            <li>year:
                                                <asp:Label ID="Label7" runat="server" Text='<%# Bind("Year") %>'></asp:Label></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") %>'></asp:Label>
                                        </span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </SelectedItemTemplate>
                    <LayoutTemplate>
                        <div class="asLayout">
                            <asp:Panel ID="AutoStorePlaceHolder" runat="server">
                            </asp:Panel>
                        </div>
                    </LayoutTemplate>
                </telerik:RadListView>
                <span class="asItem asText">
                    <asp:Label ID="SelectedCarLabel" runat="server" Text="Please select a car from the list"></asp:Label></span>
                <p>
                </p>
                <telerik:RadListView ID="RadListView2"  runat="server" RenderMode="Lightweight"  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") %>'></asp:LinkButton>
                        </div>
                    </ItemTemplate>
                    <SelectedItemTemplate>
                        <div class="selectButtonWrapper buttonWrapper">
                            <asp:LinkButton ID="ChoiceButton" Text='<%# Bind("Option") %>' runat="server" CommandName="Select"
                                CssClass="selectedButtons" ToolTip='<%# Bind("Price") %>'></asp:LinkButton>
                            <asp:ImageButton ID="DeselectButton" AlternateText="x" runat="server" CssClass="deselectButtons"
                                ImageUrl="~/ListView/Examples/Selecting/images/cancel.png" CommandName="Deselect">
                            </asp:ImageButton>
                        </div>
                    </SelectedItemTemplate>
                    <LayoutTemplate>
                        <div class="asLayoutBottom">
                            <asp:Panel ID="AutoStoreDetailsPlaceHolder" runat="server">
                            </asp:Panel>
                        </div>
                    </LayoutTemplate>
                </telerik:RadListView>
                <span class="asItem asText">
                    <asp:Label ID="SelectedOptions" runat="server" Text="Please select the desired options"></asp:Label></span>
            </telerik:RadAjaxPanel>
            <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="autostore.xml"></asp:XmlDataSource>
            <asp:XmlDataSource ID="XmlDataSource2" runat="server" DataFile="autostoreoptions.xml">
            </asp:XmlDataSource>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?