how to switch between two ListView templates

[Igor Ashmetkov]

     Hello.

I want to use ListView with the following functionality:
It will be numeric list of Customers (each row  has 3 clolumns: number, Customer name and "Details" button or hyperlink).
When user click "Details" button(hyperlink) from below must be showing template with detail information. And when user click this "Detail" button again,  details template mus be hidden.

I look all ListView Demos, but i still don`t uderstand how to make this functionality.
Can anybody help me, please?

[Richard]

Igor:

I would suggest that you take a close look at the ListView/Selecting items online demo. This is the one that you can use as the basis of your requirement.

It demonstrates how to use the <SelectedItemTemplate> to format a popup detail view of the selected item in the list. See "Selecting Items" documentation page for insights.

In the top list view ("RadListView1") of this online demo, when you click on the name of the car (e.g. Honda), it pops up the details of the car, including an image of the car logo. This "details" template is configured in the <SelectedItemTemplate> section of the markup as follows:

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

This selected item template includes a "deselect button" used to close the detail table. And, you can use CSS to style and position this popup (see the RadListView.css that is part of the online demo).

.asSelectedItem
{
    display: block;
    padding: 0 5px 0 5px;
    background: black url(Images/itemback.png) repeat-x;
    color: #96E1FF;
    vertical-align: middle;
    height: 48px;
}

You should be able to modify this to your own purposes.

I hope this helps.