Monday, October 26, 2009

Silverlight Organization Chart – Part 1 – Read XML file

I’m sorry I did not post the details of how to do the Silverlight organization chart as was expected.

I’ll not go in details of how to create a Silverlight application; you can see these details here.

In my organization chart I make option either to read the nodes from XML file for read them from a web service (reading the data from Active Directory), I’m here will just talk about the XML file.

Point 1: the XML file

My XML file looks like this:

<?xml version="1.0" encoding="utf-8" ?>




    <Name>Mostafa El Mashad </Name>


    <Department> </Department>







    <Name>Ahmed Sadek</Name>

    <Title>HR Manager</Title>








    <Name>Hanan Youssef</Name>

    <Title>Sales Manager</Title>







and you can add as much as person nodes as you want.

ID: Is the identity of this person
Name: The person name
Title: His job title
Department: The department he is working in
Extension: Phone extension
Email: his email address
ManagerID: The identity value used in his manager data

In our example:
Mostafa – the CEO – he has no manager, so the ManagerID is blank
Hanan and Ahmed are reporting to Mostafa, so the ManagerID equal 1, which is Mostafa’s ID

Note: this XML file will be deployed with the XAP file at the end.

Point 2: The Person class

I’ll need to make a class to represent the Person object, and while reading the data from the XML file I’ll put it in an list of Persons.

public List<Person> persons = new List<Person>();

Also I’ll need some extra data to be stored with each person, like:
Level : The person level, in our example, Mostafa #1, Ahmed and Hanan #2
SubNodes: How many person are reporting to the current, 2 are reporting to Mostafa
HiddenSubNodes: The same as the SubNodes in case the node is not collapsed.
NodeOrder: The order of this node between the same level under the same parent
MinChildWidth: The display minimum width allowed for the child nodes
X: The X coordinate of the node on the screen, the Y position is calculated from the node level
StartX: The parent X
Opened : is this node displayed or not
Collapsed: Is this node’s child are displayed or not

Point 3: Reading the XML file

In the page load of my Silverlight control, I’ll call the method that will read the XML file:

private void LoadXMLFile()


            WebClient xmlClient = new WebClient();

            xmlClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(XMLFileLoaded);

            xmlClient.DownloadStringAsync(new Uri("OrgChart_Data.xml", UriKind.RelativeOrAbsolute));


void XMLFileLoaded(object sender, DownloadStringCompletedEventArgs e)


            if (e.Error == null)


                Person firstNode = Person.GetPerson("OrgChartRootNode", "LINK Development", "", "", "", "", "");

                firstNode.MinChildWidth = totalWidth;



                XElement lobjDocument = XElement.Parse(e.Result.ToString());


                var Result = from view1 in lobjDocument.Descendants("Person")

                             select new Person


                                 Name = (string)view1.Element("Name"),

                                 ID = (string)view1.Element("ID"),

                                 ManagerID = (string)view1.Element("ManagerID"),

                                 Title = (string)view1.Element("Title"),

                                 Department = (string)view1.Element("Department"),

                                 Extension = (string)view1.Element("Extension"),

                                 Email = (string)view1.Element("Email")



                Person[] nodes = Result.ToArray();


                for (int i = 0; i < nodes.Length; i++)


                    if (string.IsNullOrEmpty(nodes[i].ManagerID))


                        nodes[i].ManagerID = "OrgChartRootNode";







Here in my control, if any node did not has a ManagerID value, I’ll consider it as a parent node just under the organization root element.

In the last line of code, you will see a call to a Start method, which will start calculating and building the organization chart nodes. And we will talk about the calculations in a separate post soon isA.


hathiwala said...


Could u post Person class?

Josh, Annie, and Isaiah said...

Osama, I would be interested in seeing what the Person class looks like as well. Is there a chance you could post/email it? Thanks!


brain said...

Could u post Person class?

muti^^ said...

could you explain about person class,,,??
cause i can't use this in my code,,,
thank u...
can you send that to my email,,

muti^^ said...

could you explain about person class??
i can't use that,, cause i'm not understand...
thank u,,
please send to my email

Osama Mourad said...

You can download the source code