Flexible and versatile organisational charts for ASP.NET using
Org Chart Component.


ASP.NET Org Chart Component - Binding To Events

This pages demonstrates usage of the OnItemDataBound event. The chart is bound to a DataTable consisting of a number of randomly generated nodes. The page binds to the OnItemDataBound event exposed by the organisation chart control and varies the node background colour depending on the number of children belonging to that org chart item.

The DetailedTemplate is used to define the UI for the org chart item and comprises of a label and two buttons. The buttons are bound to functions that will either add a new node or remove an existing one.  The label is used to indicate the number of children that the org chart item has.

In addition OrgChartComponent exposes the following events:

  • ItemCancelled Raised when the end user uses the cancel button to close the EditItem template
  • ItemCommand Raised when the end user clicks on one of the navigation bar controls
  • ItemCreated Raised when a chart item is created but prior to being databound
  • ItemDataBound Raised when a chart item is databound
  • ItemPreRender Raised just before an org chart item is rendered
  • ItemSelected Raised by the end user by selecting an org chart item
  • ItemDropped Raised when an item is dragged and dropped onto another item
  • New in version 3.3 TierCreating Raised when the OrgChartComponent creates a new tier of the organisation chart

RootNode
Node-2
Node-4
Node-3


Code:

C# Code

1: protected void Page_Load(object sender, EventArgs e)
2:     {
3:         // Bind the chart to a data source
4:         DataChart.DataSource = Data;
5:         // Hook up the ItemDataBound event
6:         DataChart.ItemDataBound += 
            new OrganisationChartItemEventHandler(ItemDataBound);
7:         // Display the chart
8:         DataChart.DataBind();
9:     }
10:  
11:     /// <summary>
12:     /// This event handler is invoked once per item in the organisation chart
13:     /// </summary>
14:     /// <param name="sender"></param>
15:     /// <param name="e"></param>
16:     void ItemDataBound(object sender, OrganisationChartItemEventArgs e)
17:     {
18:         Label l = e.Item.FindControl(
            "Label1") as Label;
19:         // Find the number of children from the Item object. 
20:         // And set the colour of the label accordingly. 
21:         switch (e.Item.NumberOfChildren)
22:         {
23:             case 0: l.BackColor = Color.Gainsboro; break;
24:             case 1: l.BackColor = Color.Blue; break;
25:             case 2: l.BackColor = Color.Green; break;
26:             case 3: l.BackColor = Color.Red; break;
27:             default: l.BackColor = Color.Gold; break;
28:         }
29:     }
30:  
31:     /// <summary>
32:     /// This method is called by the Add button created by the DetailedTemplate
33:     /// </summary>
34:     /// <param name="sender"></param>
35:     /// <param name="e"></param>
36:     protected void btnAdd_Click(object sender, EventArgs e)
37:     {
38:         Button s = (Button)sender;
39:         // Create a new row and add it to the data source.
40:         int managerId = int.Parse(s.CommandArgument);
41:         int newId = Data.Rows.Count + 1;
42:  
43:         addRow(Data, newId, managerId,"New Node" + newId);
44:         DataChart.DataBind();
45:     }

Html Markup

1:  <cc1:DataBoundOrganisationChart ID="DataChart" runat="server">
2:                 <NavigationBarSettings Visible="False" />                
3:                 <ChartItem Colour="Grey">
4:                 </ChartItem>
5:                 <DetailedTemplate>
6:                     <div>
7:                         
            <asp:Label ID="Label1" runat="server" Text='<%# Container.DataElement("NodeName")
                        %>'
8:                             Font-Bold="True" Font-Italic="True"></asp:Label><br />
9:                         
            <asp:Button ID="Button1" runat="server" CommandArgument='<%# Container.DataElement("UniqueId")%>'
10:                             OnClick="btnAdd_Click" Text="+" />
11:                         
            <asp:Button ID="Button2" runat="server" CommandArgument='<%# Container.DataElement("UniqueId")%>'
12:                             OnClick="btnRemove_Click" Text="-" />
13:                     
            </div>
14:                 </DetailedTemplate>
15:             </cc1:DataBoundOrganisationChart>