This is a migrated thread and some comments may be shown as answers.
how to switch between two ListView templates
1 Answer 42 Views
This is a migrated thread and some comments may be shown as answers.
Igor Ashmetkov
Top achievements
Rank 1
Igor Ashmetkov asked on 24 Apr 2012, 10:24 AM
     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?

1 Answer, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 26 Apr 2012, 07:08 PM
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.
Asked by
Igor Ashmetkov
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Share this question
or