DropDownTree Items Does not indent

4 posts, 0 answers
  1. Mansur
    Mansur avatar
    2 posts
    Member since:
    Mar 2013

    Posted 05 Mar 2013 Link to this post

    Hello,

    I have just upgraded my telerik components that I use inside our sitefinity custom controls so that I can use RadDropDownTree.

    I have coded it as it is done on the demos webpage resources but only using a DataTable as DataSource .

    The objects works just fine but the problem is although it recognizes and orders the elements in the correct hierarchy,

    The child items does not get indented so instead of looking like this

     

    +GrandParent1

     -GrandParent2

         +Parent1

         -Parent2

             +Child1
              +Child2

    they look like this

    +GrandParent1

    -GrandParent2

     +Parent1

     -Parent2

     +Child1

     +Child2

     

    There is no property in the documents and in the public properties about the “indentation of child nodes” as far as I can see.
    Shouldn't indentation be the default behaviour of a dropdown tree?
    I mean it's almost the whole purpose of a dropdown tree instead of a DropDownList.

    Am I missing something? Or is there something missing in the documentation about this, or is there a bug?

     

    IBelow are my .ascx and .cs files so that you can see for yourselves that it is not different than the example documentation.

     

    Thank you..

     

     

    -------ASCX FILE------------------

    <%@ Control Language="C#" AutoEventWireup="True" CodeBehind="GenericTreeFilter.ascx.cs" Inherits="MyNameSpace.GenericTreeFilter" %>

     

    <telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">

        <AjaxSettings>

           

        </AjaxSettings>

    </telerik:RadAjaxManagerProxy>

     

    <style type="text/css">    

        ul.tree-list

        {

            list-style:none;

            padding:0;

            margin:0;

            height:300px;

        }

     

        li.tree-item

        {

            float:left;

            width:260px;

            padding: 0 10px;

            border-left: solid 1px #b1d8eb;

            height:300px;

        }

     

    </style>

     

    <asp:SqlDataSource ID="Data1" runat="server"

        ConnectionString="<%$ ConnectionStrings:CustomConnectionString %>"

        ProviderName="<%$ ConnectionStrings:CustomConnectionString.ProviderName %>"

        SelectCommand=""></asp:SqlDataSource>

       

            <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />

     

            <ul class="tree-list" style="margin-left: 100px;">

            <li class="tree-item" style="border: none">

                <asp:Label ID="FilterName" runat="server" font-names="myFont" Text="Generic Filter: "></asp:Label>

                <telerik:RadDropDownTree ID="RadDropDownTree1" runat="server"

                    CheckBoxes="TriState"

                    ViewStateMode="Enabled"

                    Skin="Default"

                    DefaultMessage="Seçiniz"

                    DataFieldID="ID"

                    DataFieldParentID="PARENT_ID"

                    DataTextField="VALUE" 

                    Width="250"      

                    >               

                    <DropDownSettings Width="250px"/>

                </telerik:RadDropDownTree>

            </li>

            </ul>

           

           

    ------------------------------

     

    --------ascx.cs file--------------

     

     

    namespace MyNameSpace

    {

       

           ///<Summary>GenericTreeFilter</Summary>

           public partial class GenericTreeFilter : System.Web.UI.UserControl

           {

                 .................

    }

     

    protected void Page_Load(object sender, EventArgs e)

           {

    if (!IsPostBack)

    {                     

                                                   RadDropDownTree1.DataSource = GetTreeItems();

                        RadDropDownTree1.DataBind();

                 }

           }

     

           public DataTable GetTreeItems()

    {

                 using (var connection = new OracleConnection(

                                ConfigurationManager.ConnectionStrings["CustomConnectionString"].ConnectionString))

                using (var cmd = connection.CreateCommand())

                {

                

    cmd.CommandText = "select ID,PARENT_ID,PARENT_VALUE,VALUE from tblXXXXX”;

                        DataSet s = new DataSet();

     

                        using (OracleDataAdapter sdap = new OracleDataAdapter(cmd))

                        {

                               sdap.Fill(s);

                        }

                         connection.Close();

     

                         if (s.Tables.Count > 0)

                               return s.Tables[0];

    else return new DataTable();

                   }

            }

     

    ---------------------------------------------------------

  2. MasterChiefMasterChef
    MasterChiefMasterChef avatar
    152 posts
    Member since:
    Jan 2013

    Posted 05 Mar 2013 Link to this post

    Hi Mansur,

    I do not think the controls are the issue here, but even if they were the fix would be done in your css script. I believe when you set the padding to 0 the tree item does not indent. Try changing your padding declaration or try taking it out and see if this solves the problem. If the padding is explicitly set to '0' then the elements will not be able to indent themselves.

    Good luck,
    Master Chief
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mansur
    Mansur avatar
    2 posts
    Member since:
    Mar 2013

    Posted 06 Mar 2013 Link to this post

    Unfortunately, that was not the issue. I already thought so because those css scripts were copied from the example documentation directly.
    Even if I did not use any css/styling still the problem exists. I even tried removing the "width = 250px" settings and then it got worse :
    if you didn't give a width to the dropdown box by a
    <DropDownSettings Width="250px"/>
    Then the height of the box gets confused such that when you click open the "TOP" Item the dropdown box gets as long as it should have been when all the items are shown even though only the second level items were showing (all others are collapsed) at the time.

    Do you have any other suggestions, or can you direct me to a sample web project so that I can run and compare?

    Thank you
  5. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 06 Mar 2013 Link to this post

    Hello Mansur,

    I setup a sample project for you. Could you please try to apply all of the style that you loaded on your master page? In case that you reproduce the issue please send me back the project and I will investigate it locally.

    Regards,
    Peter Filipov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top