CollapseAll Then Expanding Individual Nodes Doesn't Refresh OrgChart Correctly

5 posts, 0 answers
  1. john81
    john81 avatar
    36 posts
    Member since:
    Jan 2010

    Posted 13 May 2014 Link to this post

    I implement Expand All and Collapse All buttons on my chart via the chart properties ExpandAllNodes and CollapseAllNodes.  That functionality works as expected.

    The problem arises when you collapse all nodes then individually start expanding nodes.  The chart has several problems.

    1.  It is not centering child nodes on expand.  The first child node gets drawn centered under the parent then the rest of the nodes get drawn to the right.  I would expect the all children nodes to be centered under a parent just like they are when the chart is first rendered.

    2.  Same level children nodes overwrite each other.  This is a pretty major bug in my opinion since the nodes just draw right over each other.  

    Is there a way to force the chart to redraw when expanding nodes so 1 and 2 are not an issue?

    See code below and attachments.  In chart_expanded_3rd_level_first_child.png the node "Peter" has 2 children nodes "Arnold" and "Mike".  When you click the + under node "Peter 1" its children overwrite one of the "Peter" node's children.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
      <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
                <telerik:RadButton ID="btnExpand" runat="server" Text="Expand All" OnClick="btnExpand_Click">
                </telerik:RadButton>
                <telerik:RadButton ID="btnCollapse" runat="server" Text="Collapse All" OnClick="btnCollapse_Click">
                </telerik:RadButton>           
                <br/>
     
              <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel">
                   <telerik:RadOrgChart ID="RadOrgChart1" runat="server" EnableCollapsing="true" Skin="Office2010Blue" />
              </telerik:RadAjaxPanel>
      
        </form>
    </body>
    </html>


    protected void Page_Load(object sender, EventArgs e)
    {
        var employees = CreateEmployees();
     
        RadOrgChart1.DataFieldID = "EmployeeID";
        RadOrgChart1.DataFieldParentID = "ParentID";
        RadOrgChart1.DataTextField = "Name";
        //RadOrgChart1.DataImageUrlField = "ImageUrl";
        RadOrgChart1.DataSource = employees;
        RadOrgChart1.DataBind();
    }
     
    private DataTable CreateEmployees()
    {
        var employees = new DataTable();
        employees.Columns.Add("EmployeeID");
        employees.Columns.Add("ParentID");
        employees.Columns.Add("Name");
        employees.Columns.Add("ImageUrl");
        employees.Rows.Add(new string[] { "1", null, "Kate", "~/Img/Northwind/Customers/LONEP.jpg" });
        employees.Rows.Add(new string[] { "2", "1", "Peter", "~/Img/Northwind/Customers/SAVEA.jpg" });
        employees.Rows.Add(new string[] { "21", "1", "Peter1", "~/Img/Northwind/Customers/SAVEA.jpg" });
        employees.Rows.Add(new string[] { "22", "1", "Peter2", "~/Img/Northwind/Customers/SAVEA.jpg" });
        employees.Rows.Add(new string[] { "23", "1", "Peter3", "~/Img/Northwind/Customers/SAVEA.jpg" });
        employees.Rows.Add(new string[] { "24", "1", "Peter4", "~/Img/Northwind/Customers/SAVEA.jpg" });
        employees.Rows.Add(new string[] { "25", "1", "Peter5", "~/Img/Northwind/Customers/SAVEA.jpg" });
        employees.Rows.Add(new string[] { "26", "1", "Peter6", "~/Img/Northwind/Customers/SAVEA.jpg" });
        employees.Rows.Add(new string[] { "27", "1", "Peter7", "~/Img/Northwind/Customers/SAVEA.jpg" });
     
        employees.Rows.Add(new string[] { "3", "2", "Arnold", "~/Img/Northwind/Customers/LACOR.jpg" });
     
        employees.Rows.Add(new string[] { "31", "21", "Arnold31", "~/Img/Northwind/Customers/LACOR.jpg" });
        employees.Rows.Add(new string[] { "32", "21", "Arnold32", "~/Img/Northwind/Customers/LACOR.jpg" });
        employees.Rows.Add(new string[] { "41", "22", "Arnold41", "~/Img/Northwind/Customers/LACOR.jpg" });
        employees.Rows.Add(new string[] { "42", "22", "Arnold42", "~/Img/Northwind/Customers/LACOR.jpg" });
        employees.Rows.Add(new string[] { "51", "23", "Arnold51", "~/Img/Northwind/Customers/LACOR.jpg" });
        employees.Rows.Add(new string[] { "52", "23", "Arnold52", "~/Img/Northwind/Customers/LACOR.jpg" });
     
     
        employees.Rows.Add(new string[] { "4", "3", "Tim", "~/Img/Northwind/Customers/GREAL.jpg" });
        employees.Rows.Add(new string[] { "5", "3", "Nora", "~/Img/Northwind/Customers/TRADH.jpg" });
        employees.Rows.Add(new string[] { "6", "4", "David", "~/Img/Northwind/Customers/CENTC.jpg" });
        employees.Rows.Add(new string[] { "7", "2", "Mike", "~/Img/Northwind/Customers/VAFFE.jpg" });
        return employees;
    }
     
    protected void btnCollapse_Click(object sender, EventArgs e)
    {
        RadOrgChart1.CollapseAllNodes();
    }
     
    protected void btnExpand_Click(object sender, EventArgs e)
    {
        RadOrgChart1.ExpandAllNodes();
    }


  2. john81
    john81 avatar
    36 posts
    Member since:
    Jan 2010

    Posted 13 May 2014 in reply to john81 Link to this post

    Forgot to mention this is only happening in IE 11.  The chart works as expected in Chrome and FireFox.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 16 May 2014 Link to this post

    Hello,

    I would like to clarify that I am not able to replicate the issue. Here you may watch a video that shows the provided application behavior at my side. Please note that I am testing with our 2014.1 403 version under IE11. Could you please specify whether I am missing something or list some instructions how to replicate it ?

    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.

     
  5. john81
    john81 avatar
    36 posts
    Member since:
    Jan 2010

    Posted 16 May 2014 in reply to Boyan Dimitrov Link to this post

    I'm using version 2012.3.1308.40.  Unfortunately we do not have the option of moving to a newer version of Telerik at this time.  I've worked around this issue by putting in a meta tag to force IE10 compatibility.
  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 21 May 2014 Link to this post

    Hello,

    I would like to clarify that support for IE11 was added in our Q3 2013 SP1 (version 2013.3.1114) . Please note that the IE11 browser was officially released on 17 October 2013 so in order to avoid any problems under IE 11 I would suggest updating at least to Q3 2013 SP1 (version 2013.3.1114).


    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.

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