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


ASP.NET Org Chart Component - Command And Navigation Bars

The organisation chart component features a command bar that allows the end users to:

  •  Set the maximum depth of chart they can view
  • Switch between "Summary" and "Detailed" view
  • Switch between "Stack" and "Nornal" drawing alogrithm
  • Export data to Excel
    

And a navigation bar that allows users to:

  • Navigate through the org chart using org chart navigate up and org chart navigate down
  • Select an individual item within the hierarchical chart with Organisation Chart - Select Item
  • Use to temporarily hide the siblings of one of the nodes in the organisation
  • Use custom icons to configure the appearance of the navigation bar

Please Select A Chart Item
Organisation Chart Commands Depth   
The Company Org Chart
Name : Tom
email
Extn : 1234
Name : Sarah
email
Extn : 1234
Name : Peter
email
Extn : 1234
Name : Paul
email
Extn : 1234
Name : Phil
email
Extn : 1234
Name : John
email
Extn : 1234
Name : Jen
email
Extn : 1234
Name : Jamie
email
Extn : 1234
Name : Jack
email
Extn : 1234
Name : Tim
email
Extn : 1234



Code:

C# Code

   1:      protected override void OnInit(EventArgs e)
   2:      {
   3:          base.OnInit(e);
   4:   
   5:          // Show the Navigation Bar
   6:          XmlBoundOrganisationChart1.NavigationBarSettings.Visible = true;
   7:          // prevent the "Up" arrow drawing for the first ChartItem
   8:          XmlBoundOrganisationChart1.NavigationBarSettings.InitialItemId = 1;
   9:          // Show the "Select" Button
  10:          XmlBoundOrganisationChart1.NavigationBarSettings.ShowSelectButton = true;
  11:   
  12:          // Show the Command Bar
  13:          XmlBoundOrganisationChart1.CommandBarSettings.Visible = true;
  14:          // Show the "Stack" Checkbox
  15:          XmlBoundOrganisationChart1.CommandBarSettings.ShowStack = true;
  16:   
  17:          // Set the initial stack depth to 3 
  18:          XmlBoundOrganisationChart1.StackItem.StackDepth = 3;
  19:   
  20:   
  21:          XmlBoundOrganisationChart1.StackItem.ToolTip = "Stack Item {name}";
  22:   
  23:   
  24:      }
  25:   
  26:      protected void Page_Load(object sender, EventArgs e)
  27:      {
  28:          // Create the chart
  29:          XmlBoundOrganisationChart1.DataBind();
  30:      }
  31:   
  32:   
  33:      protected override void OnPreRender(EventArgs e)
  34:      {
  35:          base.OnPreRender(e);
  36:   
  37:          // Switch the template size depending on whether the chart user has selected "Summary" or "Full" detail
  38:          if (XmlBoundOrganisationChart1.SummaryItem.UseSummaryTemplate)
  39:          {
  40:              XmlBoundOrganisationChart1.ChartItem.Size = BackgroundImageSize.Small;
  41:          }
  42:          else
  43:          {
  44:              XmlBoundOrganisationChart1.ChartItem.Size = BackgroundImageSize.Medium;
  45:          }
  46:   
  47:          // bind here to reflect any navigation changes.
  48:          XmlBoundOrganisationChart1.DataBind();
  49:      }
  50:   
  51:   
  52:      /// <summary>
  53:      /// This method is called when the user selects an org chart item
  54:      /// </summary>
  55:      /// <param name="sender">The orgchart control</param>
  56:      /// <param name="e"></param>
  57:      protected void XmlBoundOrganisationChart1_ItemSelected(object sender, OrganisationChartItemCommandEventArgs e)
  58:      {
  59:   
  60:          // Set the value of the label to the item name
  61:          lblSelectedChartItem.Text = string.Format("Selected : {0}", e.Item["Name"]);
  62:      }

Html Markup

   1:  <cc1:XmlBoundOrganisationChart ID="XmlBoundOrganisationChart1" runat="server" DataSourceID="XmlDataSource1"
   2:                  OnItemSelected="XmlBoundOrganisationChart1_ItemSelected"
   3:                  Width="800px" ChartTitle="The Company Org Chart">
   4:                  <ChartItem BorderStyle="Gradient1" Colour="Grey" Size="Medium">
   5:                  </ChartItem>
   6:                  <SummaryItem BorderStyle="Gradient2" Colour="Grey" Size="Small">
   7:                  </SummaryItem>
   8:                  <StackItem BorderStyle="Gradient2" Colour="Yellow" ShowBackgroundImage="True" Size="Narrow">
   9:                  </StackItem>
  10:                  <NavigationBarSettings Visible="True" ShowSelectButton="True" ShowNavigationButtons="True">
  11:                  </NavigationBarSettings>
  12:                  <CommandBarSettings ShowStack="False" Title="Organisation Chart Commands" LevelLabelText="Depth"
  13:                      SummaryLabelText="Summary" StackLabelText="Stack"></CommandBarSettings>
  14:                  <AssistantItem AssistantHeight="0" BorderStyle="Oval" Colour="Brown" Size="Medium">
  15:                  </AssistantItem>
  16:                  <DetailedTemplate>
  17:                      Name :
  18:                      <asp:Label ID="Label1" runat="server" Text='<%#Container.DataElement("name")%>'></asp:Label>
  19:                      <br />
  20:                      <a href='mailto://<%#Container.DataElement("name")%>@thecompany.com'>email</a><br />
  21:                      Extn : 1234
  22:                  </DetailedTemplate>
  23:                  <SummaryTemplate>
  24:                      <asp:Label ID="Label1" runat="server" Text='<%#Container.DataElement("name")%>'></asp:Label>
  25:                  </SummaryTemplate>
  26:                  <StackTemplate>
  27:                      <div>
  28:                          <asp:Label ID="Label1" runat="server" Text='<%#Container.DataElement("name")%>'></asp:Label>
  29:                      </div>
  30:                  </StackTemplate>
  31:                  <EditTemplate>
  32:                      Name :
  33:                      <asp:Label ID="Label1" runat="server" Text='<%#Container.DataElement("name")%>'></asp:Label>
  34:                      <br />
  35:                      <a href='mailto://<%#Container.DataElement("name")%>@thecompany.com'>email</a><br />
  36:                      Extn : 1234
  37:                  </EditTemplate>
  38:                  <EditItem BorderStyle="Oval" Colour="Red" Size="Large">
  39:                  </EditItem>
  40:              </cc1:XmlBoundOrganisationChart>