JavaScript (JS, Vanilla, Angular, React, Node.JS)
Frequently Asked Questions (exontrol)
JS.1:
The eXSuite/JS library includes several HTML5 standalone-components, written in pure JavaScript, that uses no third-party libraries. The eXSuite/JS library includes different type of components such as:
  • Multiple-Columns Tree-Grid controls (gantt, tree, grid, list, pivot, ...)
  • Graph controls (swim-lane, surface, organization charts, ...)
  • Menu controls (menu, toolbar, radial-menu)
  • Miscellaneous controls (gauge, calendar, scrollbar, ...)
The FAQ \ Get Started article describes how to start using the /JS component within your WEB applications.
JS.2:
After you purchased the eXSuite/JS library you got a runtime-license key that allows you to use the eXSuite/JS library (or any of our /JS components) with your web application. If you are not specifying the runtime-license key you may get any of the following messages:
  • the license is missing
  • the license is invalid
  • the license is expired

In order to use the eXSuite/JS library you have to call exontrol.license() method as in the following samples:

<html>
	<head>
		<script type="text/javascript" src="exontrol.common.min.js"></script>
		<script type="text/javascript" src="exontrol.patch.min.js"></script>
		<script type="text/javascript" src="exmenu/exontrol.menu.min.js"></script>
		<script type="text/javascript" src="exmenu/exontrol.menu.def.js"></script>
		<script type="text/javascript" src="extree/exontrol.tree.min.js"></script>
		<script type="text/javascript" src="extree/exontrol.tree.def.js"></script>
		<script type="text/javascript" src="exgantt/exontrol.gantt.min.js"></script>
		<script type="text/javascript" src="exgantt/exontrol.gantt.def.js"></script>
	</head>
	<body>
		<canvas id="cvsGantt" width="1024" height="640">
		</canvas>
		<script>
			exontrol.license("your runtime license key");
			var oGantt = new exontrol.Gantt( "cvsGantt",
			{
				data: "xml/datasource.xml", // loads the datasource.xml file
			});
		</script>
	</body>
</html>

The exontrol.license() method is defined by exontrol.common.min.js file (<script type="text/javascript" src="exontrol.common.min.js"></script>, var exontrol = require("app/exontrol.common.min.js"), ... ). Once this call is made you can use any component of eXSuite/JS with your web application.
JS.3:

Each of our /JS component provides a Listeners field of exontrol.Lts type that holds the events of the /JS component. The exontrol.Lts class supports the following methods:

  • Add(name, callback) (or add(name, callback)) method adds a handler for the specified event (name indicates the name of the event to handle)
  • remove(name[, callback]) method removes the event handler
  • clear() method clears all the handlers for all events (previously added using the Add or add method)
  • forEach(callback, thisArg) method enumerates the handlers for the events, where callback is a function of callback(name) type and name specifies the name of the event
  • lock() method prevents firing any event until the unlock() method is called (use the lock() method to lock the events)
  • unlock() method resumes firing the events, previously locked by lock() method (use the unlock() method to unlock the events)

The help folder includes the documentation for the /JS component. The Events section lists and describes all events the control supports. Each event provides zero or one parameter, that may include one or more members or fields (parameters).

For instance, the onselchange(oEvent) event (of exontrol.Gantt type) notifies that the control's selection has been changed (items section), where oEvent parameter could be one of the following:

  • oEvent {null}, indicates that the control has no selected items
  • oEvent {Item}, indicates an object of Item type that defines the control's single-item selected
  • oEvent {array}, specifies an array of [Item] type that holds all selected items within the control

The following snippet of code shows you how to get list all the events the /JS component currently supports: 

oGantt.Listeners.forEach(function(name)
{
  console.log(name);
})

where oGantt is an object of exontrol.Gantt type. The Listeners member is supported by all of our /JS components. Run the script and the output displays the following:

onselchange
onclick
onchange
onsort
onfilter
onload
onerror
onscroll
onadditem
onaddgroupitem
onremoveitem
onaddcolumn
onremovecolumn
ondatechange
onchartselchange
ondateselchange
oncreatebar
onbarresize
onbarparentchange
onallowlink
oncreatelink

which specifies the list of the events the /JS component currently supports.

The following snippet of code shows you how to add a handler for each event the control provides:

oGantt.Listeners.forEach(function(name)
{
  oGantt.Listeners.Add(name, function(oEvent)
  {
    console.log(name, oEvent);
  })
})

and the output shows as:

ondateselchange (1) [{...}]
onclick {dblClick: false, button: 1, modifiers: 0, view: t, level: i, ...}
onbarresize {item: h, key: '', bar: s}
onchange {object: s, action: 'chart-object'}
ondatechange t {oT: t, oLts: exontrol.Lts, lI: 2, lsX: 1, oLvs: e, ...}
ondatechange t {oT: t, oLts: exontrol.Lts, lI: 2, lsX: 1, oLvs: e, ...}

The following sample shows how you can add a handler for onselchange event only:

oGantt.Listeners.Add("onselchange", function(oEvent)
{
  console.log(oEvent)
})
JS.4:

Each of our /JS component provides a Shortcuts field of exontrol.Sts type that holds the keyboard shortcuts of the /JS component. The exontrol.Sts class supports the following methods:

  • Add(shortcut, callback, thisArg, description), associates a callback to a keyboard shortcut. The callback(oShortcut) is invoked once the user presses the keyboard shortcut. The shortcut parameter is a string that specifies the keyboard combination. The shortcut parameter supports meta keys as SHIFT, ALT or CTRL to be combined with any other key using the + sign. The shortcut parameter supports digits from 0 to 9, letters from A to Z, and the following special keys (: keycode) 
    Accept: 30
Add: 107
ALT: 18
Apps: 93
ArrowDown: 40
ArrowLeft: 37
ArrowRight: 39
ArrowUp: 38
ATTN: 246
Backslash: 220
Backspace: 8
BrowserBack: 166
BrowserFavorites: 171
BrowserForward: 167
BrowserHome: 172
BrowserRefresh: 168
BrowserSearch: 170
BrowserStop: 169
Cancel: 3
Capital: 20
CapsLock: 20
Clear: 12
Comma: 188
ContextMenu: 93
Control: 17
Convert: 28
CRSEL: 247
CTRL: 17
Decimal: 110
Delete: 46
Divide: 111
Down: 40
End: 35
Enter: 13
EREOF: 249
Esc: 27
Escape: 27
Execute: 43
EXSEL: 248
F1: 112
F10: 121
F11: 122
F12: 123
F13: 124
F14: 125
F15: 126
F16: 127
F17: 128
F18: 129
F19: 130
F2: 113
F20: 131
F21: 132
F22: 133
F23: 134
F24: 135
F3: 114
F4: 115
F5: 116
F6: 117
F7: 118
F8: 119
F9: 120
Final: 24
Hangeul: 21
Hangul: 21
Hanja: 25
Help: 47
Home: 36
ICO_00: 228
ICO_CLEAR: 230
ICO_HELP: 227
Insert: 45
Junja: 23
Kana: 21
Kanji: 25
LaunchApplication1: 182
LaunchApplication2: 183
LaunchMail: 180
LaunchMediaSelect: 181
LButton: 1
LCONTROL: 162
Left: 37
LMENU: 164
LSHIFT: 160
LWin: 91
MButton: 4
MediaNextTrack: 176
MediaPlayPause: 179
MediaPrevTrack: 177
MediaStop: 178
Menu: 18
META: 91
Minus: 189
ModeChange: 31
Multiply: 106
Next: 34
NONAME: 252
NonConvert: 29
NumLock: 144
NumPad0: 96
NumPad1: 97
NumPad2: 98
NumPad3: 99
NumPad4: 100
NumPad5: 101
NumPad6: 102
NumPad7: 103
NumPad8: 104
NumPad9: 105
OEM_1: 186
OEM_102: 226
OEM_2: 191
OEM_3: 192
OEM_4: 219
OEM_5: 220
OEM_6: 221
OEM_7: 222
OEM_8: 223
OEM_ATTN: 240
OEM_AUTO: 243
OEM_AX: 225
OEM_BACKTAB: 245
OEM_CLEAR: 254
OEM_COMMA: 188
OEM_COPY: 242
OEM_CUSEL: 239
OEM_ENLW: 244
OEM_FINISH: 241
OEM_FJ_JISHO: 146
OEM_FJ_LOYA: 149
OEM_FJ_MASSHOU: 147
OEM_FJ_ROYA: 150
OEM_FJ_TOUROKU: 148
OEM_JUMP: 234
OEM_MINUS: 189
OEM_NEC_EQUAL: 146
OEM_PA1: 235
OEM_PA2: 236
OEM_PA3: 237
OEM_PERIOD: 190
OEM_PLUS: 187
OEM_RESET: 233
OEM_WSCTRL: 238
PA1: 253
PACKET: 231
PageDown: 34
PageUp: 33
Pause: 19
Period: 190
PLAY: 250
Plus: 187
Print: 42
PrintScr: 44
PrintScreen: 44
Prior: 33
PROCESSKEY: 229
RButton: 2
RCONTROL: 163
Return: 13
Right: 39
RMENU: 165
RSHIFT: 161
RWin: 92
Scroll: 145
ScrollLock: 145
Select: 41
Separator: 108
SHIFT: 16
Slash: 191
Sleep: 95
Snapshot: 44
Space: 32
Subtract: 109
Tab: 9
Up: 38
VolumeDown: 174
VolumeMute: 173
VolumeUp: 175
WIN: 91
XButton1: 5
XButton2: 6
ZOOM: 251
    For instance, "CTRL + Z" indicates that the shortcut is activated if the user press CTRL and Z keys.
  • Remove(shortcut[, thisArg]), removes the shortcut
  • Clear(), removes all shortcuts
  • Lock(shortcut, thisArg), locks the shortcuts, until the Unlock() method is called. The shortcut's callback is not invoked while the shortcut is locked and the user presses the keyboard shortcuts. You can lock all shortcut for all controls Lock(null,null), you can lock the shortcut for all control Lock(shortcut,null), or any shortcut of a specified control using Lock(null,thisArg) method
  • Unlock(shortcut, thisArg), unlocks the shortcut(s)
  • forEach(callback, thisArg), enumerates all shortcuts, where callback is a function of callback(oShortcut) type

For instance, let's say we need to remove the control's selection (bars, links or items) once the user presses the Delete key. In order to provide keyboard support for the component, the <canvas> element you must include the tabIndex attribute, as <canvas id="cvsGantt" width="1024" height="640" tabIndex="0">.

The following sample adds a shortcut to Delete key to call the control's RemoveSelection() method (removes the selected-items):

oGantt.Shortcuts.Add("Delete", oGantt.RemoveSelection, oGantt);

where oGantt is an object of exontrol.Gantt type.

The following sample adds a shortcut to Delete key to call the chart's RemoveSelection() method, if there are bars, else the control's RemoveSelection() method (removes the selected-bars if any, else removes the selected-items):

oGantt.Shortcuts.Add("Delete",function(oShortcut)
{
  oGantt.Chart.RemoveSelection() || oGantt.RemoveSelection();
})

where oGantt is an object of exontrol.Gantt type.

The following sample displays the shortcuts the control currently supports: 

oGantt.Shortcuts.forEach(function(oShortcut)
{
  console.log(oShortcut);
})

where oGantt is an object of exontrol.Gantt type. Run the script and the output displays the following:

{shortcut: 'CTRL+SHIFT', description: 'toggles the type of exchange-windows', callback: �, thisArg: o, keyState: 0}
{shortcut: 'CTRL+Z', description: 'undos the last exchange-window operation.', callback: �, thisArg: o, keyState: -1}
{shortcut: 'CTRL+Y', description: 'redos the last exchange-window operation.', callback: �, thisArg: o, keyState: -1}
{shortcut: 'ALT+ArrowDown', description: 'focuses the filter-prompt', callback: �, thisArg: n, keyState: -1}
{shortcut: 'ALT+ArrowUp', description: 'focuses the filter-prompt', callback: �, thisArg: n, keyState: -1}

JS.5:

A Shape object represents a set of properties or attributes to apply to an UI part of the component. For instance, the background color of a node within the exontrol.OrgChart control. Almost all UI parts of the components support shapes. A property or field of the object that includes "shape" supports shapes, such as "shape", "shapes", "cellShape", Shape / GetShape() / SetShape(value) , Shapes / GetShapes() / SetShapes(value), CellShapes / GetCellShapes() / SetCellShapes(value).

The following screen shot shows the 'Anita' node of exontrol.OrgChart control with its default shape:

and with a different shape:

shape:
{
	fillColor: "yellow",
	frameColor: "gray",
	pattern: 6,
	patternColor: "rgba(0,0,0,0.25)",
	primitive: "round",
	shadow:
	{
		x: 4,
		y: 4,
		blur: 4
	}
}

it shows as:

The shape (exontrol.Def.Shape) property or field can include one or more of the following attributes/options:

  • opacity {number}, sets the opacity level of the object, as a number between 0.0 (fully transparent) and 1.0 (fully opaque)
    null {null}, the opacity field is ignored
    0 {number}, completely transparent
    0.5 {number}, semi-transparent
    1 {number}, fully-opaque
  • client {string}, specifies a collection of up to four expressions that can define a different client area to show the object (see also padding). A string expression of "[expression, expression, expression, expression]" type, that determines the x, y, width and height of the new client. The client field must starts with "[" and ends with "]", else it has no effect. Each expression supports the following keywords:
    • x {number}, defines the object's default-left position
    • y {number}, defines the object's default-top position
    • width {number}, indicates the default-width of the object
    • height {number}, indicates the default-width of the object.
    null {null}, the client field is ignored
    "[x+64,y-32]" {string}, displays the object at a different position (offset by 64-pixels on x-axis, and 32-pixels up on y-axis)
    "[x-8,y-4,width+2*8,height+2*4]" {string}, is equivalent of padding on [8,4]
    "[x+(width-16)/2,y+(height-16)/2,16,16]" {string}, centers a 16x16 rectangle inside the client
  • pad {(number|string|array)}, defines how much the object's client area is increased or decreased (see also client). Defines a numeric, string or array value that determines the pad to apply.
    null {null}, indicates that the pad field is ignored
    4 {number}, increases the object's client with 2 4-pixels, which includes width and height
    "8,4" {string}, increases the object's width with 2 8-pixels and object's height with 2 4-pixels
    [8,4] {array}, increases the object's width with 2 8-pixels and object's height with 2 4-pixels
  • fillColor {string}, defines the color to show the object's background.
    null {null}, indicates that the fillColor field is ignored
    "transparent" {string}, fills the object's background with rgba(0,0,0,0)/transparent color
    "red" {string}, fills the object's background with red color
    "#ff0000" {string}, fills the object's background with red color
    "rgba(255,0,0,0.5)" {string}, fills the object's background with semi-tranparent red color
  • fillGradientColor {string}, defines the gradient type and colors to show the object's background. The fillColor field defines the starting color. The fillGradientColor field has effect only if the fillColor field is defined (not null or undefined). The first field of the fillGradientColor field could start with any of the following:
    • "vertical", defines a vertical-gradient (default)
    • "horizontal", defines a horizontal-gradient
    • "diagonal", defines a diagonal-gradient
    • "radial", defines a radial-gradient
    null {null}, specifies that the fillGradientColor field is ignored, so no gradient is applied on the object's background
    "black" {string}, specifies a vertical-gradient that starts from fillColor and ends on black
    "horizontal,red,green,blue" {string}, specifies a horizontal-gradient that starts from fillColor, continues with red, green and ends on blue
    "diagonal,red,rgba(0,255,0,0.5),blue" {string}, specifies a diagonal-gradient that starts from fillColor, continues with red, 50% green and ends on blue
    "radial,black" {string}, specifies a radial/circular-gradient that starts from fillColor and ends on black
  • clientText {string}, specifies a collection of up to four expressions that defines a new client area to display the text (offset, pad), relative to the shape's client. A string expression of "[expression, expression, expression, expression]" type, that determines the x, y, width and height of the new client. The clientText field must starts with "[" and ends with "]", else it has no effect. Each expression supports the following keywords:
    • x {number}, defines the object's default-left position
    • y {number}, defines the object's default-top position
    • width {number}, indicates the default-width of the object
    • height {number}, indicates the default-width of the object.
    null {null}, the clientText field is ignored
    "[x+64,y-32]" {string}, displays the object at a different position (offset by 64-pixels on x-axis, and 32-pixels up on y-axis)
    "[x-8,y-4,width+2*8,height+2*4]" {string}, is equivalent of padding on [8,4]
    "[x+(width-16)/2,y+(height-16)/2,16,16]" {string}, centers a 16x16 rectangle inside the client
  • text {string}, defines the (additional )caption to be displayed on the object. The text supports ex-HTML tags as explained here.
    null {null}, the text field is ignored
    "this is a <fgcolor red>test</fgcolor>" {string}, where "test" is displayed in red color
    "this is a <b><off 4>test</off></b> of ex-HTML caption" {string}, where "test" is displayed in bold with a different vertical-offset
  • formatText {exontrol.DrawTextFormatEnum}, specifies the format to display the object's caption or text, as a combination of one or more exontrol.DrawTextFormatEnum flags. The exontrol.DrawTextFormatEnum type support the following flags:
    • exTextAlignTop (0x00), justifies the text to the top of the rectangle
    • exTextAlignLeft (0x00), aligns text to the left
    • exTextAlignCenter (0x01), centers text horizontally in the rectangle
    • exTextAlignRight (0x02), aligns text to the right
    • exTextAlignVCenter (0x04), centers text vertically
    • exTextAlignBottom (0x08), justifies the text to the bottom of the rectangle.
    • exTextAlignMask (0x0F), specifies the mask for text's alignment.
    • exTextWordBreak (0x10), breaks words. Lines are automatically broken between words if a word would extend past the edge of the rectangle specified by the lpRect parameter. A carriage return-line feed sequence also breaks the line. If this is not specified, output is on one line.
    • exTextSingleLine (0x20), displays text on a single line only. Carriage returns and line feeds do not break the line.
    • exTextExpandTabs (0x40), expands tab characters. The default number of characters per tab is eight.
    • exPlainText (0x80), treats the text as plain text.
    • exTextNoClip (0x0100), draws without clipping.
    • exHTMLTextNoColors (0x0200), ignores the <fgcolor> and </bgcolor> tags.
    • exTextCalcRect (0x0400), determines the width and height of the text.
    • exHTMLTextNoTags (0x0800), ignores all HTML tags.
    • exTextPathEllipsis (0x4000), for displayed text, replaces characters in the middle of the string with ellipses so that the result fits in the specified rectangle. If the string contains backslash (\) characters, exTextPathEllipsis preserves as much as possible of the text after the last backslash.
    • exTextEndEllipsis (0x8000), for displayed text, if the end of a string does not fit in the rectangle, it is truncated and ellipses are added. If a word that is not at the end of the string goes beyond the limits of the rectangle, it is truncated without ellipses.
    • exTextWordEllipsis (0x040000), truncates any word that does not fit in the rectangle and adds ellipses.
    null {null}, defines a single-line centered text (equivalent of exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignCenter | exontrol.DrawTextFormatEnum.exTextAlignVCenter | exontrol.DrawTextFormatEnum.exTextWordEllipsis )
    32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line text
    0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line text right/bottom-aligned
  • tfi {(string|exontrol.TFI)}, specifies the font-attributes (bold, italic, ...) to apply on the caption.
    null {null}, the tfi field is ignored
    "bold monospace 16 <fg blue>" {string}, defines Monospace font of 16px height, bold and blue
    {bold: true} {object}, the caption shows in bold
    {fontName: "monospace"} {object}, the caption shows with a different font
  • clipText {boolean}, indicates whether the caption is clipped to object.
    false {boolean}, the text/caption is not clipped
    true {boolean}, the text/caption is clipped to the object's client-rectangle
  • frameColor {string}, defines the color to show the object's frame (see also primitive)
    null {null}, specifies no frame
    "transparent" {string}, defines a transparent frame
    "red" {string}, defines a red-frame
    "#ff0000" {string}, defines a red-frame
    "rgba(255,0,0,0.5)" {string}, defines a semi-transparent red-frame
  • frameSize {number}, defines size of the object's frame/border (requires frameColor)
    null {null}, draws the frame, only if the frameColor is defined
    0 {number}, shows no frame
    4 {number}, defines a 4-pixels frame
  • frameDash {array}, defines style of the object's frame (requires frameColor). An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated.
    null {null}, defines a solid frame
    [] {array}, indicates a solid frame
    2 {number}, will become [2, 2, ...]
    [5, 15, 25] {array}, will become [5, 15, 25, 5, 15, 25, ...]
  • frameJoin {string}, determines how two connecting segments into the object's frame are joined together (requires frameColor). There are three possible values for this property as follows::
    • "round", rounds off the corners of a object by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width
    • "bevel", fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment
    • "miter", connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area.
    null {null}, defines a "miter" join
    "round" {string}, rounds off the corners of a object by filling an additional sector of disc centered at the common endpoint of connected segments.
  • frameCap {string}, determines how the end points of every line into the object's frame are drawn (requires frameColor, frameDash). There are three possible values for this property as follows:
    • "butt", the ends of lines are squared off at the endpoints
    • "round", the ends of lines are rounded
    • "square", the ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness
    null {null}, indicates "but" style
    "round" {string}, the ends of lines are rounded
  • pattern {exontrol.PatternEnum}, defines the pattern to show on the object's background (see also patternColor). The exontrol.PatternEnum type defines the following values:
    • exPatternEmpty (0), defines no pattern
    • exPatternSolid (1), defines a solid-pattern
    • exPatternDot (2), defines a dot-pattern
    • exPatternShadow (3), defines a shadow-pattern
    • exPatternNDot (4), defines a not-dot-pattern
    • exPatternFDiagonal (5), defines a forward-diagonal-pattern
    • exPatternBDiagonal (6), defines a backward-diagonal-pattern
    • exPatternDiagCross (7), defines a cross-diagonal-pattern
    • exPatternVertical (8), defines a vertical-pattern
    • exPatternHorizontal (9), defines a horizontal-pattern
    • exPatternCross (10), defines a cross-pattern
    • exPatternBrick (11), defines a brick-pattern
    • exPatternYard (12), defines a yard-pattern
    null {null}, defines no pattern
    0 or exontrol.PatternEnum.exPatternEmpty {number}, defines an empty pattern (no pattern)
    7 or exontrol.PatternEnum.exPatternDiagCross {number}, defines a cross-diagonal-pattern
  • patternColor {string}, defines the color to show the object's pattern (see also pattern). The patternColor property has effect only if the pattern property is defined.
    null {null}, indicates a black-color
    "red" {string}, defines a red-pattern
    "#ff0000" {string}, defines a red-pattern
    "rgba(255,0,0,0.5)" {string}, defines a semi-transparent red-pattern
  • shadow {object}, keeps information about the box's shadow, as an object of {color, blur, x, y} type. The shadow object includes any of following fields:
    • blur {number}, defines the blur level for shadows (the blur field is required, else color, x or y fields have no effect)
    • color {string}, defines the shadow's color
    • x {number}, defines the horizontal distance of the shadow from the object
    • y {number}, defines the vertical distance of the shadow from the object
    null {null}, indicates no shadow
    {blur: 4} {string}, defines a 4-pixels wide shadow
    {blur: 4, x: 2, y: 2} {string}, defines a 4-pixels wide shadow
  • primitive {(string|callback)}, defines the type of frame the object is displaying (see also pArg). The primitive can be any of the following predefined values:
    • "Rect" {string}, defines a rectangular-object
    • "RoundRect" {string}, defines a round rectangular-object. The pArg.x, pArg.y define the radius of round-corners.
    • "BevelRect" {string}, defines a bevel rectangular-object. The pArg.x, pArg.y define the radius of round-corners.
    • "Ellipse" {string}, defines an elliptic-object
    • "Pie" {string}, defines a pie-object. The pArg.startAngle property defines the angle (radians) the pie starts from. The pArg.sweepAngle property defines the length (radians) of the pie.
    • "Arc" {string}, defines an arc-object. The pArg.startAngle property defines the angle (radians) the arc starts from. The pArg.sweepAngle property defines the length (radians) of the arc.
    • "Oval" {string}, defines an oval-object.
    • "Circle" {string}, defines a circle-object.
    • "Triangle" {string}, defines a triangle-object.
    • "EllipticPolygon" {string}, defines an elliptic-polygon-object. The pArg.edges property defines the number of edges within the elliptic-polygon. The pArg.startAngle property defines the angle (radians) the elliptic-polygon starts from.
    • "Polygon" {string}, defines a polygon-object. The pArg.points property defines points of the polygon.
    • "Star" {string}, defines a star-object. The pArg.edges property defines the number of edges of the star. The pArg.startAngle property defines the angle (radians) the star-object starts from. The pArg.deep defines the star's depth, while pArg.tilt defines the star's tile as a number between 0 and 1
    • "Spline" {string}, defines the Catmull-Rom spline-primitive (a curve that goes through its control points). The pArg.points property defines the control-points of the curve. The pArg.tension property specifies the tension of the curve, as a value ptFrom 0(round) to 1 (rectangular). The pArg.alpha specifies the alpha of the curve (0.5 by default), while pArg.closed defines a closed curve
    • "Summary" {string}, defines a summary-object (outlines the summary-bar)
    • "Deadline" {string}, defines a deadline-object (outlines the deadline-bar)

    Also, the primitive can be a function of callback(ctx, client) type (let you define any type of shape), where:

    ctx {CanvasRenderingContext2D}, indicates the context to draw
    client {number[]} An array of [x, y, width, height] type that specifies the rectangle to be clipped by primitive
    null {null}, defines a rectangular-object
    "Ellipse" {string}, defines an elliptic-object
  • pArg {object}, defines an object that holds different options to apply on the primitive. The pArg field supports any of the following fields:
    • x {number}, defines the x-radius of the round-rectangle object. The x field has effect only if the primitive is: "RoundRect" or "BevelRect"
    • y {number}, defines the y-radius of the round-rectangle object. The y field has effect only if the primitive is: "RoundRect" or "BevelRect"
    • startAngle {number}, defines the angle (radians) the object's primitive starts from. The startAngle field has effect only if the primitive is: "Arc", "Pie", "EllipticPolygon" or "Star"
    • sweepAngle {number}, defines the length (as an angle in radians) of the object's primitive. The sweepAngle field has effect only if the primitive is: "Arc" or "Pie"
    • edges {number}, defines the number of edges of the object's primitive. It should be greater or equal than 3. The edges field has effect only if the primitive is: "EllipticPolygon" or "Star"
    • points {array}, defines the points object's polygon, as an array of [[x,y]] or [{x,y}] type. There must be more than 3-points defined. The points field has effect only if the primitive is: "Polygon" or "Spline"
    • deep {number}, defines star's deep (defines the isotoxal star-polygon's deepness). The deep field has effect only if the primitive is: "Star"
    • tilt {number}, defines star's tilt, as a number between 0 and 1. The tilt field has effect only if the primitive is: "Star"
     
  • draw {callback}, specifies a function of callback(ctx, client, clientShape, oShapeData) type to let you perform custom drawing on the current shape. By default, the draw field is null, which indicates that it has no effect. The draw callback supports up to four parameters as explained:
    ctx {CanvasRenderingContext2D}, An object of CanvasRenderingContext2D type that specifies the context to draw
    client {number[]}, Indicates an array of [x,y,width,height] type that specifies the original client area to paint the shape
    clientShape {number[]}, Indicates an array of [x,y,width,height] type that specifies the client area to paint the shape
    oShapeData {object}, Indicates an extra-data associated with the shape
    The following function draws a percent-bar inside the node, based on the percent field of the Options: 
    function (ctx, client, clientShape, oShapeData)
{
	client = client.slice();
	client[2] = client[2] * oShapeData.node.Options.percent;
	ctx.fillStyle = "rgba(0,0,255,0.25)";
	ctx.fillRect.apply(ctx,client);
	console.log(exontrol.ToString.Quote(oShapeData))
}

    The console.log(exontrol.ToString.Quote(oShapeData)) statement is provided for debugging purpose only, to display the information the oShapeData parameter is carrying. The type of oShapeData parameter varies from the control to control. For instance, for exontrol.OrgChart the oShapeData parameter is an object of {node, expandType} type, that specifies the node the shape is applied too (or child, assistant or group expand/collapse glyphs in case the shape is applied to them too)

JS.6:

Some UI parts of the control supports different shapes on different states, such as normal, hover, click or disabled. In other words, you can define the shape to apply on the UI part once mouse pointer hovers it, clicks it or it is disabled. The Shape field can be an object of {normal, hover, click, disabled} type. The normal, hover, click and disabled are objects of exontrol.Def.Shape type.

Currently, the following UI parts support normal, hover, click and disabled shapes:

  • any item, column(header) of the exontrol.Tree, exontrol.Pivot, exontrol.Gantt component
  • any element of the exontrol.Surface, exontrol.Swimlane component
  • any node or expand/collapse glyphs of the exontrol.OrgChart component
  • any UI part of the exontrol.ScrollBar component
  • any UI part of the exontrol.Calendar component
  • any UI part of the exontrol.Menu component

Shortly, for any UI part mentioned above you can specify a normal, hover, click or disabled shape.

The following sample inflates the node's client area once the mouse-pointer hovers or clicks it: 

var oOrgChart = new exontrol.OrgChart('cvsOrgChart',
{
	singleSel: 0
})

oOrgChart.Root.AddChild( 
{
	caption: "A",
	pad: 8,
	shape: 
	{
		normal:
		{
			frameColor: "gray",
			primitive: "Circle",
		},
		hover:
		{
			fillColor: "rgba(0,0,0,0.05)",
			client: "[x-4,y-4,width+8,height+8]"
		},
		click:
		{
			fillColor: "rgba(0,0,0,0.2)",
			client: "[x-8,y-8,width+16,height+16]"
		}
	}
})
JS.7:

The Shapes property specifies the shapes to apply on different group of UI parts. For instance, how a column's header shows or how an element is displayed.

For instance, the exontrol.OrgChart's shapes option can define the shape (or visual appearance) for the following UI parts:

  • "node" (node), defines the visual appearance for any node
  • "nodea" (assistant-node), defines the visual appearance for assistant-nodes
  • "nodeg" (group-node), defines the visual appearance for group-nodes
  • "expand", specifies the visual appearance for expand/collapse glyphs
  • "select" (selection), defines the visual appearance for selected nodes
  • "frameFit", defines the visual-appearance to display the frame while fitting nodes into the control's client area by drag
  • "frameSel", defines the visual appearance to display a frame while selecting nodes by drag
  • "frameDrag", specifies the visual appearance to display a frame while dragging the nodes
The shapes field defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance. 

The format of shapes property is:

"shape(part),shape(part),..."
where:
  • "shape", defines the shape to apply on the UI part as one of the following:

    ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
    ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
    ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
    ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
    ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
    ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
    ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
    ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
    ◦ specifies the name of the field within the exontrol.Shapes.OrgChart object (while it starts with a lowercase letter, such as nodeA which refers to exontrol.Shapes.OrgChart.nodeA shape)
    ◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)

  • "part", defines the name of the part the shape is applied on

For instance:

"button(x),Button(y)" indicates that exontrol.Shapes.OrgChart.button is applied on part "x", while exontrol.Shapes.Button is applied to "y" part
"button(x,y),Button(y)" indicates that exontrol.Shapes.OrgChart.button is applied on part "x", , while exontrol.Shapes.OrgChart.button merged with exontrol.Shapes.Button is applied on y

By default, the shapes / Shapes / GetShapes() option / property / method of the exontrol.OrgChart control is:

"node(node),nodeA(nodea),nodeG(nodeg),Expand(expand),frameSel(select),FrameSel(frameSel),FrameFit(frameFit),Empty(frameDrag)"

that's translated to:

  • node(node), every node on the chart is shown using the exontrol.Shapes.OrgChart.node shape ()
  • nodeA(nodea), every assistant-node on the chart is shown using the exontrol.Shapes.OrgChart.nodeA shape ()
  • nodeG(nodeg), every group-node on the chart is shown using the exontrol.Shapes.OrgChart.nodeG shape ()
  • Expand(expand), expand/collapse glyphs are shown using the exontrol.Shapes.Expand shape ()
  • frameSel(select), the selected-nodes displays over the exontrol.Shapes.OrgChart.frameSel shape ()
  • FrameSel(frameSel), defines the visual appearance to display a frame while selecting nodes by drag using the exontrol.Shapes.FrameSel shape ()
  • FrameFit(frameFit), defines the visual-appearance to display the frame while fitting nodes into the control's client area by drag using the exontrol.Shapes.FrameFit shape ()
  • Empty(frameDrag), specifies the visual appearance to display a frame while dragging the nodes using exontrol.Shapes.Empty ()
and so the chart looks as:

If the shapes property is changed to:

"Button(node),Expand(expand),rgba(0,0,255,0.25)(select),rgba(0,0,255,0.5)(frameSel),FrameFit(frameFit),Empty(frameDrag)"

we get something like:
JS.8:

The tfi field of exontrol.TFI type (Tfi property, GetTfi() / SetTfi(value) method) gets or sets the font attributes to apply on the entire control (tfi member of the control's options) or on UI parts of the control (tfi member of the shape object). The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or "bold 16px monospace" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

The tfi option can be configured using any of the following methods:

  • "[font-style] [font-variant] [font-weight] [font-size]/[font-height] [font-family]" {string} format, mirroring the structure returned by the CSS font property, where:
    • [font-style]: Defines the style of the font. Common values include:
      • normal
      • italic
      • oblique
    • [font-variant]: Specifies the variant of the font. Common values include:
      • normal
      • small-caps
    • [font-weight]: Indicates the weight (or boldness) of the font. Common values include:
      • normal
      • bold
      • bolder
      • lighter
      • Numeric values from 100 to 900 (e.g., 400 for normal, 700 for bold)
    • [font-size]: Defines the size of the font. It can be specified in various units such as:
      • Pixels (e.g., 16px)
      • Em units (e.g., 1em)
      • Percentages (e.g., 100%)
      • Points (e.g., 12pt)
    • [font-height]: Optional and defines the line height, specifying the space between lines of text. It follows the font size and is separated by a slash (e.g., 16px/1.5).
    • [font-family]: Specifies the font family to use. Multiple font families can be listed, separated by commas, to provide fallback options. Examples include:
      • Arial
      • "Times New Roman"
      • Georgia
      • Generic family names like serif, sans-serif, monospace
    For instance, oControl.Tfi = getComputedStyle(document.body).font, ensures that the control uses the document's font.
  • Any combination of the following flags separated by spaces. For instance, oControl.Tfi = "<fgColor blue> bold 16 cursive", shows the control in bold and blue using the 'Cursive' font family with a font size of 16 pixels.
  • TFI {object}, where the object supports fields such as: bold, italic, underline, strikeout, fontName, fontSize, fgColor, bgColor, shaColor, outColor and graColor. For instance, oControl.Tfi = {fontName: "cursive", fontSize: 16, fgColor: "blue"}, shows the control in bold and blue using the 'Cursive' font family with a font size of 16 pixels.

The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:

  • bold, displays the text in bold (equivalent of <b> tag)
  • italic, displays the text in italics (equivalent of <i> tag)
  • underline, underlines the text (equivalent of <u> tag)
  • strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
  • <fontName name>, specifies the font's family (equivalent of <font name> tag)
  • <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
  • <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
  • <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
  • <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
  • <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)

Any other word within the tfi field that's not recognized as a keyword is interpreted as:

  • name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
  • size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)

For instance, "bold monospace 16 <fg blue>" defines Monospace font of 16px height, bold and blue

The tfi field as object supports any of the following fields:

  • bold {boolean}, displays the text in bold (equivalent of <b> tag)
  • italic {boolean}, displays the text in italics (equivalent of <i> tag)
  • underline {boolean}, underlines the text (equivalent of <u> tag)
  • strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
  • fontName {string}, specifies the font's family (equivalent of <font name> tag)
  • fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
  • fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
  • bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
  • shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
    • color {string}, defines the color of the text's shadow (CSScolor)
    • width {number}, defines the size of the text's shadow
    • offset {number}, defines the offset to show the text's shadow relative to the text
  • outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
    • color {string}, defines the gradient-color (CSScolor)
    • mode {number}, defines the gradient mode as a value between 0 and 4
    • blend {number}, defines the gradient blend as a value between 0 and 1

For instance, { bold: true, fontName: "monospace", fontSize: 16, fgColor: "blue" } equivalent of "bold monospace 16 <fg blue>" defines Monospace font of 16px height, bold and blue

CSSColor or CSS legal color values can be specified by the following methods:

  • Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
  • Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
  • RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
  • RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
  • HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
  • HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
  • Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.
JS.9:
Any caption the /JS component displays supports exHTML tags. For instance, the caption / Caption / GetCaption() / SetCaption(value) method of the Column object specifies the caption the column shows into the control's header. For instance, "Column <b>1</b>" shows as "Column 1". Shortly, you can use exHTML tags to specify different font attributes for different parts of the caption.

The following exHTML tags support additions as explained:

  • <fgcolor=RRGGBB>?</fgcolor> displays text with a specified foreground color. The fgcolor supports also <fgcolor CSSColor>?</fgcolor> format where CSSColor can be any CSS legal color values, as explained bellow. For example, "<fgcolor blue>caption</fgcolor>" shows "caption" in blue.
  • <bgcolor=RRGGBB>?</bgcolor> displays text with a specified background color. The bgcolor supports also <bgcolor CSSColor>?</bgcolor> format where CSSColor can be any CSS legal color values, as explained bellow. For example, "<bgcolor blue>caption</bgcolor>" shows "caption"'s background in blue.
  • <gra rrggbb;mode;blend> ... </gra> defines a gradient text. The gra supports also <gra CSSColor;mode;blend> ... </gra> format where CSSColor can be any CSS legal color values, as explained bellow. For example, "<gra blue;1;1>caption</gra>" shows "caption" in gradient (from black (current foreground color) to blue.
  • <out rrggbb;width> ... </out> shows the text with outlined characters. The out supports also <out CSSColor;width> ... </out> format where CSSColor can be any CSS legal color values, as explained bellow. For example, "<out blue;2>caption</out>" shows "caption" outlined.
  • <sha rrggbb;width;offset> ... </sha> define a text with a shadow The out supports also <sha CSSColor;width;offset> ... </sha> format where CSSColor can be any CSS legal color values, as explained bellow. For example, "<sha blue;4;2>caption</sha>" shows "caption" with a blue shadow.
  • <img>number[:width]</img> inserts an icon inside the text. This syntax is not supported, instead you have to use the <img>key[:width]</img> as explained next.
  • <img>key[:width]</img> inserts a custom size picture into the text being previously loaded using the exontrol.HTMLPicture.Add(key, source) method.

CSSColor or CSS legal color values can be specified by the following methods:

  • Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
  • Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
  • RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
  • RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
  • HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
  • HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
  • Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.

In conclusion, the following statements are equivalents:

  • <fgcolor=0000FF>caption</fgcolor>
  • <fgcolor #0000FF>caption</fgcolor>
  • <fgcolor #0000FFFF>caption</fgcolor>
  • <fgcolor rgb(0,0,255)>caption</fgcolor>
  • <fgcolor rgba(0,0,255,1)>caption</fgcolor>
  • <fgcolor hsl(240, 100%, 50%)>caption</fgcolor>
  • <fgcolor hsla(240, 100%, 50%,1)>caption</fgcolor>
  • <fgcolor blue>caption</fgcolor>

For example, if you need to display plain-text only (ignore the exHTML tags), you need to add exontrol.DrawTextFormatEnum.exPlainText flag to ft / formatText / GetFormatText() / SetFormatText(value) property. The following sample adds a column named "Plain" where all cells are shown in in plain-text ("<b>caption</b>" is displayed as is it, instead bolding the caption): 

oTree.Columns.Add(
{
	caption: "Plain",
	formatText: exontrol.DrawTextFormatEnum.exPlainText | exontrol.DrawTextFormatEnum.exTextAlignVCenter | exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextWordEllipsis
})

where oTree is an object of exontrol.Tree type (or any other derived type such as exontrol.Pivot, exontrol.Gantt, and so on ).

JS.10:

Any caption the /JS component displays can show images or pictures using the <img> tag. The <img>key[:width]</img> inserts a custom size picture into the text. The exontrol.HTMLPicture.Add(key, source) method loads the picture with specified source and associates the key to it, so you can anytime refer using the <img>key</img> tag.

The exontrol.HTMLPicture.Add(key, source) method supports the following parameters:

  • key {string}, specifies the unique key to identify the image or picture
  • source {any}, specifies an object of HTMLImageElement type, or a string that defines the path to the image

For instance,  exontrol.HTMLPicture.Add("logo", "images/exontrol.logo.png") loads the "exontrol.logo.png" image, which can be displayed anywhere using the <img>logo</img> tag. The exontrol.HTMLPicture.Add(key, source) method is asynchronous so the picture or image may be displayed later only after fully load.

The following sample shows how you can display images (the sample uses exontrol.OrgChart type, but the idea is the same for any of our /JS component):

exontrol.HTMLPicture.Add("ana", "images/anita.png");
exontrol.HTMLPicture.Add("bil", "images/billy.png");
exontrol.HTMLPicture.Add("peg", "images/peggy.png");

oOrgChart.Root.Caption = "<b>Manager";
oOrgChart.Root.AddAssistant("<img>peg</img> Peg");
oOrgChart.Root.AddAssistant("<img>bil</img> Billy");
oOrgChart.Root.AddChild(
{
	caption: "Anita",
	image: "ana",
	size: [72,0]
});

where oOrgChart variable is an object of exontrol.OrgChart type. The sample displays the node's picture using the <img> tag and image property as well.

The result may look as follows:

If loading the pictures fails (picture not found, network errors, ...), the control may show as:

Also, the exontrol.HTMPicture object supports the following methods:

  • Count(), returns the number of pictures within the collection
  • Remove(name), removes the picture with specified name
  • Clear(), removes all picture objects from the collection
  • Draw(name, ctx, client), draws the picture with specified name on the canvas's context at specified location
  • DrawS2(ctx, name, client, limits, location), draws, scales and/or stretches the picture on specified context using giving limits (the picture holder is shown if the picture has not been loaded yet).
  • GetSize(name), returns the an object of {width, height} type that indicates the original size of the picture
  • forEachU(callback, thisArg), enumerates the pictures using the callback(oHPic, name) {any} until it returns a truly value or no more pictures. The forEachU method returns the last result the callback returns.
JS.11:

Yes. Download and unzip the suite.js.zip file. Open the Window Explorer and locate the run.bat into the helper folder. Double click the run.bat file and the exhelper/js should open and look as:

In case the SecurityError: Blocked a frame with origin "null" from accessing a cross-origin frame exception occurs, close all Chrome instances, and run.bat it again.
JS.12:
Yes. The ExSuite/JS library can be used on any web-application that runs on any browser that supports HTML5. The ExSuite/JS library is a standalone-library that's written from scratch using pure-Javascript. The ExSuite/JS library requires no third party-libraries or frameworks. Each components includes a init.htm file that shows the minimal code to insert the component to a HTML page.

If you are wondering on how to use the component, please check the exhelper/js tool, that helps you to find the answers and source code for tons of how to questions. For instance, please go to:

exhelper/js for exorgchart

that shows questions and answers on how to use the exorgchart/js components. Click the middle panels (the code panel), so it gets the focus and press ALT + 3 to get the HTML page that generates the view.

See also: Can I run your exhelper/js localy?
JS.13:
Yes. The ExSuite/JS library can be used on any web-application that runs on any browser that supports HTML5. The ExSuite/JS library is a standalone-library that's written from scratch using pure-Javascript. The ExSuite/JS library requires no third party-libraries or frameworks. Each components includes a init.htm file that shows the minimal code to insert the component to a HTML page.

If you are wondering on how to use the component, please check the exhelper/js tool, that helps you to find the answers and source code for tons of how to questions. For instance, please go to:

exhelper/js for exorgchart

that shows questions and answers on how to use the exorgchart/js components. Click the middle panels (the code panel), so it gets the focus and press ALT + 3 to get the HTML page that generates the view.

See also: Can I run your exhelper/js localy?
JS.14:
The 'ReferenceError: exontrol is not defined' exception occurs if the exontrol.common.min.js file has not been included.

The following line must be included in the <head> section of your HTML file:

<script type="text/javascript" src="exontrol.common.min.js">
JS.15:
The 'exontrol.XXX is not a constructor' error occurs if the library that implements the object is missing. In other words, the library has not been included.

The following table shows the XXX objects and the files your project should load:

Bezier 
<script type="text/javascript" src="exbezier/exontrol.bezier.min.js">
<script type="text/javascript" src="exbezier/exontrol.bezier.def.js">
Calendar 
<script type="text/javascript" src="exicalendar/exontrol.icalendar.min.js">
<script type="text/javascript" src="excalendar/exontrol.calendar.min.js">
<script type="text/javascript" src="excalendar/exontrol.calendar.def.js">
<script type="text/javascript" src="excalendar/exontrol.calendar.shapes.js">
ComboBox 
<script type="text/javascript" src="excombobox/exontrol.combobox.min.js">
<script type="text/javascript" src="excombobox/exontrol.combobox.def.js">
Gantt 
<script type="text/javascript" src="exmenu/exontrol.menu.min.js">
<script type="text/javascript" src="exmenu/exontrol.menu.def.js">
<script type="text/javascript" src="extree/exontrol.tree.min.js">
<script type="text/javascript" src="extree/exontrol.tree.def.js">
<script type="text/javascript" src="exgantt/exontrol.gantt.min.js">
<script type="text/javascript" src="exgantt/exontrol.gantt.def.js">
Gauge 
<script type="text/javascript" src="exgauge/exontrol.gauge.min.js">
<script type="text/javascript" src="exgauge/exontrol.gauge.def.js">
Graph 
<script type="text/javascript" src="exgraph/exontrol.graph.min.js">
<script type="text/javascript" src="exgraph/exontrol.graph.def.js">
ICalendar, IRecur 
<script type="text/javascript" src="exicalendar/exontrol.icalendar.min.js">
Menu 
<script type="text/javascript" src="exmenu/exontrol.menu.min.js">
<script type="text/javascript" src="exmenu/exontrol.menu.def.js">
OrgChart 
<script type="text/javascript" src="exorgchart/exontrol.orgchart.min.js">
<script type="text/javascript" src="exorgchart/exontrol.orgchart.def.js">
Pivot 
<script type="text/javascript" src="exmenu/exontrol.menu.js">
<script type="text/javascript" src="exmenu/exontrol.menu.def.js">
<script type="text/javascript" src="extree/exontrol.tree.js">
<script type="text/javascript" src="extree/exontrol.tree.def.js">
<script type="text/javascript" src="expivot/exontrol.pivot.js">
<script type="text/javascript" src="expivot/exontrol.pivot.def.js">
RadialMenu 
<script type="text/javascript" src="exradialmenu/exontrol.radialmenu.js">
<script type="text/javascript" src="exradialmenu/exontrol.radialmenu.def.js">
Schedule 
<script type="text/javascript" src="exmenu/exontrol.menu.js">
<script type="text/javascript" src="exmenu/exontrol.menu.def.js">
<script type="text/javascript" src="excalendar/exontrol.calendar.js">
<script type="text/javascript" src="excalendar/exontrol.calendar.def.js">
<script type="text/javascript" src="excalendar/exontrol.calendar.shapes.js">
<script type="text/javascript" src="exicalendar/exontrol.icalendar.js">
<script type="text/javascript" src="exschedule/exontrol.schedule.js">
<script type="text/javascript" src="exschedule/exontrol.schedule.def.js">
Surface 
<script type="text/javascript" src="exsurface/exontrol.surface.js">
<script type="text/javascript" src="exsurface/exontrol.surface.def.js">
Swimlane 
<script type="text/javascript" src="exsurface/exontrol.surface.js">
<script type="text/javascript" src="exsurface/exontrol.surface.def.js">
<script type="text/javascript" src="exswimlane/exontrol.swimlane.js">
<script type="text/javascript" src="exswimlane/exontrol.swimlane.def.js">
Additionally, any of these components require the common library, so the following files must be included first: 

<script type="text/javascript" src="exontrol.common.min.js">
<script type="text/javascript" src="exontrol.patch.min.js">

For instance, if 'exontrol.Calendar is not a constructor' error occurs make sure your application includes exontrol.icalendar.min.js, exontrol.calendar.min.js, ... files as indicated in the above table. In conclusion, the <head section of your HTML must include the following files:

<script type="text/javascript" src="exontrol.common.min.js">
<script type="text/javascript" src="exontrol.patch.min.js">
<script type="text/javascript" src="exicalendar/exontrol.icalendar.min.js">
<script type="text/javascript" src="excalendar/exontrol.calendar.min.js">
<script type="text/javascript" src="excalendar/exontrol.calendar.def.js">
<script type="text/javascript" src="excalendar/exontrol.calendar.shapes.js">
JS.16:

Yes. Our controls are highly flexible and can be tailored to meet your specific needs. You have the freedom to customize every element, enabling you to apply any visual appearance you wish. This ensures that you can achieve the exact look and feel that aligns with your vision and requirements.

The following examples demonstrate how you can modify the visual appearance of the object using CSS. These samples illustrate various techniques and styles, allowing you to customize the look to fit your specific design preferences and requirements.

Our controls are rendered within a <canvas> element, allowing you to display a wide range of content. The objects within the control, such as nodes, elements, items, cells, bars, ... are not traditional elements like <table>, <div>, or <span> that can be styled directly with CSS.

See also
JS.17:

We are confident that our controls offer the best possible performance, even when managing and processing large data sets. Our controls are designed to handle extensive data loads efficiently, ensuring smooth and seamless operation without compromising speed or responsiveness. This allows you to maintain optimal performance levels regardless of the size or complexity of your data.

The examples provided will show you how to efficiently load and work with this file using different methods or tools. Click on any sample to see how the data is loaded and rendered, using:

  • extree/js component (loads the 'perf.csv' file with our /js component)
  • <table> element (dynamically creates an HTML <table> from the 'perf.csv' file)
  • <div> and <span> elements (simulates a table using <div> and <span> elements from the 'perf.csv' file)

The examples above show how to load the 'perf.csv' file from our web server. This file has several characteristics:

  • File Size: The file is 2.18 megabytes (MB), which indicates its storage size on the server. This gives you an idea of how large the file is and how long it might take to download.
  • Columns: The CSV file includes definitions for 21 different columns. Each column represents a different type of data or attribute related to the items in the file.
  • Items: There are 9,994 items in the file. Each item corresponds to a row in the CSV file, excluding the header row. These items could be anything from products, records, or entries, depending on the context of the data.
  • Cells: The file has a total of 209,874 cells. A cell is the intersection of a row and a column. The total number of cells is calculated by multiplying the number of items (rows) by the number of columns (21 columns * 9,994 items).

In summary, the 'perf.csv' file is a well-structured dataset that contains a significant amount of information distributed across 21 columns and nearly 10,000 items, resulting in over 200,000 individual data points (cells).

You can check a few more samples about performance here.
JS.18:
The exontrol.patch.min.js file includes browser-specific patches. One such patch, called '1px' changes the width of vertical and horizontal lines to 1 pixel instead of 2 pixels. To achieve full smoothness for the objects, you need to remove '1px' from the exontrol.fix field before loading exontrol.patch.min.js library, as shown in the following example: 
<script type="text/javascript" src="exontrol.common.min.js">
<script type="text/javascript">exontrol.fix = exontrol.fix.replace(/1px/g,'')</script>
<script type="text/javascript" src="exontrol.patch.min.js">

The following screen shot shows the control (by default, "1px" patch applied):

The following screen shot shows the control ( without "1px" patch applied):
JS.18:

Currently, the /JS library includes the following:

  • Calendar (provides calendar capabilities for your application),
  • ComboBox (allows you to display a drop-down panel (Bezier, Calendar, Gantt, Gauge, Menu, OrgChart, Pivot, RadialMenu, Schedule, ScrollBar, Surface, SwimLane Tree or any other HTML element) once the user clicks a button),
  • ICalendar (implements the iCalendar data format, according with Internet Calendaring and Scheduling Core Object Specification, RFC 5545, especially the RRULE property, which defines a rule or repeating pattern for recurring events, to-dos, journal entries, or time zone)
  • Gantt (is our approach to create timeline charts (also known as Gantt charts)
  • Gauge (shows one or more layers, where each layer can display one or more transparent pictures, HTML captions which can be clipped, moved, rotated or combination of them, by dragging the mouse, rolling the mouse wheel, or using the keyboard),
  • Graph (offers excellent graphical data visualization)
  • Menu (provides menu-functionality which includes top-level menus, context, popup, drop down or shortcut menus)
  • OrgChart (permits the totally automatic generation of organigrams)
  • Pivot (is our approach to provide data summarization, as a pivot table)
  • RadialMenu (component is similar to the Microsoft's OneNote radial menu with ability to customize the appearance and functionality),
  • Scheduler (is our approach to provide scheduling of appointments into your web application),
  • ScrollBar (provides scroll-bar/slider/track functionality for your application)
  • Surface (lets you organize your objects to a surface)
  • Swimlane (lets you draw swim lane diagrams)
  • Tree (allows you to display and edit hierarchical-data)

Here's how the /JS components use one with another:

  • RadialMenu (superset of Gauge): Incorporates all functionalities of a basic Gauge component but extends them with radial menu-specific features like circular arrangement and interactive options
  • Swimlane (superset of Surface): Enhances the basic Surface component by adding features specific to organizing information into lanes or phases, allowing for visual grouping of related items
  • Pivot (superset of Tree): Utilizes the hierarchical structure of a Tree component but adds capabilities for dynamic data pivoting, enabling users to rearrange and summarize data based on different dimensions or criteria
  • Gantt (superset of Tree): Extends the Tree component by incorporating timeline visualization and task dependency management, facilitating project planning and tracking tasks over time.

In essence, the /JS components demonstrate how leveraging hierarchical relationships between base and superset components enhances the versatility and functionality of web applications, catering to diverse user requirements and enhancing user experience through specialized visualization and interaction features.

Although Surface and OrgChart may appear similar at first glance, they differ significantly in several aspects. Here are a few differences:

OrgChart

  • Automatically arranges nodes in either left-to-right or top-to-bottom orientation, using parent-children relationship
  • Does not allow manual adjustment of individual node positions
  • Offers standard linking options, from child to parent

Surface

  • Allows freehand drawing of organigrams, enabling placement of nodes anywhere on the chart
  • Provides customizable linking options and ability to link any node with any other node including itself
  • Does not require a parent-children relationship

In essence, OrgChart focuses on automated node organization with limited manual adjustments, while Surface offers more creative freedom with flexible node placement and customizable links
JS.19:

To resize an element in HTML using JavaScript, you can adjust the element's width and height properties through its style. Here's how to do it:

  1. Access the Element
    First, you need to select the HTML element you want to resize. You can do this using methods like document.getElementById, document.querySelector, or other DOM traversal methods.
  2. Modify the Element's Size
    Once you have access to the element, you can either adjust its style.width and style.height properties using plain JavaScript or use jQuery's .width(), .outerHeight(), and .outerWidth() methods to modify the element's size. jQuery methods provide more control, allowing you to include or exclude padding and borders in the size adjustments when necessary.

All of our components are embedded within <canvas> elements. For a <canvas> element, you should adjust its width and height attributes to change the drawing surface, not the style properties. This ensures that the resolution of the canvas content is preserved and not distorted. The attributes can be modified directly using JavaScript or jQuery, but remember that you need to set the width and height attributes, not the CSS properties.

Correct Way (changing Canvas Attributes):

const canvas = document.getElementById("cvsGantt");
canvas.width = 500;  // Changes the actual canvas drawing width
canvas.height = 300; // Changes the actual canvas drawing height

Incorrect Way (using CSS Style, which only affects display size, not drawing size):

const canvas = document.getElementById("cvsGantt");
canvas.style.width = "500px"  // Only changes the visual size, not the drawing surface
canvas.style.height = "300px" // Only changes the visual size, not the drawing surface

Key Difference:

  • Canvas Attributes (width and height): Changes the actual resolution and size of the drawing surface. Resizing the canvas attributes can result in a clearer and sharper image because it changes the resolution. If you increase the size, it allows for more detail to be displayed. When you change the width and height attributes of a <canvas> element, all existing content is cleared. This is because the canvas maintains its content as a bitmap tied to its dimensions. Modifying these attributes discards the old bitmap and creates a new one, resulting in a blank canvas.
  • CSS Style (style.width and style.height): Only scales the canvas visually, which can lead to blurry or stretched content because it doesn't change the resolution of the drawing surface. Scaling the canvas using CSS may not utilize the full potential of the drawing surface, resulting in a lower-quality rendering of graphics

In conclusion, after resizing any of our component(s), you must call the exontrol.CC.Resize(<canvas>, [width], [height]) method to resize and update the control's content simultaneously, as shown in the following example:

exontrol.CC.Resize(document.getElementById("cvsGantt"), 500, 300)

which is equivalent to (if cvsGantt is the identifier of the canvas, as in <canvas id="cvsGantt" tabindex="0"></canvas>):

exontrol.CC.Resize(cvsGantt, 500, 300)

or to:

const canvas = document.getElementById("cvsGantt");
canvas.width = 500;  // Changes the actual canvas drawing width
canvas.height = 300; // Changes the actual canvas drawing height      
exontrol.CC.Resize(canvas);

You can access the eXHelper/JS for additional examples on resizing our components.
JS.20:

Very rarely, you may encounter a message (for a maximum of about one hour) in the lower-left corner of the control that states, "⚠ the license is missing." This message appears only if you do not have a valid license. During the display of this message, certain user interface actions may be limited. For instance, drag-and-drop operations might require multiple attempts, and clicking a checkbox may take several tries to register. Similarly, clicking on a column to drag might also necessitate multiple clicks to function properly.

Once you have obtained a valid license, which can only be acquired after purchasing the package, the warning message will no longer appear. This means that after your purchase is complete and you received the license, you can expect to use the library without encountering this message again.
JAV.1:
The syntax for adding a component to a web page is: 
<OBJECT classid="clsid:CLASSIDENTIFIER" id="IDENTIFIER">
</OBJECT>

where 

  • the IDENTIFIER is the ID of the object being added. The ID attribute can be used by a JavaScript (via the HTML DOM) or by CSS to make changes or style the element with the specified id. The id attribute specifies a unique id for an HTML element
  • the CLASSIDENTIFIER is the object's class identifier as CD481F4D-2D25-4759-803F-752C568F53B7

The CLASSIDENTIFIER is unique for each /COM object, and can be found on control's documentation on the main object page, where something like follows is displaying, or explained here;

Tip The /COM object can be placed on a HTML page (with usage of the HTML object tag:  <object classid="clsid:...">)  using the class identifier: {CD481F4D-2D25-4759-803F-752C568F53B7}. The object's program identifier is: "Exontrol.G2antt". The /COM object module is: "ExG2antt.dll"

The following sample adds the eXG2antt component to a web page:

<OBJECT classid="clsid:CD481F4D-2D25-4759-803F-752C568F53B7" id="G2antt1">
</OBJECT>
JAV.2:
A) You can call the Init method during load event of the Body HTM element, like in the following sample: 
<BODY onload='Init()'>
<OBJECT classid="clsid:CD481F4D-2D25-4759-803F-752C568F53B7" id="G2antt1" width="192" height="192">
</OBJECT>

<SCRIPT LANGUAGE="JScript">
function Init()
{
	G2antt1.Columns.Add("Task");
	G2antt1.Chart.FirstVisibleDate = "1/1/2001";
	var var_Items = G2antt1.Items;
	var_Items.AddBar(var_Items.AddItem("Task 1"),"Task","1/2/2001","1/4/2001",null,null);
}
</SCRIPT>
</BODY>

B) You can add a SCRIPT right after the </OBJECT> so the code is executed once the object is created as in the following sample:

<OBJECT classid="clsid:CD481F4D-2D25-4759-803F-752C568F53B7" id="G2antt1">
</OBJECT>

<SCRIPT LANGUAGE="JScript">
	G2antt1.Columns.Add("Task");
	G2antt1.Chart.FirstVisibleDate = "1/1/2001";
	var var_Items = G2antt1.Items;
	var_Items.AddBar(var_Items.AddItem("Task 1"),"Task","1/2/2001","1/4/2001",null,null);
</SCRIPT>
JAV.3:
The syntax for handling the events with parameters is: 
<SCRIPT FOR="IDENTIFER" EVENT="EVENT(PARAMETERS)" LANGUAGE="JScript">
</SCRIPT>

where the IDENTIFIER is the ID of the object being handled, and the EVENT is the name of the event being handled. The PARAMETERS gets the list of parameters that the event carries.

Using the FOR and EVENT attributes to associate events gives you access to custom events fired by embedded objects and to any parameters that an event generates. Unlike standard events that can be bound using attributes or properties, in the case of custom objects these are not available.

Use the FOR attribute to specify which element or object to handle, assigning it an identifier or the name of an object, application, or control. If you don't specify this attribute, the handler is bound to the window by default. Notice that JScript is case-sensitive, so you must type the identifier or name exactly as it appears in the corresponding element or object.

Use the EVENT attribute to specify which event to associate to, assigning it an event name. If the event generates parameters (few predefined events do), you can also specify a list of comma-separated parameter names enclosed in parentheses immediately after the event name. The parameters are untyped. Because JScript is case-sensitive, make sure you always spell event names in lowercase letters. Also, if you give a parameter list, VBScript requires that all parameters defined for the event be listed, even if they are not used.

The following JScript example displays a message box when the user clicks an anchor element in the gantt control:

<SCRIPT FOR="G2antt1" EVENT="AnchorClick(AnchorID,Options)" LANGUAGE="JScript">
	alert(AnchorID);
</SCRIPT>
The sample handles the AnchorClick event of the eXG2antt component.
JAV.4:
Initializes the control using the option A), as described on: Where I should initialize my control? ( using the load event of the BODY element ).
JAV.5:
Some of the events pass the parameters by reference. Such of event could be the KeyDown event, where the KeyCode parameter is passed by reference, so user can change it runtime. 

For instance, the following JScript sample changes the TAB behavior, so if user presses the TAB, the control sends instead the RIGHT key, so it advance to the next editable field:

<SCRIPT FOR="G2antt1" EVENT="KeyDown(KeyCode,Shift)" LANGUAGE="JScript">
	if ( KeyCode = 9 )
		KeyCode = 39;
</SCRIPT>

In this code, the KeyCode = 39, won't have any effect so instead you have to use the EventParam property like shown in the following sample: 

<SCRIPT FOR="G2antt1" EVENT="KeyDown(KeyCode,Shift)" LANGUAGE="JScript">
	if ( KeyCode = 9 )
		G2antt1.EventParam(0) = 39;
</SCRIPT>

or an equivalent sample: 

<SCRIPT FOR="G2antt1" EVENT="KeyDown(KeyCode,Shift)" LANGUAGE="JScript">
	if ( KeyCode = 9 )
		G2antt1.Template = "EventParam(0) = 39";
</SCRIPT>

 The EventParam property is available for almost all of our components. The Template property specifies the x-script code to be executed at runtime.

JAV.6:
The class identifier can be found on the control's documentation. 

You can follow the steps to find the classid ( for instance, we are trying to get the classid for the exg2antt control ): 

  • go to the control's main web page - exg2antt.jsp
  • click help under the control name - rhelp.jsp?product=exg2antt
  • locate and click the bold identifier (main object) in the control's objects list ( G2antt )

Under the object's help you will find:

Tip The /COM object can be placed on a HTML page (with usage of the HTML object tag:  <object classid="clsid:...">)  using the class identifier: {CD481F4D-2D25-4759-803F-752C568F53B7}. The object's program identifier is: "Exontrol.G2antt". The /COM object module is: "ExG2antt.dll"