[CLOSED] GUI Issue in treepanel

[aditya]

Hi,

I am using ext.net 2.3 version.
In treepanel control, I found a GUI issue:

Expected: (please notice that C is parent node which doesn't have any child)

--A
----1
----2
--B
----2
----3
----5
--C
--D
----9
----10

Actual output:

--A
----1
----2
--B
----2
----3
----5
----C <------- Indent issue here
--D
----9
----10

Adding node to the tree panel in code behind(.cs page):

treePermission.GetRootNode().RemoveAll();
                treePermission.Root.Add(new Node {Text = "Element"});

                foreach (OrganizationStructure organizationStructure in lstOrganizationStructure)
                {
                    Ext.Net.Node nodeUnit = new Ext.Net.Node { Text = "Element", Expandable = true, Expanded = false, Leaf = false };

                    nodeUnit.CustomAttributes.Add(new ConfigItem { Name = "Element", Value = organizationStructure.Element, Mode = ParameterMode.Value });
                    nodeUnit.CustomAttributes.Add(new ConfigItem { Name = "Name", Value = organizationStructure.Name, Mode = ParameterMode.Value });
                    nodeUnit.CustomAttributes.Add(new ConfigItem { Name = "UnitId", Value = organizationStructure.UnitId, Mode = ParameterMode.Value });
                    nodeUnit.CustomAttributes.Add(new ConfigItem { Name = "Permission", Value = organizationStructure.Permission, Mode = ParameterMode.Value });
                    nodeUnit.CustomAttributes.Add(new ConfigItem { Name = "EntityId", Value = organizationStructure.Id, Mode = ParameterMode.Value });
                    nodeUnit.CustomAttributes.Add(new ConfigItem { Name = "EntityTypeId", Value = organizationStructure.EntityTypeId, Mode = ParameterMode.Value });

                    foreach (FocusArea focusArea in organizationStructure.UnitFocusAreas)
                    {
                        Ext.Net.Node nodeFocusArea = new Ext.Net.Node { Text = "Element", Expandable = false, Leaf = true };

                        nodeFocusArea.CustomAttributes.Add(new ConfigItem { Name = "Element", Value = focusArea.Element, Mode = ParameterMode.Value });
                        nodeFocusArea.CustomAttributes.Add(new ConfigItem { Name = "Name", Value = focusArea.Name, Mode = ParameterMode.Value });
                        nodeFocusArea.CustomAttributes.Add(new ConfigItem { Name = "UnitId", Value = focusArea.UnitId, Mode = ParameterMode.Value });
                        nodeFocusArea.CustomAttributes.Add(new ConfigItem { Name = "Permission", Value = focusArea.Permission, Mode = ParameterMode.Value });
                        nodeFocusArea.CustomAttributes.Add(new ConfigItem { Name = "EntityId", Value = focusArea.Id, Mode = ParameterMode.Value });
                        nodeFocusArea.CustomAttributes.Add(new ConfigItem { Name = "EntityTypeId", Value = focusArea.EntityTypeId, Mode = ParameterMode.Value });

                        foreach (SpecificArea specificArea in focusArea.SpecificAreasList)
                        {
                            Ext.Net.Node nodeSpecificArea = new Ext.Net.Node { Text = "Element", Expandable = false, Leaf = true };

                            nodeSpecificArea.CustomAttributes.Add(new ConfigItem { Name = "Element", Value = specificArea.Element, Mode = ParameterMode.Value });
                            nodeSpecificArea.CustomAttributes.Add(new ConfigItem { Name = "Name", Value = specificArea.Name, Mode = ParameterMode.Value });
                            nodeSpecificArea.CustomAttributes.Add(new ConfigItem { Name = "UnitId", Value = specificArea.UnitId, Mode = ParameterMode.Value });
                            nodeSpecificArea.CustomAttributes.Add(new ConfigItem { Name = "Permission", Value = specificArea.Permission, Mode = ParameterMode.Value });
                            nodeSpecificArea.CustomAttributes.Add(new ConfigItem { Name = "EntityId", Value = specificArea.Id, Mode = ParameterMode.Value });
                            nodeSpecificArea.CustomAttributes.Add(new ConfigItem { Name = "EntityTypeId", Value = specificArea.EntityTypeId, Mode = ParameterMode.Value });
                            
                            nodeFocusArea.Leaf = false;
                            nodeFocusArea.Expandable = true;
                            nodeFocusArea.Children.Add(nodeSpecificArea);
                        }
                         nodeUnit.Children.Add(nodeFocusArea);
                    }
                    treePermission.GetRootNode().AppendChild(nodeUnit);
                }
                treePermission.GetRootNode().Expand(false);
                treePermission.Render();

Aspx page :

<ext:TreePanel ID="treePermission" Title="User Permissions" runat="server" Region="West" Height="500" Flex="4" ColumnLines="True" 
                    AutoScroll="True" RowLines="True" NoLeafIcon="True" Mode="Local" RootVisible="True" AutoRender="False">
                    <Fields>
                        <ext:ModelField Name="Element" />
                        <ext:ModelField Name="Name" />
                        <ext:ModelField Name="UnitId" />
                        <ext:ModelField Name="Permission" />
                        <ext:ModelField Name="EntityId" />
                        <ext:ModelField Name="EntityTypeId" />
                    </Fields>
                    <ColumnModel>
                        <Columns>
                            <ext:TreeColumn runat="server" Text="Element" Sortable="true" DataIndex="Element" Flex="1" />
                            <ext:Column runat="server" Text="Name" Sortable="true" DataIndex="Name" Flex="1" />
                            <ext:Column runat="server" Text="Permission" Sortable="true" DataIndex="Permission" Flex="1" />
                            <ext:Column runat="server" Text="UnitId" Sortable="true" DataIndex="UnitId" Hidden="True" />
                            <ext:Column runat="server" Text="EntityId" DataIndex="Id" Hidden="True" />
                            <ext:Column runat="server" Text="EntityTypeId" DataIndex="EntityTypeId" Hidden="True" />
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:TreeSelectionModel runat="server">
                            <Listeners>
                                <BeforeSelect Fn="getUserData"></BeforeSelect>
                                <Select Handler="currentSelectedRowPermission = this.store.getAt(index);"></Select>
                            </Listeners>
                        </ext:TreeSelectionModel>
                    </SelectionModel>
                </ext:TreePanel>

Please help me.
thanks in advance.

[Daniil]

Hi @aditya,

I guess the "Group 201" and "Group 301" nodes are somehow added to the "Group 103" node as children. I mean in code behind.

By the way, if you re-render the TreePanel, I mean

treePermission.Render();

Then you should not use the AppendChild method.

treePermission.GetRootNode().AppendChild(nodeUnit);

Please replace with

var root = new Node { Text = "Element" };
treePermission.Root.Add(root);

...

root.Children.Add(nodeUnit);

I think you should also remove this:

treePermission.GetRootNode().Expand(false);

and use

var root = new Node { Text = "Element", Expanded = true };

[aditya]

thanks @Daniil,

let me make changes .
i will update you with the status then.
thanks..

[aditya]

thanks @Daniil,

it worked.
Problem was at my end, css was confilicting.

thanks....