Node Alignment Issue

3 posts, 1 answers
  1. Chris Salas
    Chris Salas avatar
    46 posts
    Member since:
    Oct 2009

    Posted 10 Jul 2012 Link to this post

    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>
     
     

  2. Chris Salas
    Chris Salas avatar
    46 posts
    Member since:
    Oct 2009

    Posted 10 Jul 2012 Link to this post

    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.  
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 11 Jul 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top