This is a migrated thread and some comments may be shown as answers.

CollapseAll Then Expanding Individual Nodes Doesn't Refresh OrgChart Correctly

4 Answers 187 Views

OrgChart

This is a migrated thread and some comments may be shown as answers.

john81 asked on 13 May 2014, 02:21 PM

chart_load.png

chart_collapsed.png

chart_expanded_3rd_level_first_child.png

chart_expanded_3rd_level_second_child.png

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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();

}

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

CollapseAll Then Expanding Individual Nodes Doesn't Refresh OrgChart Correctly

4 Answers, 1 is accepted