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.
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 |
| 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 |
|
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
|