Width problem when having too many nodes

[Peerayu]

I use Telerik 2014.2.618.45 and have the problem with RadOrgChart.

When I bind data with only 2 or 3 nodes at the same level, it is shown collectedly. However, if there are a lot of nodes, the nodes on the right will be dropped to the new line. I also found this problem on your example about Drill Down.

I try to solve this problem by using the suggestion from Node Alignment Issue, but it didn't help since I didn't hide the RadOrgChart. I called it on Page_Load. In addition, I'm using this RadOrgChart Inside RadPageView (My OrgChart is showing on the first page)

<telerik:RadAjaxPanel ID="panOrganize" runat="server" LoadingPanelID="radAjaxLoadingPanel">

    <!-- TabStrip -->
    <telerik:RadTabStrip ID="rtabOrganize" runat="server" MultiPageID="rmpOrganize" SelectedIndex="0" Width="100%" CssClass="FontBold" OnTabClick="rtabOrganize_TabClick">
        <Tabs>
            <telerik:RadTab CssClass="FontBold" Text="Organize Chart" />
            <telerik:RadTab CssClass="FontBold" Text="User" Enabled="false" />
        </Tabs>
    </telerik:RadTabStrip>
    <!-- /TabStrip -->

    <telerik:RadMultiPage ID="rmpOrganize" runat="server" SelectedIndex="0" ScrollBars="Both">

        <!-- OrgChart -->
        <telerik:RadPageView ID="rpvOrgOrganize" runat="server" Width="100%">
            <telerik:RadOrgChart ID="radOrgChart" runat="server" Width="100%" CssClass="SpacingBottom20" LoadOnDemand="Nodes"
                DataFieldID="OrgID" DataFieldParentID="ParentID"
                DisableDefaultImage="true" EnableDrillDown="true" MaxDataBindDepth="10"
                OnNodeDrop="radOrgChart_NodeDrop" EnableDragAndDrop="true"
                OnNodeDataBound="radOrgChart_NodeDataBound">
                <ItemTemplate>
                    <asp:Panel ID="panNode" runat="server" CssClass="TemplateHolder">
                        <asp:Table ID="tbOrgChart" runat="server" Style="table-layout: fixed; width: 120px;" CellPadding="0" CellSpacing="0">
                            <asp:TableRow>
                                <asp:TableCell Width="100px">
                                    <asp:Label ID="lblTypeName" runat="server" Text='<%# Eval("OrganizationType.TypeName")%>' CssClass="FontBold" />
                                </asp:TableCell>
                                <asp:TableCell RowSpan="4" Width="15px">
                                    <asp:LinkButton ID="lbtnSearch" runat="server" BorderStyle="None" CssClass="fa fa-user"
                                        CommandArgument='<%# Eval("OrgID")%>' CommandName='<%# Eval("Name")%>' OnCommand="lbtnSearch_Command">
                                    </asp:LinkButton>
                                    <asp:LinkButton ID="lbtnAdd" runat="server" BorderStyle="None" class="fa fa-plus"
                                        CommandArgument='<%# Eval("OrgID")%>' CommandName="Add" OnCommand="lbtnAdd_Command">
                                    </asp:LinkButton>
                                    <asp:LinkButton ID="lbtnEdit" runat="server" BorderStyle="None" class="fa fa-pencil"
                                        CommandArgument='<%# Eval("OrgID")%>' CommandName="Edit" OnCommand="lbtnEdit_Command">
                                    </asp:LinkButton>
                                    <asp:LinkButton ID="lbtnDelete" runat="server" BorderStyle="None" class="fa fa-times"
                                        CommandArgument='<%# Eval("OrgID")%>' CommandName="Delete" OnCommand="lbtnDelete_Command">
                                    </asp:LinkButton>
                                </asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow>
                                <asp:TableCell RowSpan="3" VerticalAlign="Top" Wrap="true" Style="max-width: 100px; overflow-wrap: break-word;">
                                    <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name")%>' />
                                    <br />
                                    <asp:Label ID="lblAbbreviation" runat="server" Text='<%#Eval("Abbreviation") != null && Eval("Abbreviation") != String.Empty ? "(" + Eval("Abbreviation") + ")" : String.Empty%>' />
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </asp:Panel>
                </ItemTemplate>
            </telerik:RadOrgChart>
            <telerik:RadWindow ID="rwOrganize" runat="server" AutoSize="true" Modal="true" Behaviors="Close"
                Title="Organization" VisibleTitlebar="true" VisibleStatusbar="false" OnClientClose="onClientClose">
                <ContentTemplate>
                    <div class="row">
                        <div class="col-xs-12">
                            <asp:Table runat="server" ID="tbWindowOrganize" CellPadding="5" Width="100%" CellSpacing="3" Style="min-width: 300px;">
                                <asp:TableRow>
                                    <asp:TableCell ColumnSpan="3" />
                                </asp:TableRow>
                                <asp:TableRow>
                                    <asp:TableCell Width="25%" Style="max-width: 150px;">
                                        <asp:Label ID="lblOrgName" runat="server" Text="Name" />
                                    </asp:TableCell>
                                    <asp:TableCell Width="5px">
                                        <asp:Label runat="server" Text=":" />
                                    </asp:TableCell>
                                    <asp:TableCell>
                                        <telerik:RadTextBox ID="txtOrgName" runat="server" Width="100%" />
                                    </asp:TableCell>
                                </asp:TableRow>
                                <asp:TableRow>
                                    <asp:TableCell>
                                        <asp:Label ID="lblOrgAbbreviation" runat="server" Text="Abbreviation" />
                                    </asp:TableCell>
                                    <asp:TableCell>
                                        <asp:Label runat="server" Text=":" />
                                    </asp:TableCell>
                                    <asp:TableCell>
                                        <telerik:RadTextBox ID="txtOrgAbbreviation" runat="server" Width="100%" />
                                    </asp:TableCell>
                                </asp:TableRow>
                                <asp:TableRow>
                                    <asp:TableCell VerticalAlign="Top">
                                        <asp:Label ID="lblOrgDescription" runat="server" Text="Description" />
                                    </asp:TableCell>
                                    <asp:TableCell VerticalAlign="Top">
                                        <asp:Label runat="server" Text=":" />
                                    </asp:TableCell>
                                    <asp:TableCell>
                                        <telerik:RadTextBox ID="txtOrgDescription" runat="server" Width="100%" Height="70px" TextMode="MultiLine" Rows="3" />
                                    </asp:TableCell>
                                </asp:TableRow>
                                <asp:TableRow>
                                    <asp:TableCell>
                                        <asp:Label ID="lblOrgType" runat="server" Text="Lastname" />
                                    </asp:TableCell>
                                    <asp:TableCell>
                                        <asp:Label runat="server" Text=":" />
                                    </asp:TableCell>
                                    <asp:TableCell>
                                        <telerik:RadComboBox ID="ddlOrgType" runat="server" Width="100%" />
                                    </asp:TableCell>
                                </asp:TableRow>
                                <asp:TableRow>
                                    <asp:TableCell HorizontalAlign="Right" ColumnSpan="3">
                                        <asp:Button ID="btnOrganizeCancel" Text="Cancel" runat="server" CssClass="btn btn-inverse SpacingAll15" BorderStyle="None" OnClick="btnOrganizeCancel_Click" />
                                        <asp:Button ID="btnOrganizeSave" Text="Save" runat="server" CssClass="btn btn-success SpacingAll15" BorderStyle="None" OnClick="btnOrganizeSave_Click" />
                                    </asp:TableCell>
                                </asp:TableRow>
                            </asp:Table>
                        </div>
                    </div>
                </ContentTemplate>
            </telerik:RadWindow>
        </telerik:RadPageView>
    </telerik:RadMultiPage>
</telerik:RadAjaxPanel>

[Boyan Dimitrov]

Hello,

We are not aware of such problem with the RadOrgChart control or with the DrillDown demo. Could you please list the steps to replicate this problem?

Also I wrapped the RadOrgChart in RadMultiPage following provided code snippet but it works fine.  Attached you may find how the demo looks even if resize the browser. It will be very helpful if you provide some additional information about the browser you are testing with?


Regards,
Boyan Dimitrov
Telerik