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.

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

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

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>

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>

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.

Initializes the control using the option A), as described on: Where I should initialize my control? ( using the load event of the BODY element ).

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.

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 - http://www.exontrol.com/exg2antt.jsp
• click help under the control name - http://www.exontrol.com/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"