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


Using JQuery with the OrgChart Component

jQuery is a fantastic Javascript library that greatly simplifies writing complex Javascript.  This page uses a jQuery library, ThickBox, and the OrgChart Component.

Belinda  Richmond
More Details ...
Caz  Hale
More Details ...
Chris  Norton
More Details ...
Debra  Peterson
More Details ...
Nathan  Kingston
More Details ...
Jane  Haltington
More Details ...
Harold  Duffy
More Details ...
Terry  Partridge
More Details ...


Code:

Html Markup

1:  <cc1:DataBoundOrganisationChart ID="DataBoundOrganisationChart1" runat="server" DataSourceID="SqlDataSource1"
2:             PrimaryKey="EmployeeId" MaximumDepth="3">
3:             <ChartItem BackgroundImageStyle="Gradient3" BorderStyle="Gradient1" Colour="Green">
4:                 <ItemStyle ForeColor="Black" />
5:             </ChartItem>                        
6:             <DetailedTemplate>
7:                 <%#Container["First_Name"] %>&nbsp;<%#Container["Last_Name"] %><br />
8:                 <a href='JQueryOrgchartPopUp.aspx?EmployeeId=<%#Container["EmployeeId"]
                %>&keepThis=true&TB_iframe=true&height=230&width=300'
9:                     
            title='Details For <%#Container["First_Name"].Trim() %>
                <%#Container["Last_Name"].Trim() %>'
10:                     class="thickbox">More Details ...</a>
11:             </DetailedTemplate>           
12:         </cc1:DataBoundOrganisationChart>