Organisation Chart Component - Documentation
The Org Chart Component package contains two ASP.NET server controls DataBoundOrganisationChart and
XmlBoundOrganisationChart. The controls are functionally identical.
Choose the appropriate org chart control to bind to your data source.
Getting Started
The documents and links below are the ideal way to get started with the Org Chart
Component. We strongly recommend that you familiarise yourself with the functionality
of the available via the demo site
and that you download and install the component. and
demo site.
|
Documentation
|
Link
|
Summary
|
Getting Started with the data
bound organisation chart
|
databound
tutorial
|
Step by step article walking through the process of creating an org chart from a
database.
|
|
Data Table Design
|
data table design
and
here
|
An article discussing the different methods of representing an organisation structure
within a SQL database
|
|
C# Tips
|
C#
Tips
|
Examples, samples, hints and tips for programming orgchart in c# .net.
|
|
Demo Site
|
demo.orgchartcomponent.com
|
The demo site contains working examples of the Org Chart in action. Download
the demo site and run it on your own development machine.
|
|
Class Library
|
doc.orgchartcomponent.com
|
A class library covering the main classes comprising the OrgChart Component
|
Main Properties and Usage
The table below describes some of the main properties used to control the behavior
of the Org Chart Component. The properties can be either set in code or via
the properties editor in Visual Studio.NET.
|
Name
|
Type
|
Usage
|
|
ChartFooterHtml
|
String
|
HTML that will be displayed as the org chart footer. This property is superseded
by the Footer template.
|
|
ChartHeadingHtml
|
string
|
HTML that will be displayed as the org chart header. This property is superseded
by the Header template.
|
|
ChartTitle
|
string
|
The title that will be displayed for this organisation chart. The title is
encapsulated within a <legend> tag.
|
|
ShowFrame
|
boolean
|
If true then a the Org Chart will be contained within a <fieldset> tag.
|
|
ChartItemToolTip
|
string
|
The tool tip that will be displayed when the end user hovers over a chart item.
If not set then this defaults to : "Direct reports: {0} Total reports:{1}"
|
|
CommandBarSettings
|
CommandBarSettings
|
Controls the behavior of the command bar. See the Command Bar section.
The command bar provides the end users the ability to export to excel, limit the
depth of the chart and switch on or off the stacking or summary drawing modes. |
|
ExportSettings |
ExportSettings |
Controls the behavior of the export to
Excel function. See the Export To Excel section |
|
MaximumDepth |
int |
This property limits the drawing of the organisation chart to the depth specified. |
|
NavigationBarSettings |
NavBarsettings |
Controls the behavior of the Navigation Bar. See the Navigation Bar
section below.
The navigation bar provides the end users the ability to navigate the org chart and to select individual chart items. |
|
RenderTopDown |
boolean |
This property controls the drawing direction of the Org Chart. |
|
ToolTip |
string |
This is the tool tip that will be displayed if the end user hovers over the
header, foorter or command bar. |
|
AssistantItem |
AssistantItem |
Controls the rendering of assistants. |
|
ChartItem |
ChartItem |
Controls the rendering of standard org chart items. |
|
EditItem |
EditItem |
Controls the rendering of the currently selected chart item |
|
StackItem |
StackItem |
Controls the rendering of the chart items that are being drawn in the stacked
mode. |
|
SummaryItem |
SummaryItem |
Controls the rendering of the chart items that are being drawn in the summary
mode |
|
HideLines |
boolean |
If set to true then the organisation chart renders without lines |
|
LineColour |
LineColour |
Sets the colour of the org chart lines |
|
LineWidth |
int |
sets the thickness in pixels of the organisation chart lines. |
|
VerticalLineHeight |
int |
Sets the height in pixels of the of the vertical lines. This defaults to
20 pixels. |
|
ParentField |
string |
This property defines the name of the parent field. That is the the field
that will be used to identify the parent of the a chart Item.
This property is only applicable to the DataBoundOrganisationChart control. |
|
PrimaryKey |
string |
This property defines the primary key. That is the field in the data
source that uniquely identifies each chart item.
This property is only applicable to the DataBoundOrganisationChart control. |
|
StartValue |
object |
This is the starting value for the Organisation Chart. This property
defaults to 1 and controls where in the hierarchy the org chart will be drawn
from.
This property is only applicable to the DataBoundOrganisationChart control. |
|
HeaderStyle |
TableItemStyle |
Holds style properties for the org chart header |
|
FooterStyle |
TableItemStyle |
Holds the style propeties for the org chart footer |
|
Name
|
Type
|
Usage
|
|
CommandBarStyle
|
Style
|
The Style that will be applied to the command bar
|
|
Export Text
|
string
|
The wording for the export to Excel link
|
|
ExportToolTip
|
string
|
The tooltip for the export to Excel link
|
|
LevelLabelText
|
string
|
The text for the level drop down list
|
|
ShowExport
|
boolean
|
Show or hide the export to Excel link
|
|
ShowMaxDepth
|
boolean
|
Show or hide the maximum depth selector
|
|
ShowStack
|
boolean
|
Show or hide the Stack Children selector
|
|
ShowSummary
|
boolean
|
Show or hide the Summary selector
|
|
ShowTitle
|
boolean
|
Show or hide the command bar title
|
|
StackLabelText
|
string
|
The text for the stack label
|
|
Title
|
string
|
The title for this command bar. This is rendered inside a <legend> tag
|
|
Visible
|
boolean
|
Show or hide the command bar
|
|
Name
|
Type
|
Usage
|
|
AutoGenerateHeaders
|
boolean
|
Automatically generate the headers for the exported data from the data source |
|
Delimiter |
char |
The character to be used to delimit fields. This is defaults to a comma. |
|
FieldHeaders |
string |
This is a comma separated string of the field headers to be used. This
property is used if AutoGenerateHeaders is set to false and ShowHeaders to True. |
|
Fields |
string |
A comma separated string of the fields that should be exported to Excel |
|
MimeType |
string |
The MIME Type that wil lbe written into the browser header as part of the
export. This defaults to text/csv. |
|
QuoteValues |
boolean |
If true then each exported field will be encapsulated in quotes. |
|
ShowHeaders |
boolean |
If true then field headers are exported as part of the export process. |
|
Name
|
Type
|
Usage
|
|
IconSize |
IconSize
|
Sets the size of the navigation bar buttons to either Small or Medium |
|
NavDownImageUrl |
Url |
Url to the image that should be used for the "Navigate Down" image button.
If left blank the org chart will use the default images. |
|
NavigateDownToolTIp |
string |
The tool tip to be shown when the end user hovers over the navigate down button. |
|
NavigateUpToolTip |
string |
The tool tip to be shown when the end user hovers over the navigate up button |
|
NavSelectImageUrl |
Url |
Url to the image that should be used for the "Select Item" image button.
If left blank the org chart will use the default images. |
|
NavUpImageUrl |
Url |
Url to the image that should be used for the "Navigate Up" image button.
If left blank the org chart will use the default images. |
|
ShowHidePeersButton |
boolean |
Show or hide the "Hide Peers" image button. |
|
ShowNavigationButtons |
boolean |
Show or hide the navigation buttons |
|
ShowSelectButton |
boolean |
Show or hide the select chart item button |
|
Visible |
boolean |
Show or hide the navigation bar |
These properties apply to the Assistant, Chart, Edit, Stack and Summary Items
|
Name
|
Type
|
Usage
|
|
BackgroundImageStyle
|
enum |
This sets the background style to one of the seven built in styles |
|
Colour |
enum |
This sets the background image to one of the pre-defined colour schemes |
|
HtmlTemplate |
string |
This property allows the page developer to define the HTML to be rendered for
this type of chart item.
The property takes any HTML and in addition uses parameter substitution to place
values from the data source into the appropriate place in the HTML.
To use parameter substitution wrap the field name required in {}. For
example to display the field "Name" in bold the developer would set HtmlTemplate
to "<b>{Name}</b>"
In addition to the HtmlTemplate developers may also use the WebUserControl
property to specify a web user control or use the template editor in Visual
Studio.NET |
|
ImageUrl |
Url |
The Url to the image that should be used as the background to this org chart
item |
|
ItemStyle |
Style |
The style collection to be applied to this chart item |
|
ShowBackgroundImage |
boolean |
if true then the a background image will be rendered for this chart item.
|
|
Size |
enum |
The pre-defined sizes for the built in styles. This can be Small, Medium,
Narrow or Large. |
|
ToolTip |
string |
The tool tip that will be displayed when the end user hovers over this
particular chart item.
The tool tip uses parameter substitution to allow each tip to be customised to
the individual chart item.
To define a tip that displays the email address of a person the developer would
set the ToolTip property to "email : {emailAddress}"
|
|
WebUserControl |
string |
This is the full path the web user control ( .ascx ) that will be used to render
this chart item.
In addition to the WebUserControl property developers may also use the
HtmlTemplate property to specify HTML to be used or use the template editor in
Visual Studio.NET
|
|