Display items in RTL mode

[Bader]

Hello,

I have a problem with displaying the items in the radlistview control in RTL mode. In order to understand the problem plaese view the attached images (Cuurent.jpg and Required.jpg).

Here is the control code::

<asp:Panel ID="RadListView1Panel" style="margin-left:10px;" runat="server">
                 <telerik:RadListView runat="server" ID="RadListView1" AllowPaging="True" EnableEmbeddedSkins="false" Width="915px"
                    DataKeyNames="ItemID" DataSourceID="ObjItems" OnPageIndexChanged="RadListView1_PageIndexChanged" onitemdatabound="RadListView1_ItemDataBound">
                    <ItemTemplate>
                        <div class="rlvI" style="margin-left:1px; border:0; border-color:transparent; height:220px; width:305px;">
                            <center>
                                <asp:Panel ID="ItmPanel" Width="300px" BackImageUrl="~/Common/Img/BackGrounds/g4.gif" style="margin:-1px; padding:-1px;" Height="210px" runat="server">
                                        <asp:Table ID="Table1" Width="300px" HorizontalAlign="Center" BorderColor="Black" BorderWidth="0" runat="server">
                                            <asp:TableRow ID="TableRow2" Height="20px" runat="server">
                                              <asp:TableCell ColumnSpan="2">

                                              </asp:TableCell>
                                            </asp:TableRow>
                                            <asp:TableRow ID="TableRow1" Height="190px" runat="server">
                                                <asp:TableCell VerticalAlign="Top" HorizontalAlign="Right" ID="TableCell1" Width="200px" runat="server">
                                                  <div style="margin-right:5px;">
                                                    <asp:Label ID="ItmNameLabel" SkinID="ItemHeaderText" runat="server" Text='<%# Eval("ItmName") %>'></asp:Label><br /><br />
                                                    <asp:Label ID="ItmDescLabel" runat="server" Text='<%# Eval("ItmDesc") %>'></asp:Label>
                                                  </div>
                                                </asp:TableCell>
                                                <asp:TableCell ID="TableCell5" VerticalAlign="Top" Width="100px" runat="server">
                                                    <asp:Image ID="ItmImage" ImageUrl='<%# Eval("FileUrl") %>' Width="90px" Height="90px" runat="server" />
                                                    <br /><br /><br />
                                                    <asp:LinkButton ID="MoreDetailsLinkButton" Font-Underline="false" ForeColor="Black" Font-Bold="true" Text="<%$ Resources:Resource, PagesItemsMoreDetailsLinkButtonText %>" OnClick="MoreDetailsLinkButton_Click" runat="server"></asp:LinkButton>
                                                </asp:TableCell>
                                            </asp:TableRow>
                                        </asp:Table>

                                </asp:Panel>
                            </center>
                        </div>
                    </ItemTemplate>
                    <EmptyDataTemplate>
                        <div class="RadListView RadListView_<%# Container.Skin %>">
                            <div class="rlvEmpty">
                                There are no items to be displayed.</div>
                        </div>
                    </EmptyDataTemplate>
                    <LayoutTemplate>
                        <div class="RadListView RadListViewFloated RadListView_<%# Container.Skin %>" style="background-color:transparent;">
                            <div class="rlvFloated rlvAutoScroll">
                                <div id="itemPlaceholder" runat="server">
                                </div>
                            </div>
                            <table cellpadding="0" cellspacing="0" width="100%" style="clear: both;">
                                <tr>
                                    <td align="center">
                                        <telerik:RadDataPager ID="RadDataPager2" runat="server" Width="280px" PagedControlID="RadListView1"
                                            PageSize="21" >
                                            <Fields >
                                                <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                                                <telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go"
                                                        TextBoxWidth="15" />
                                                <telerik:RadDataPagerButtonField FieldType="NextLast" />
                                            </Fields>
                                        </telerik:RadDataPager>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </LayoutTemplate>
                </telerik:RadListView>
            </asp:Panel>

Please, I need to display the items as it is shown in Required.jpg image.
It is appreciated to send me the modified code.

Regards,
Bader

[Daniel]

Hello Bader,

You could use the Floated Tiles layout and add the following CSS code to achieve the desired effect:

<style type="text/css">
    .RadListView .rlvFloated div.rlvA,
    .RadListView .rlvFloated div.rlvI
    {
        float: right;
    }
</style>

I also created a runnable project (attached to this post) that demonstrates the approach in question.

Kind regards,
Daniel
the Telerik team