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


ASP.NET Org Chart Component - Templates And Backgrounds

The Org Chart Component is a databound template control. A templated control does not itself provide a user interface (UI). The UI for the control is supplied by a page developer through inline templates which allow a page developer to customize the UI for the control. Developers can use the template editor in Visual Studio.NET to easily create a UI for their org chart.

In addition the Org Chart Component comes with a number pre-defined background in different colours and different styles. Developers are able to define their own background if none of the inbuilt styles are suitable. style easily

The templates supported are:

  • DetailedTemplate is used to create the user interface for items in the org chart
  • EditTemplate is displayed when an end user selects a specific org chart item to edit
  • HeaderTemplate displayed at the top of the chart
  • FooterTemplate displayed at the foot of the chart
  • SummaryTemplate alternative to DetailedTemplate.  Used to show a summary of each nodes data
  • StackTemplate used when the lower levels of the chart are being draw in the stacked mode
  • NoDataTemplate displayed when the data source returns an empty dataset

The example below allows you to select some of the in-built backgrounds

Set background Image PropertiesColour : Shape :
Smith
Pinter
Hindes
Green


Code:

C# Code

   1:     protected void Page_Load(object sender, EventArgs e)
   2:      {
   3:          // Fill the drop down lists with the values from the Org Chart
   4:          if (!IsPostBack)
   5:          {
   6:              drpColour.DataSource = Enum.GetNames(typeof(OrgChart.Core.BackgroundImageColour));
   7:              drpColour.DataBind();
   8:   
   9:              drpShape.DataSource = Enum.GetNames(typeof(OrgChart.Core.BackgroundImageStyle));
  10:              drpShape.DataBind();
  11:   
  12:              DropDownList1.DataSource = Enum.GetNames(typeof(OrgChart.Core.BackgroundImageSize));
  13:              DropDownList1.DataBind();
  14:          }        
  15:      }
  16:   
  17:      protected override void OnPreRender(EventArgs e)
  18:      {
  19:          // Set the Chart colour, style and size from the values in the drop down list
  20:          XmlChart.ChartItem.Colour = 
  21:                  (BackgroundImageColour)Enum.Parse(typeof(BackgroundImageColour), drpColour.SelectedValue);
  22:          XmlChart.ChartItem.BorderStyle = 
  23:                  (BackgroundImageStyle)Enum.Parse(typeof(BackgroundImageStyle), drpShape.SelectedValue);
  24:          XmlChart.ChartItem.Size = 
  25:                  (BackgroundImageSize)Enum.Parse(typeof(BackgroundImageSize), DropDownList1.SelectedValue);
  26:          XmlChart.DataBind();
  27:          
  28:   
  29:          base.OnPreRender(e);
  30:      }

Html Markup

   1:  <table>
   2:          <tr>
   3:              <td valign="top">
   4:                  <fieldset>
   5:                      <legend>Set background Image Properties</legend>Colour :
   6:                      <asp:DropDownList ID="drpColour" runat="server" AutoPostBack="true">
   7:                      </asp:DropDownList>
   8:                      Shape :
   9:                      <asp:DropDownList ID="drpShape" runat="server" AutoPostBack="true">
  10:                      </asp:DropDownList>
  11:                      <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
  12:                          <asp:ListItem Selected="True">Small</asp:ListItem>
  13:                          <asp:ListItem>Medium</asp:ListItem>
  14:                          <asp:ListItem>Large</asp:ListItem>
  15:                      </asp:DropDownList>
  16:                  </fieldset>
  17:              </td>
  18:          </tr>
  19:          <tr>
  20:              <td>
  21:                  <cc1:XmlBoundOrganisationChart ID="XmlChart" runat="server" DataSourceID="XmlData">
  22:                  </cc1:XmlBoundOrganisationChart>
  23:              </td>
  24:          </tr>
  25:      </table>