This is a migrated thread and some comments may be shown as answers.

ListView layout question

1 Answer 89 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Jaime
Top achievements
Rank 1
Jaime asked on 07 Feb 2013, 01:05 PM
I am trying to do the following;

Display 5 items in a listview with three items on the top and two items below the first three items. The problem I am having is that I need the two items centered below the top three items but can't seem to find a way to get that done. Currently my solution uses a basic list view but that only diplayes items in a block style with all items aligned left.

Does anyone know of a way that I can display my five items in two rows with the two bottom items centered below the top three item? If you do please share your suggestion so I can learn.

Thanks,

Jaime

1 Answer, 1 is accepted

Sort by
0
Accepted
Christophe
Top achievements
Rank 1
answered on 08 Feb 2013, 12:11 AM
Why don't you use css styling and the RadListView wizard to setup a Floated Tiles Layout ?
See here : http://www.telerik.com/help/aspnet-ajax/listview-predefined-layouts.html

Then you just need to tweek a bit of your css. Here is my code (sorry if it's not very clean but I had to make a few changes to achieve what you are after)

<telerik:RadListView ID="rlvListWidgets" runat="server" DataSourceID="dsWidget" >
    <EmptyDataTemplate>
        <div class="RadListView RadListView_Default">
            <div class="rlvEmpty">
                There are no items to be displayed.</div>
        </div>
    </EmptyDataTemplate>
    <AlternatingItemTemplate>
        <a href="#" class="widgetLink" onclick="LoadControl('<%#Eval("UCPath") %>')">
            <div class="rlvA widget">
                <div class="woverlay">
                    <img src="images/widget-done.png" alt="done" /></div>
                <table>
                    <tr>
                        <td rowspan="2" class="wicon">
                            <img src="<%#Eval("Icon") %>" alt="icon" />
                        </td>
                        <td class="wtitle">
                            <%#Eval("Name") %>
                        </td>
                    </tr>
                    <tr>
                        <td class="wsubtitle">
                            <%#Eval("Subtitle") %>
                        </td>
                    </tr>
                </table>
            </div>
        </a>
    </AlternatingItemTemplate>
    <SelectedItemTemplate>
        <div class="rlvISel">
        </div>
    </SelectedItemTemplate>
    <ItemTemplate>
        <a href="#" class="widgetLink" onclick="LoadControl('<%#Eval("UCPath") %>')">
        <div class="rlvI widget">
            <div class="woverlay">
                <img src="images/widget-done.png" alt="done" /></div>
            <table>
                <tr>
                    <td rowspan="2" class="wicon">
                        <img src="<%#Eval("Icon") %>" alt="icon" />
                    </td>
                    <td class="wtitle">
                        <%#Eval("Name") %>
                    </td>
                </tr>
                <tr>
                    <td class="wsubtitle">
                        <%#Eval("Subtitle") %>
                    </td>
                </tr>
            </table>
        </div>
        </a>
    </ItemTemplate>
    <LayoutTemplate>
        <div class="RadListView RadListViewFloated RadListView_Default">
            <div class="rlvFloated">
                <div id="itemPlaceholder" runat="server">
                </div>
            </div>
        </div>
    </LayoutTemplate>
</telerik:RadListView>

What you need to change here are the "widgetLink" and "rlvFloated" classes. The last one is generated by the wizard, therefore you just need to overwrite its text-align property in your css and set up your list item to take 1/3 of the available width.

here's my css file;

.rlvFloated
{
    text-align: center;
    }
 
.widgetLink
{
    display: inline-block;
    width: 30%;
    }

Check out the results in the image attached. Again this is based on my code that I had to tweek a bit so there might be a better way but it does the trick with not much right ?
Keep me posted.

Chris


Tags
ListView
Asked by
Jaime
Top achievements
Rank 1
Answers by
Christophe
Top achievements
Rank 1
Share this question
or