Width problem when having too many nodes

2 posts, 0 answers
  1. Peerayu
    Peerayu avatar
    6 posts
    Member since:
    May 2014

    Posted 02 Jul 2014 Link to this post

    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>

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 07 Jul 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top