CODEWITHSUNDEEP
c#asp.netnode.jstelerik
Mohamad Mahmoud Darwish
Mohamad Mahmoud Darwish

Reputation: 4175

RadTreeView all nodes have same aligment

How I can have the same alignment for all nodes(Parent && Children)

Could you please see the following images (I am trying to do the same on pik1). "Bedding Features" is root and other nodes are leafs (Children).

enter image description here

enter image description here

I am using Telerik RadTreeView

<telerik:RadTreeView ID="TreeView1" ItemsIndent="0"  ShowLineImages="false" RegisterWithScriptManager ="true" ForeColor="Black" CheckBoxes="true" runat="server"  OnNodeCheck="TreeView1_TreeNodeCheckChanged" >
   </telerik:RadTreeView>



 private void FillTree()
    {
        //get all tree 

        DataTable TreeDataTable = new DataTable();
        TreeDataTable = DSCAttribute.GetAttributeFullTree();
        TreeView1.DataTextField = "Name";
        TreeView1.DataValueField = "Name";
        TreeView1.DataFieldID = "Id";
        TreeView1.DataFieldParentID = "ParentID";
        TreeView1.DataSource = TreeDataTable;
        TreeView1.DataBind();
}

I Need away to eliminate the space before children nodes ..thanks ?!

Upvotes: 0

Views: 474

Answers (1)

rdmptn
rdmptn

Reputation: 5603

The treeveiw is supposed to have this padding to show hierarchy. Thus, you should consider flattening the data source and just show everything in one level.

Or, you can try hacking it by overriding its CSS rules. Here is a basic example to get you started:

        /*remove padding*/
        div.RadTreeView .rtLI
        {
            padding-left: 0; 
        }

        /*remove dotted lines*/
        div.RadTreeView .rtLines .rtLI::before,
        div.RadTreeView .rtLines .rtOut::before
        {
            display: none;
        }

        /*hide expand/collapse icons*/
        span.rtMinus,
        span.rtPlus
        {
            display: none;
        }

and some sample markup

        <telerik:RadTreeView ID="RadTreeView1" runat="server" RenderMode="Lightweight" CheckBoxes="true">
            <Nodes>
                <telerik:RadTreeNode Text="root" Expanded="true">
                    <Nodes>
                        <telerik:RadTreeNode Text="leaf 1" Expanded="true">
                            <Nodes>
                                <telerik:RadTreeNode Text="subleaf 1"></telerik:RadTreeNode>
                                <telerik:RadTreeNode Text="subleaf 2"></telerik:RadTreeNode>
                                <telerik:RadTreeNode Text="subleaf 3"></telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="leaf 2"></telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="leaf 3"></telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>

Upvotes: 1

Related Questions