RadListView Layout Template bug with <ul> <li>

2 posts, 0 answers
  1. Camilo
    Camilo avatar
    4 posts
    Member since:
    Feb 2011

    Posted 01 Mar 2011 Link to this post

    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
  2. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 07 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top