RadListView Layout Template bug with <ul> <li>

[Camilo]

Im binding this

<telerik:RadListView runat="server" ID="rlvMyTaxReportsCustomization"
        onitemdrop="rlvMyTaxReportsCustomization_ItemDrop">
    <ClientSettings AllowItemsDragDrop="true">
        <ClientEvents OnItemDropping="reportDropping" />
    </ClientSettings>
    <LayoutTemplate>
        <ul id="ulMyTaxReportsCustomization" runat="server" class="noBullet">
            <li id="itemPlaceHolder" runat="server"></li>
        </ul>
    </LayoutTemplate>
    <ItemTemplate>
        <li id="liMyTaxReportsCustomization" runat="server">
            <asp:CheckBox ID="MyTaxReportsCustomizationHidden" runat="server" text="Hide" Checked='<%#Eval("hidden").ToString().Equals("1") %>' CssClass="cbHide" />
            <div id="divMyTaxReportsCustomization" class="rlvI" runat="server">
                <div class="rlvDrag" onmousedown="Telerik.Web.UI.RadListView.HandleDrag(event, '<%# Container.OwnerListView.ClientID %>', <%# Container.DisplayIndex%>)">
                    <asp:LinkButton ID="lkbMyTaxReportsCustomization" runat="server" CssClass="aCont">
                        <%#Eval("name") %>
                        <asp:Label ID="lblMyTaxReportsCustomizationFrom" runat="server" Text='<%#Eval("from"," (from {0} )") %>' ></asp:Label>
                    </asp:LinkButton>
                </div>
            </div>
        </li>
    </ItemTemplate>
</telerik:RadListView>

with this CSS

.rlvI
{
    display:block;
}

.rlvDrag
{
    display:block;
}

.cbHide
{
    float:right;
}

.aCont
{
    display:block;
    text-decoration:none;
}

.noBullet
{
    list-style-type: none;
    padding: 0;
    margin-left: 0;
}

and Im getting the result in the attached image.

The obvious thing I am looking for is a hide checkbox align to the right and I tried this in a static <ul><li> schema and also in a normal ASP.NET ListView and they displayed as I was lloking for... I know this could be an issue, but could you lend me a hand to make it look as I want to?? it is really important, or maybe if there is a fix for this...

Thanks in advance,

Camilo

[Mira]

Hello Camilo,

In order to implement the desired look, I recommend that you use the following style for the list items:
CSS

Copy Code

li.list_item {
    clear: right;
}

ASPX

Copy Code

<telerik:RadListView runat="server" ID="rlvMyTaxReportsCustomization"
        onitemdrop="rlvMyTaxReportsCustomization_ItemDrop">
    <ClientSettings AllowItemsDragDrop="true">
        <ClientEvents OnItemDropping="reportDropping" />
    </ClientSettings>
    <LayoutTemplate>
        <ul id="ulMyTaxReportsCustomization" runat="server" class="noBullet">
            <li id="itemPlaceHolder" runat="server"></li>
        </ul>
    </LayoutTemplate>
    <ItemTemplate>
        <li id="liMyTaxReportsCustomization" runat="server" class="list_item">
            <asp:CheckBox ID="MyTaxReportsCustomizationHidden" runat="server" text="Hide" Checked='<%#Eval("hidden").ToString().Equals("1") %>' CssClass="cbHide" />
            <div id="divMyTaxReportsCustomization" class="rlvI" runat="server">
                <div class="rlvDrag" onmousedown="Telerik.Web.UI.RadListView.HandleDrag(event, '<%# Container.OwnerListView.ClientID %>', <%# Container.DisplayIndex%>)">
                    <asp:LinkButton ID="lkbMyTaxReportsCustomization" runat="server" CssClass="aCont">
                        <%#Eval("name") %>
                        <asp:Label ID="lblMyTaxReportsCustomizationFrom" runat="server" Text='<%#Eval("from"," (from {0} )") %>' ></asp:Label>
                    </asp:LinkButton>
                </div>
            </div>
        </li>
    </ItemTemplate>
</telerik:RadListView>

I hope this helps.

Kind regards,
Mira
the Telerik team