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


ASP.NET Org Chart Component - Using The Edit Template To Make An Editable Org Chart

The .NET OrgChartComponent supports in-line editing via the EditTemplate. Page developers can easily create interactive org charts that alllow end users to modify data on the chart.

Select one of the Chart Items below by either clicking the select button or by clicking in the item itself.


Big Cheese

Bill

Sally

Sue

Ben

Fred


Code:

C# Code

   1:  protected void Page_Load(object sender, EventArgs e)
   2:      {
   3:          // Bind the chart to our data ( in this instance it is a DataTable ) 
   4:          DataChart.DataSource = Data;
   5:          // Create the chart
   6:          DataChart.DataBind();        
   7:      }
   8:   
   9:     
  10:     
  11:      /// <summary>
  12:      /// This method is invoked when the "Update" link button is clicked by the user
  13:      /// </summary>    
  14:      protected void lnkUpdate_Click(object sender, EventArgs e)
  15:      {
  16:          // Get the unique Id from the LinkButton and the 
  17:          // new name from the text box
  18:          LinkButton lb = sender as LinkButton;
  19:          TextBox tb = lb.Parent.FindControl("TextBox1") as TextBox;
  20:   
  21:          // Update the "Database"
  22:          UpdateRow(lb.CommandArgument, tb.Text);
  23:   
  24:          //Cancel the selected Chart Item
  25:          DataChart.SelectedValue = null;
  26:      }
  27:   
  28:      /// <summary>
  29:      /// This method is invoked when the "Cancel" link button is clicked by the user
  30:      /// </summary>
  31:      protected void lnkCancel_Click(object sender, EventArgs e)
  32:      {
  33:          // Cancel the selected Chart Item
  34:          DataChart.SelectedValue = null;
  35:      }

Html Markup

   1:  <cc1:DataBoundOrganisationChart ID="DataChart" runat="server">
   2:          <DetailedTemplate>
   3:              <br />
   4:              <asp:Label ID="Label1" runat="server" Text='<%#Container.DataElement("Name")%>' />
   5:          </DetailedTemplate>
   6:          <NavigationBarSettings Visible="True" ShowSelectButton="True" ShowHidePeersButton="False"
   7:              ShowNavigationButtons="False">
   8:          </NavigationBarSettings>
   9:          <EditTemplate>
  10:              <br />
  11:              <asp:TextBox ID="TextBox1" Columns="10" runat="server" Text='<%#Container.DataElement("Name")%>' />
  12:              <asp:LinkButton ID="lnkCancel" runat="server" OnClick="lnkCancel_Click">Cancel</asp:LinkButton>&nbsp;&nbsp;&nbsp;
  13:              <asp:LinkButton ID="lnkUpdate" CommandArgument='<%#Container.DataElement("UniqueId")%>'
  14:                  CommandName="Update" runat="server" OnClick="lnkUpdate_Click">Update</asp:LinkButton>
  15:          </EditTemplate>
  16:          <ChartItem Colour="Yellow" BackgroundImageStyle="Gradient5">
  17:          </ChartItem>
  18:          <EditItem Colour="Red" Size="Large" BorderStyle="Gradient5">
  19:          </EditItem>
  20:      </cc1:DataBoundOrganisationChart>