Node Alignment Issue

[Chris Salas]

I just upgraded to the latest release of the AJAX tools and have run into an issue with the Org Chart control, the nodes are not being displayed correctly.  Please see attached images for the issues that I am having.  Also here is the code that creates the Org Charts for the respective images.

OrgChart align issue.png Code:

private void LoadEmployees()
   {
       Directory_BO.Collections.Employees tmpEmployees = new Directory_BLL.OfficeManager().GetOfficeEmployees(OfficeToDisplay.ID);
       if (tmpEmployees.Count > 0)
       {
           tblNoEmployees.Visible = false;
       }
       else
       {
           radTabEmployees.Enabled = false;
           return;
       }
       //Set the text of the tab
       radTabEmployees.Text = "Employees (" + tmpEmployees.Count + ")";

       //Get the Distinct Ability Types
       var distinctDivisions = tmpEmployees.Cast<Directory_BO.Employee>().GroupBy(c => c.DivisionName).Select(grp => grp.First()).OrderBy(o => o.ContactDivision.Code);

       //Create the Tabs and MultiPage pageviews
       foreach (Directory_BO.Employee div in distinctDivisions)
       {
           var tmpDivEmployees = tmpEmployees.Cast<Directory_BO.Employee>().Where(c => c.ContactDivision.ID == div.ContactDivision.ID);

           //Add Multipage for the Division
           Telerik.Web.UI.RadPageView tmpPageView = new Telerik.Web.UI.RadPageView();
           tmpPageView.ID = "radPV" + div.ContactDivision.Code;
           radMPEmployees.PageViews.Add(tmpPageView);

           //Add Tab for the Divison
           Telerik.Web.UI.RadTab tmpTab = new Telerik.Web.UI.RadTab((div.ContactDivision.Code != string.Empty ? div.ContactDivision.Name : "Not Listed") + " (" + tmpDivEmployees.Count() + ")", div.ContactDivision.ID.ToString());
           tmpTab.PageViewID = tmpPageView.ID;
           radTSEmployees.Tabs.Add(tmpTab);

           //Create and load the RadOrgChart
           Telerik.Web.UI.RadOrgChart tmpOrgChart = new Telerik.Web.UI.RadOrgChart();
           tmpOrgChart.ID = "radOC" + div.ContactDivision.Code;
           tmpOrgChart.EnableEmbeddedBaseStylesheet = false;
           tmpOrgChart.EnableEmbeddedSkins = false;
           tmpOrgChart.Skin = "IntertekEmployee";
           tmpOrgChart.GroupColumnCount = 3;
           tmpOrgChart.DisableDefaultImage = true;
           tmpOrgChart.ItemTemplate = new EmployeeItemTemplate();

           //Table to hold the data for the items
           DataTable itemsTable = new DataTable();
           itemsTable.Columns.Add("NodeID");
           itemsTable.Columns.Add("FullNameLink");
           itemsTable.Columns.Add("Title");
           itemsTable.Columns.Add("FullContactInfo");
           itemsTable.Columns.Add("EmployeeID");

           //Add the details of the employees to the itemTable
           foreach (Directory_BO.Employee tmpC in tmpDivEmployees)
               itemsTable.Rows.Add(new string[] { "1", tmpC.FullNameLink, tmpC.Title, tmpC.FullContactInfo, tmpC.ID.ToString() });

           //Bind the Employee List OrgChart
           tmpOrgChart.DataSource = itemsTable;
           tmpOrgChart.DataBind();

           //Add a top border
           Literal tmpLiteral = new Literal();
           tmpLiteral.Text = "<div style='border-top:solid 1px #AAAAAA;'></div>";

           //Add the RadOrgChart to the Mulitpage
           radMPEmployees.FindControl(tmpPageView.ID).Controls.Add(tmpLiteral);
           radMPEmployees.FindControl(tmpPageView.ID).Controls.Add(tmpOrgChart);
       }
   }

OrgChart align issue2.png Code: 

private void LoadOrgChart()
    {
        Directory_BLL.EmployeeManager ContactMgr = new Directory_BLL.EmployeeManager();

        //Table to define the nodes
        DataTable nodeTable = new DataTable();
        nodeTable.Columns.Add("ID");
        nodeTable.Columns.Add("ManagerID");

        //Table to hold the data for the items
        DataTable itemsTable = new DataTable();
        itemsTable.Columns.Add("NodeID");
        itemsTable.Columns.Add("ID");
        itemsTable.Columns.Add("FullName");
        itemsTable.Columns.Add("Title");
        itemsTable.Columns.Add("CityProvince");
        itemsTable.Columns.Add("ImageURL");

        //Get Contacts Manager
        var tmpCM = ContactMgr.GetEmployeeByID(ContactToDisplay.ManagerID);

        if (tmpCM.ID != 1)
        {
            //Get Contacts Managers employees
            var tmpCME = ContactMgr.GetEmployeesByManagerID(tmpCM.ID);

            //Get Contacts Employees
            var tmpCE = ContactMgr.GetEmployeesByManagerID(ContactToDisplay.ID);

            //Add the nodes to the nodesTable
            nodeTable.Rows.Add(new string[] { "1", null });
            nodeTable.Rows.Add(new string[] { "2", "1" });

            //Add the details of the employees to the itemTable
            itemsTable.Rows.Add(new string[] { "1", tmpCM.ID.ToString(), "<b>" + tmpCM.OrgChartFullNameLink + "</b>", tmpCM.Title, tmpCM.City + ", " + tmpCM.Province, "EmployeePhoto.ashx?img=thumb&id=" + tmpCM.ID });
            foreach (Directory_BO.Employee tmpC in tmpCME)
            {
                itemsTable.Rows.Add(new string[] { "2", tmpC.ID.ToString(), "<b>" + tmpC.OrgChartFullNameLink + "</b>", tmpC.Title, tmpC.City + ", " + tmpC.Province, "EmployeePhoto.ashx?img=thumb&id=" + tmpC.ID });
            }
            if (tmpCE.Count > 0)
            {
                nodeTable.Rows.Add(new string[] { "3", "2" });
                foreach (Directory_BO.Employee tmpC in tmpCE)
                {
                    itemsTable.Rows.Add(new string[] { "3", tmpC.ID.ToString(), "<b>" + tmpC.OrgChartFullNameLink + "</b>", tmpC.Title, tmpC.City + ", " + tmpC.Province, "EmployeePhoto.ashx?img=thumb&id=" + tmpC.ID });
                }
            }

            //Setup the relationships within the OrgChart
            radOrgChart.GroupEnabledBinding.NodeBindingSettings.DataFieldID = "ID";
            radOrgChart.GroupEnabledBinding.NodeBindingSettings.DataFieldParentID = "ManagerID";
            radOrgChart.GroupEnabledBinding.NodeBindingSettings.DataSource = nodeTable;

            radOrgChart.GroupEnabledBinding.GroupItemBindingSettings.DataFieldNodeID = "NodeID";
            radOrgChart.GroupEnabledBinding.GroupItemBindingSettings.DataFieldID = "ID";
            radOrgChart.GroupEnabledBinding.GroupItemBindingSettings.DataImageUrlField = "ImageURL";
            radOrgChart.GroupEnabledBinding.GroupItemBindingSettings.DataSource = itemsTable;

            //Bind the OrgChart
            radOrgChart.DataBind();
        }
        else
        {
            radTabOrgChart.Enabled = false;
        }
    }

OrgChart align issue2.png Markup:

<telerik:RadPageView ID="radPVOrgChart" runat="server">
           <telerik:RadOrgChart ID="radOrgChart" runat="server" GroupColumnCount="4" DisableDefaultImage="false"
               ClientIDMode="Static" Skin="Sitefinity" OnGroupItemDataBound="radOrgChart_GroupItemDataBound">
               <RenderedFields>
                   <ItemFields>
                       <telerik:OrgChartRenderedField DataField="FullName" />
                       <telerik:OrgChartRenderedField DataField="Title" />
                       <telerik:OrgChartRenderedField DataField="CityProvince" />
                   </ItemFields>
               </RenderedFields>
           </telerik:RadOrgChart>
       </telerik:RadPageView>

  

[Chris Salas]

Update, it appears that this is only an issue if the OrgChart is hidden at page render.  If the page is rendered with the OrgChart visible then it renders correctly.  

[Peter Filipov]

Hello Chris,

Thank you for contacting Telerik Support.

The RadOrgChart control is rendered from the server and it's ordered on the client with javascript. The issue that you experienced is caused because it is not possible to get outerWidth and outerHeight of elements which parent container has display:none style - it is a javascript limitation. In order to avoid messed appearance you need to reorder (by using javascript method _orderOrgChart) the RadOrgChat control before the parent control is shown. Please review the attached sample project.

I will be glad to assist you further.

Regards,
Peter Filipov
the Telerik team