ListView layout question

2 posts, 1 answers
  1. Jaime
    Jaime avatar
    12 posts
    Member since:
    Feb 2013

    Posted 07 Feb 2013 Link to this post

    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
  2. Answer
    Chris
    Chris avatar
    58 posts
    Member since:
    Feb 2012

    Posted 07 Feb 2013 Link to this post

    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


  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top