Complete UI HTML Tag Reference

This page houses the index of our HTML tag reference. All of the HTML attributes that are available to customize in any of the Complete UI components are listed here.

Calendar

<ntb:datepicker>

The is the element that represents the overall Calendar component.
Corresponding JavaScript Class: nitobi.calendar.DatePicker

- Hide Property Table
Property Type Description
mindate Date The earliest selectable date. Will accept some natural language dates (today, yesterday, tomorrow, last week, next, week, last year, last month, next year, next month). Check out the Date Range example to see how to use this attribute.
maxdate Date The last selectable date. Will accept some natural language dates (today, yesterday, tomorrow, last week, next, week, last year, last month, next year, next month). Check out the Date Range example to see how to use this attribute.
selecteddate Date The date to be selected when the component loads. Will accept some natural language dates (today, yesterday, tomorrow, last week, next, week, last year, last month, next year, next month).
submitmask String The mask applied to the hidden input field used when submitting the Calendar in a form. If you include the DatePicker in a form, you can optionally use this hidden input as the actual submit value (as opposed to the value that is displayed in the visible input field). The hidden input has the same name as the id given to the DatePicker component.
eventsurl String The eventsurl defines the server location where the DatePicker can get information on events and disabled dates. To see this attribute in action, check out the Dates sample available online.
longmonthnames Array An array literal or reference to an array that defines the full month names, e.g. January, February, March, etc. See this attribute in action over at the Calendar Localization example.
shortmonthnames Array An array literal or reference to an array that defines the short month names, e.g. Jan, Feb, Mar, etc. See this attribute in action over at the Calendar Localization example.
longdaynames Array An array literal or reference to an array that defines the full day names, e.g. Sunday, Monday, etc. See this attribute in action over at the Calendar Localization example.
shortdaynames Array An array literal or reference to an array that defines the short day names, e.g. Sun, Mon, Tue, etc. See this attribute in action over at the Calendar Localization example.
mindaynames Array An array literal or reference to an array that defines the minimum day names (used in day name row in the rendered calendar, e.g. S, M, T, W, T, F, S).
navconfirmtext String The text for the quick nav confirm button.
navcanceltext String The text for the quick nav cancel button.
navoutofrangetext String The text for the quick nav error message when the chosen date is out of range as defined by mindate and maxdate.
navinvalidyeartext String The text for the quick nav error message when the year is invalid.
shimenabled Boolean Determines whether or not to render an iframe that allows the calendar to render over top certain elements with scroll bars (<textarea> in Firefox 2 on Mac only and <select> boxes in IE6). If true, it will only enable the shim for the troublesome browsers listed above. Default is false.
theme String The theme to apply to the component. This can be an existing theme that comes pre-packaged with Calendar (look in your Nitobi installation directory/javascript_css/style/calendar directory) or you can define your own by creating a CSS class of the same name and including it in your page. Have a look at our Themes page to see the various pre-packaged themes available.
onsetinvaliddate String JavaScript function that is fired when the selected date is of invalid format.
onsetoutofrangedate String JavaScript function that is fired when the selected date falls outside the range defined by mindate and maxdate.
onsetdisableddate String JavaScript function that is fired when a date defined as disabled (see the eventsurl attribute) is selected.
ondateselected String JavaScript function that is fired when a valid date is selected.
oneventdateselected String JavaScript function that is fired if the selected date has event information associated with it.

<ntb:calendar>

The HTML element that represents the visible monthly calendars.
Corresponding JavaScript Class: nitobi.calendar.Calendar

- Hide Property Table
Property Type Description
monthcolumns Number The number of columns in which to render Calendar months. Together with monthrows, it defines the total number of contiguous calendar months to render. Have a look at our Multi Month sample to see this attribute in action.
monthrows Number The number of rows in which to render Calendar months. Together with monthcolumns, it defines the total number of contiguous calendar months to render. Have a look at our Multi Month sample to see this attribute in action.
effectenabled Boolean Enables/disables the effect used when the calendar's visibility is toggled.
onhide String JavaScript function that is fired when the calendar is hidden.
onshow String JavaScript function that is fired when the calendar is shown.
ondateclicked String JavaScript function that is fired when a date is clicked on the calendar.
onmonthchanged String JavaScript function that is fired when the month is changed using the next or previous buttons or via the quick nav panel.
onyearchanged String JavaScript function that is fired when the year is changed using the next or previous buttons or via the quick nav panel.

<ntb:dateinput>

Represents the text input element of the Calendar component.
Corresponding JavaScript Class: nitobi.calendar.DateInput

- Hide Property Table
Property Type Description
displaymask String The mask used on the input field. The display mask is used to make the date in the input more human-readable. You can take a look at the Date Masking sample up on the Nitobi page for some more examples of this attribute. Defaults to "MMM dd yyyy", e.g. "June 24 2008".
editmask String An optional mask that is applied when the input field is focused, to make date entry easier. The edit mask is applied to the value in the input field when the input is focused. This is to make date entry easier. Will default to the value of displaymask.
width Number The width of the input field. This can be defined either in the declaration or via CSS. Will default to the width defined in the Calendar's theme CSS file.
editable Boolean Sets the input to either be editable or non-ediatble.
onfocus String JavaScript function that is fired when the input is focused.
onblur String JavaScript function that is fired when the input is blurred, i.e. when the input is un-focused.

Callout

There are no HTML elements when using the Callout component - it is purely JavaScript.

Combo

<ntb:Combo>

The main combobox HTML element.
Corresponding JavaScript Class: nitobi.combo.Combo

- Hide Property Table
Property Type Description
cssclassname String Specifies the name of a custom CSS class to associate with the entire Combobox. If this is left as an empty string, then the 'Combobox' class is used. Refer to the CSS file for details on this class, and which CSS attributes you must supply to use a custom class. You can include a custom class by using the HTML style tags or by using a stylesheet.
datatextfield String Specifies the name of the field in the dataset that provides text for the list to display. If you want a combobox that displays key/value pairs, use this property. The datatextfield is the field used as a display value, and the datavaluefield is used as a key value, and is the value returned when using GetSelectedItem(). If you only specify one of these it is used as both the text field and the value field.
datavaluefield String Specifies the name of the field in the dataset that provides data for the list. Use this if you only want one column, and you don't want to use the ListColumnDefinition tag. If you want a combobox that displays key/value pairs, use this property. The datatextfield is the field used as a display value, and the datavaluefield is used as a key value, and is the value returned when using GetSelectedItem(). If you only specify one of these it is used as both the text field and the value field.
disabledwarningmessages String Disables warning messages issued by the combobox. This is a comma separates list of ids or, to disable all warnings, set this to *.
enabled String Determines whether the combobox is enabled for user interaction. Note that the enabled/disabled distinction is different from the editable/non-editable distinction. When the combobox is disabled, both the textbox and list are disabled whereas if the combobox is non-editable, the list is still accessible while the textbox is disabled.
errorlevel String Set this to EBAERROR_LEVEL_DEBUG if you want to see debug messages. If no value is supplied, no debug messages are shown. To disable certain warning messages see disabledwarningmessages.
height String Specifies the height of the combobox in html units, e.g. 100px or 100%. If you use this property, nitobi.combo.TextBox.Height is ignored. This property is only used when the mode is set to SmartList. In all other modes, the height of the component is defined in the CSS.
httprequestmethod String Specifies the kind of server request used when requesting data, i.e. GET or POST. The default is GET. In some cases a POST is useful because certain form fields are POST'ed with the request.
id String Specifies the id of the combobox on the HTML page. This id must be unique. You can use this id to get a reference to the combobox on the page.
initialsearch String Specifies the initial value to search for and select in the dataset. Only applicable in bound search modes. When the combobox is bound to a datasource, you can use this property to force the combo to search the datasource at load time, with the specified search string.
listzindex Number Specifies the ordering of the combobox list on the page along the Z axis. It will define how various page elements are 'layered'.
mode String Specifies the search and render mode of the combobox. It can be one of: classic, compact, filter, smartlist, smartsearch or unbound.
smartlistseparator String Specifies the character used to separate selected list records, in SmartList mode. The default value is "," (comma). You should pick a value that will not appear in your datasource otherwise the results will be separated unintentionally!
tabindex Number Specifies the HTML tab index of the combobox.
theme String A theme to apply to the component. You can choose either a pre-packaged theme that comes with combobox (see the javascript_css/style/combo directory for a list) or you can create a CSS class of the same name and apply your custom styling within that.
width String Specifies the width of the combobox in HTML units, e.g. 100px or 100%. If you use this property, nitobi.combo.TextBox.Width is ignored. This does not set the width of the list; use nitobi.combo.List.SetWidth instead.
onbeforeselectevent String JavaScript function that is fired before a combobox selection gets executed. As with all OnBefore events, returning false will prevent the actual Select event from initiating. The Combo events sample page is an excellent resource to get familiar with the events available with combobox.
onblurevent String JavaScript function that is fired when the combobox element is un-focused. The Combo events sample page is an excellent resource to get familiar with the events available with combobox.
onfocusevent String JavaScript function that is fired when the combobox element is focused. The Combo events sample page is an excellent resource to get familiar with the events available with combobox.
onloadevent String JavaScript function that is fired when the combobox element is initially loaded. The Combo events sample page is an excellent resource to get familiar with the events available with combobox.
onselectevent String JavaScript function that is fired after a combobox item is selected. The Combo events sample page is an excellent resource to get familiar with the events available with Combo.
ontabevent String JavaScript function that is fired when you press the Tab key while active within the combobox element. The Combo events sample page is an excellent resource to get familiar with the events available with combobox.

<ntb:ComboButton>

Corresponds to the button element within the entire combobox component.
Corresponding JavaScript Class: nitobi.combo.Button

- Hide Property Table
Property Type Description
defaultcssclassname String The name of the CSS class that defines the combobox's button in the normal position. Do not include the dot in the class name.
height String Specifies the button's height in HTML units, e.g. 16px.
pressedcssclassname String The name of the CSS class that defines the combobox's button in the pressed position. If this is left as an empty string, then the 'ComboBoxButtonPressed' class is used. Refer to the CSS file for details on this class, and which CSS attributes you must supply to use a custom class. You can include a custom class by using the HTML style tags or by using a stylesheet.
width String Specifies the button's width in HTML units, e.g. 16px.
onbeforeselectevent String JavaScript function that is fired before a combobox selection gets executed. As with all OnBefore events, returning false will prevent the actual Select event from initiating. The Combo events sample page is an excellent resource to get familiar with the events available with combobox.
onblurevent String JavaScript function that is fired when the combobox element is un-focused. The Combo events sample page is an excellent resource to get familiar with the events available with combobox.
onfocusevent String JavaScript function that is fired when the combobox element is focused. The Combo events sample page is an excellent resource to get familiar with the events available with combobox.
onloadevent String JavaScript function that is fired when the combobox element is initially loaded. The Combo events sample page is an excellent resource to get familiar with the events available with combobox.
onselectevent String JavaScript function that is fired after a combobox item is selected. The Combo events sample page is an excellent resource to get familiar with the events available with combobox.
ontabevent String JavaScript function that is fired when you press the Tab key while active within the combobox element. The Combo events sample page is an excellent resource to get familiar with the events available with combobox.

<ntb:ComboList>

Corresponds to the list element within the entire combobox component.
Corresponding JavaScript Class: nitobi.combo.List

- Hide Property Table
Property Type Description
allowpaging Boolean True if paging is allowed, false otherwise. Only classic mode supports paging. If you enable paging, the gethandler attached to the datasource must be setup to deliver data one page at a time. See the tutorials for detailed information.
backgroundhighlightcolor String Specifies the HTML color that the background of a row changes to when highlighted, e.g. #FFFFFF or red, etc. You can also use highlightcssclassname for more control but setting only the color yields better performance. The default is 'highlight'.
customhtmldefinition String Specifies a custom HTML definition for each row. Data text fields are specified inside the definition as such: ${0} for field 0, ${1} for field 1 and so on, e.g. '<b>${0}</b>'. You can have more records in your datasource than are displayed using this property. This enables you to hide key values from the user, but still have them returned once they make a selection. If this is used, the ListColumnDefinitions are ignored. If this property is changed after the combobox has loaded its records, future records will be rendered according to the new customhtmldefinition, but already rendered records will not change. If you want to re-render the list, you will have to first use .Clear and the nitobi.combo.XmlDataSource.Clear methods.
customhtmlheader String Specifies the custom HTML definition for the list header. If this is used, the headerlabel from the ComboColumnDefinition tag will not be used. This is the text display as a header at the top of the list and is a simple HTML string. It applies to all columns.
datasourceurl String Specifies the URL to a page that returns data from a datasource. This is used for populating the combobox as well as for paging and lookup. When the combobox requires a page of data, it calls this URL and gives it the following arguments:
StartingRecordIndex - The next record in the data subset that the combobox wants.
PageSize - Size of the page.
SearchSubstring - [Optional] The string the user is looking for.
ComboId - The Id of the combobox making the request.
LastString - The last string searched for.
You can use this in conjunction with List.GetPage to add records to the combobox.
foregroundhighlightcolor String Specifies the HTML color that the foreground (text) of a row changes to when highlighted, e.g. #FFFFFF or red, etc. You can also use highlightcssclassname for more control but setting only the color yields better performance. The default is 'highlight'.
fuzzysearchenabled String Sets whether or not to allow fuzzy searching. If set to true, the get handler can return anything from a search result, even if it does not match the search type for the mode. When the combobox requests data from the server with a search substring, the search type depends on the mode. Smartsearch and smartlist modes perform substring matching, while other modes perform prefix matching. When the data returns to the client, the combobox performs a local search in order to highlight search strings, and select the correct default row. If it cannot match the string on the client-side and FuzzySearch is not enabled, then the behaviour is unpredictable. If FuzzySearch is enabled, then no client side matching is attempted and combobox simply displays the search results.
height String Specifies the height of the list body. This must be an HTML measurement, e.g. 100px. The list body is the list excluding headers and footers.
highlightcssclassname String Specifies the CSS style applied to the row when the user highlights it. Use backgroundhighlightcolor for better performance. The default CSS class that all Combos use is ComboBoxListBodyTableRowHighlighted, which is stored in the CSS file. If you want to modify all Combos on the page, you can modify this class. If you only want to affect one combobox you can copy this class and then set highlightcssclassname to the copy.
pagesize String Specifies the number of records retrieved at a time from the server. If clipping is turned on (according to the mode used), then the value returned may not actually correspond with the displayed pagesize because the record set that is returned from the server is clipped according to the clip length.
width String Specifies the width of the list in pixels or percent, e.g. 100px or 100% as specified in the width attribute of the List element. This is not the same as the combobox width.
onaftersearchevent String JavaScript function that is fired after the combobox component completes a search. The Combo events sample page is an excellent resource to get familiar with the events available with combobox.
onbeforesearchevent String JavaScript function that is fired before the combobox component initiates a search. As with all OnBefore events, returning false will prevent the actual Search event from initiating. The Combo events sample page is an excellent resource to get familiar with the events available with combobox.
onhideevent String JavaScript function that is fired when the combobox List is hidden. The Combo events sample page is an excellent resource to get familiar with the events available with combobox.
onshowevent String JavaScript function that is fired when the combobox List is shown. The Combo events sample page is an excellent resource to get familiar with the events available with combobox.

<ntb:ComboColumnDefinition>

Corresponds to any custom column definitions within the combobox List component.
Corresponding JavaScript Class: nitobi.combo.ListColumnDefinition

- Hide Property Table
Property Type Description
align String Specifies the alignment of text in the column as one of left, right, or center. If this property is changed after the combobox has loaded its records, future records will be rendered according to the new ListColumnDefinition, but already rendered records will not change. If you want to re-render the list, you will have to call the nitobi.combo.List.Clear and the nitobi.combo.XmlDatasource.Clear methods.
columntype String Specifies the type of the column, one of TEXT (default) or IMAGE. If IMAGE is used, you can also specify the imagehandlerurl property (see below for more information). If the imagehandlerurl property is not specified, then the text data within the column will be translated into an image URL, and then image will be displayed in the column.
cssclassname String Specifies the name of the CSS class that defines the style for this column. The default CSS class that all ListColumnDefinitions in all Combos is ComboBoxListColumnDefinition, which is stored in the CSS file. If you want to modify all Combos on the page, you can modify this class. If you only want to affect one combobox you can copy this class and then set CSSClassName to the copy.
datafieldindex String Specifies the index of the data field that populates this column. If you leave this field empty, it will use the ordinal position of the ListColumnDefinition within the List.ListColumnDefinitions collection.
headerlabel String Specifies the string displayed as the header for this column. This allows you define headers for each column of data in the list. Use customhtmlheader if you only want one header that spans all columns.
htmlprefix String Specifies the HTML code that will be added before each cell value in this column. This can include any valid HTML code including closing tags that were written using the htmlsuffix property. If this property is changed after the combobox has loaded its records, future records will be rendered according to the new value, but already rendered records will not change. If you want to re-render the list, you will have to call the nitobi.combo.List.Clear and the nitobi.combo.XmlDatasource.Clear methods.
htmlsuffix String Specifies the HTML code that will be added after each cell value in this column. This can include any valid HTML code including closing tags that were written using the htmlprefix property. If this property is changed after the combobox has loaded its records, future records will be rendered according to the new value, but already rendered records will not change. If you want to re-render the list, you will have to call the nitobi.combo.List.Clear and the nitobi.combo.XmlDatasource.Clear methods.
imagehandlerurl String Specifies URL of a server-side script that will take as input the values in each cell in this column, and output some image based on this cell value parameter. In other words, it is the URL of a page that will serve up an image given an argument. The database column will contain image identifiers; this identifier will be used as an argument to the page, e.g. if the URL is http://localhost/ImageServer.aspx?, then combo will call it as follows http://localhost/ImageServer.aspx?Image=DataFromColumn. It will expect an image to be written out by the page. For example, the values in this column could be the id's of people stored in the database. When the combo is loaded the row value sends a request to the image handler, e.g. by calling http://localhost/ImageServer.aspx?Image=shiggens. ImageServer.aspx will check if shiggens is online, and, if so, send back an image specifying so.
textcolor String Specifies the color of the text in this column.
width String Specifies the width of the column. This can be an absolute pixel value, e.g. 15px or a percentage of the list width, e.g. 50%. Wrapping is determined by the CSS class used to render the column. If you set this value to a px value, you should ensure that the list width will be big enough to fit it.

<ntb:ComboTextBox>

Corresponds to the combobox component's text input area element.
Corresponding JavaScript Class: nitobi.combo.TextBox

- Hide Property Table
Property Type Description
cssclassname String Specifies the name of the CSS class that defines the style for this column. The default CSS class that all ListColumnDefinitions in all Combos is ComboBoxListColumnDefinition, which is stored in the CSS file. If you want to modify all Combos on the page, you can modify this class. If you only want to affect one combobox you can copy this class and then set cssclassname to the copy.
datafieldindex String Specifies the index of the datafield (data column) to use as a datasource for the textbox. When the user types in the textbox, the combobox will search this column for a match. Similarly, when the user clicks a row, this column's value will be entered into the textbox.
editable String True if the user can type in the textbox and false otherwise. The rest of the combobox is still navigable when this property is false, and a value will be displayed in it once the user makes a selection. Use this if you want the user to select a value from the list, and not type a custom value.
height String Specifies the height of the text box in HTML units, e.g. 50px. In classic mode, if you increase the height of the textbox, you should also increase the height of the button. In all modes except smartlist, if you increase the height of the textbox, you should also increase the size of the font in the CSS file.
value String Specifies the initial text value in the textbox. Setting this value does not mean a specific list item will be selected. To check if the user has selected something from the list, use nitobi.combo.Combo.GetSelectedRowIndex. To set a specific item from the list as selection, use nitobi.combo.List.SetSelectedRow in conjunction with this property.
width String Specifies the width of the text box in HTML units. If the combobox is in smartlist mode, then this width is the width of the textbox. When in smartlist mode, you can also set the width to a percentage. In this mode, however, this is equivalent to nitobi.combo.Combo.GetWidth.
oneditkeyupevent String JavaScript function that is executed every time the user finishes typing a single character into the text box.

Fisheye

<ntb:fisheye>

Corresponds to the main overall Fisheye component.
Corresponding JavaScript Class: nitobi.fisheye.Fisheye

- Hide Property Table
Property Type Description
id String Specifies the id of the Fisheye on the HTML page. This id must be unique. You can use this id to get a reference to the Fisheye on the page.
growpercent String Specifies the percentage that a hovered item in the Fisheye menu will grow.
opendirection String Specifies whether the icon expands up or down. Values can be 'up' or 'down'.
expanddirection String Specifies if the icons expands to the left, right or center. The Mac OS X dock is an example of a menu expanding in the center direction. Left means the left icon is anchored and the icons expand to the left. Values can be 'left', 'right' or 'center'.
iconwidth String Specifies the base width of menu items (icons) within the Fisheye.
theme String Specifies the theme that the Fisheye component will use. This can either be a pre-packaged theme (in your Nitobi installation folder/javascript_css/styles/fisheye) or you can create a CSS class yourself with the same name to style the component.

<ntb:menuitem>

Corresponds to individual menu items/icons within the Fisheye component.
Corresponding JavaScript Class: nitobi.fisheye.MenuItem

- Hide Property Table
Property Type Description
imagesrc String Specifies the URL that is the source of the image you want to use for the icon.
label String Sets the label text for the menu item. The label is visible when the mouse is hovering over the menu item.
onclick String JavaScript function that is called when the menu item is clicked.

Grid

<ntb:column>

Corresponds to custom HTML markups/definitions of individual columns defined within the Grid or TreeGrid.
Corresponding JavaScript Class: nitobi.grid.Column

- Hide Property Table
Property Type Description
align String Specifies the alignment of text within the column.
classname String Specifies the CSS Class name for the column. This can be used to set properties on the colum such as text alignment and colors.
cssstyle String Specifies specific CSS styles to apply to data in the column. This can be used to set properties on the colum such as text alignment and colors.
value String Specifies a string literal value to display in a column.
columnname String Specifies the field name in the nitobi.data.DataTable to which the column corresponds.
headerelement String Specifies the HTML element that will be used as the column header.
type String Specifies the data-type of the data that the column is bound to. This can be text, number or data.
editable String Specifies whether the cells in the given column are editable. Setting this property to false prevents users from modifying cell contents in this column.
initial String Specifies the initial value in the cell when a new row is added.
label String Specifies the column label.
sortdirection String Specifies the direction of the sort for the column.
sortenabled String Specifies if sorting is enabled for the column.
width String Specifies the width of the column, in HTML units, e.g. 100px or 5%.
visible String Specifies whether or not the column will be displayed in the Grid.
xdatafld String Specifies the name of the XML field to bind to. This field is present in the Grid's datatable.
onheaderdoubleclickevent String JavaScript function that fires when the header column cell is double-clicked.
onheaderclickevent String JavaScript function that fires when the header column cell is single-clicked.
onbeforeresizeevent String JavaScript function that fires before the column initiates resizing. As with all OnBefore events, returning false will prevent the actual resize event from initiating.
onafterresizeevent String JavaScript function that fires after the column finishes resizing.
oncellclickevent String JavaScript function that fires when a cell in the column is clicked.
oncellvalidateevent String JavaScript function that fires after a cell leaves edit mode. This function usually implements user-defined adherance to some validation process. If the function returns false, the new value is rejected.
onbeforecelleditevent String JavaScript function that fires before a cell in the column initiates a cell edit. As with all OnBefore events, returning false will prevent the actual cell edit event from initiating.
onaftercelleditevent String JavaScript function that fires after a cell edit has completed in the column.
oncellblurevent String JavaScript function that fires when a cell in the column is blurred, i.e. un-focused.
oncellfocusevent String JavaScript function that fires when a cell in the column is focused.
onbeforesortevent String JavaScript function that fires before a sort for the column is initiated. As with all OnBefore events, returning false will prevent the actual column sort from initiating.
onaftersortevent String JavaScript function that fires after a sort is completed in the column.
onkeypressevent String JavaScript function that fires when a key is pressed within the context of the column.
onkeydownevent String JavaScript function that fires before the key strokes are handled by the column editor. By returning false from the OnKeyDownEvent, key strokes will not be registered in the cell editor.
onkeyupevent String JavaScript function that fires when keys are released.
onchangeevent String JavaScript function that fires when cells change contents in the column.

<ntb:grid>

Corresponds to the overall Grid element.
Corresponding JavaScript Class: nitobi.grid.Grid

- Hide Property Table
Property Type Description
id String Uniquely identifies the Grid object within the page it is situated in. This attribute should always be specified.
columnindicatorsenabled Boolean The Column Indicator property shows or hides the headers. By default it's true, so the headers are shown.
toolbarenabled Boolean Specifies whether to show or hide the Grid's toolbar for the end user. The toolbar contains buttons for standard Grid operations such as inserting rows, deleting rows, saving Grid contents and refreshing Grid contents.
frozenleftcolumncount Number Specifies the number of columns from the left to 'freeze' in place. This means that when you scroll horizontally, the first columns on the left, specified by this attribute, do not scroll out but remain visible on the screen.
rowdeleteenabled Boolean Specifies whether the user is allowed to remove rows from the Grid.
rowinsertenabled Boolean Specifies whether the user is allowed to insert rows into the Grid.
autoadd Boolean ?????????
autosaveenabled Boolean Specifies whether or not the auto-save feature is enabled. This feature forces the Grid to do a save every time a new row is inserted, deleted or any cell contents are edited.
rowsperpage Number Specifies the number of viewable rows in the Grid pane.
height Number Specifies the height of the Grid in pixels.
width Number Specifies the width of the Grid in pixels.
keygenerator String The keygenerator property is a unique key for new records. If a keygenerator is not specified, a unique numeric key will be generated by the Grid based on a random number and the system date / time.
gethandler String The gethandler property specifies the file name and path of the get handler for the Grid - this is the server-side script that queries a dynamic datasource for Grid data and packs it up in XML.
savehandler String The savehandler property specifies the file name and path of the save handler for the Grid - this is the server-side script that transforms the Grid's changelog XML into database queries that insert, update and delete records from the database.
mode String Mode specifies how the Grid deals with data and paging. Options are "standard", "localstandard", "livescrolling", "locallivescrolling", "localnonpaging", "nonpaging", and "pagedlivescrolling". Please have a look at our online Grid demos to find out more about the different modes.
livescrollingmode String The livescrollingmode specifies how the grid will attempt to determine the final row.
copyenabled Boolean Specifies whether the Grid allows data to be copied through the toolbar button or by the user pressing Ctrl + c.
pasteenabled Boolean Specifies whether the Grid allows data to be pasted from the clipboard into the Grid. Can be from another Grid or spreadsheet.
sortenabled Boolean Specifies whether sorting Grid columns is allowed. The user can do this by clicking on the header of a column; this will then sort based on that column in ascending or descending order.
gridresizeenabled Boolean Specifies whether resizing of the Grid is allowed. The user can drag the bottom-right corner of the Grid to resize it.
dragfillenabled Boolean Specifies whether Excel-style drag fill action is allowed. This enables functionality to copy the value of cells into adjacent ones.
rowheight Number Specifies the height of each row, in pixels.
headerheight Number Specifies the height of the header row, in pixels.
sortmode String Specifies how sorting will take place in the Grid. Options are "local", and "default" which gets the sort mode from the data mode, i.e. in local paging mode, sort mode default is local, but in standard paging mode, sort mode default is remote.
rendermode String Describes the kind of rendering to take place. Ondemand is like livescrolling.
entertab String entertab can be used to determine the behaviour of the Grid cell cursor when the enter key is pressed. Valid values for this property are "up", "down", "left", "right", each of which will cause the selected cell indicator to move by one cell in the specified direction when the enter key is pressed.
minwidth String Specifies the minimum width that the Grid can be resized to.
minheight String Specifies the minimum height that the Grid can be resized to.
widthfixed Boolean Specifies if the Grid width can be changed when resizing the Grid.
heightfixed Boolean Specifies if the Grid height can be changed when resizing the Grid.
tooltipsenabled Boolean Specifies whether the value of a Grid cell is also in the HTML title attribute of the cell making the value also appear as standard HTML tooltips.
editmode Boolean Specifies if the Grid is currently in edit mode.
theme String Specifies the CSS theme to use. This can be either a pre-packaged theme or a custom declaration.
rowselectenabled Boolean Enables the selection of rows rather than just cells in the Grid.
multirowselectenabled Boolean Enables the selection of multiple rows in the Grid.
asynchronous Boolean Specifies whether HTTPRequests sent out by the Grid should be asynchronous or synchronous???
hwrap Boolean Specifies whether to horizontally wrap cell contents???
vwrap Boolean Specifies whether to vertically wrap cell contents???
scrollx String ?????
scrolly String ?????
keymode String ?????
showerrors Boolean ?????
oncellclickevent String JavaScript function that fires when a cell is clicked within the Grid.
ondatareadyevent String JavaScript function that fires when data has been retrieved for the Grid.
oncelldblclickevent String JavaScript function that fires when a cell is double-clicked within the Grid.
onbeforeloadpreviouspageevent String JavaScript function that fires before paging to the previous page is executed. As with all onbefore events, returning false in the specified function will cancel the upcoming action - in this case, loading the previous page.
onbeforeloadnextpageevent String JavaScript function that fires before paging to the next page is executed. As with all onbefore events, returning false in the specified function will cancel the upcoming action - in this case, loading the next page.
onbeforeloaddatapageevent String JavaScript function that fires before paging to a different page is executed. As with all onbefore events, returning false in the specified function will cancel the upcoming action - in this case, loading a different page, be it previous or next.
onafterloadpreviouspageevent String JavaScript function that fires after paging to the previous page is executed.
onafterloadnextpageevent String JavaScript function that fires after paging to the next page is executed.
onafterloaddatapageevent String JavaScript function that fires after paging to a different page is executed.
onbeforeresizeevent String JavaScript function that fires before Grid resizing is executed. As with all onbefore events, returning false in the specified function will cancel the upcoming action - in this case, resizing the Grid.
onafterresizeevent String JavaScript function that fires after Grid resizing is executed.
onhandlererrorevent String JavaScript function that fires when a Grid's save or get handler throws an error. The error messaging must be implemented by the user within the load or save handler, using the setErrorMessage() function present in the load and save handler class.
onbeforerefreshevent String JavaScript function that fires before Grid refresh is executed. As with all onbefore events, returning false in the specified function will cancel the upcoming action - in this case, refreshing the Grid.
onafterrefreshevent String JavaScript function that fires after Grid refresh is executed.
onbeforecelleditevent String JavaScript function that fires before a Grid cell edit is initiated. As with all onbefore events, returning false in the specified function will cancel the upcoming action - in this case, editing a cell in Grid.
onaftercelleditevent String JavaScript function that fires after a cell edit in Grid was initiated.
onbeforerowinsertevent String JavaScript function that fires before a new row is inserted in the Grid. As with all onbefore events, returning false in the specified function will cancel the upcoming action - in this case, inserting a row in Grid.
onafterrowinsertevent String JavaScript function that fires after a row is inserted in Grid.
onbeforesortevent String JavaScript function that fires before column in Grid is sorted. As with all onbefore events, returning false in the specified function will cancel the upcoming action - in this case, sorting a column in Grid.
onaftersortevent String JavaScript function that fires after a column in Grid is sorted.
onbeforesaveevent String JavaScript function that fires before Grid initiates a save. As with all onbefore events, returning false in the specified function will cancel the upcoming action - in this case, saving Grid contents.
onaftersaveevent String JavaScript function that fires after a save in Grid is complete.
onrowblurevent String JavaScript function that fires when a row in Grid is blurred, i.e. un-focused.
oncellfocusevent String JavaScript function that fires when a cell in Grid is focused.
onbeforerowdeleteevent String JavaScript function that fires before a row is deleted in the Grid. As with all onbefore events, returning false in the specified function will cancel the upcoming action - in this case, deleting a row from Grid.
onafterrowdeleteevent String JavaScript function that fires after a row is deleted in Grid.
oncellupdateevent String JavaScript function that fires when a cell in Grid is updated.
onrowfocusevent String JavaScript function that fires when a row in Grid is focused.
onbeforecopyevent String JavaScript function that fires before a section of the Grid is copied. As with all onbefore events, returning false in the specified function will cancel the upcoming action - in this case, copying Grid contents to the clipboard.
onaftercopyevent String JavaScript function that fires after a section of the Grid is copied.
onbeforepasteevent String JavaScript function that fires before something is pasted into the Grid. As with all onbefore events, returning false in the specified function will cancel the upcoming action - in this case, pasting rows or cells into the Grid.
onafterpasteevent String JavaScript function that fires after content is pasted into the Grid.
onerrorevent String JavaScript function that fires when the Grid experiences an error???
oncontextmenuevent String ????
oncellvalidateevent String JavaScript function that fires when cell contents change. The eventArgs parameter for this event contains functions that return the old and new value inputed into the cell.
onhtmlreadyevent String JavaScript function that fires when Grid HTML has finished rendering. This event fires when the Grid is initially loaded, when a new page of data is loaded, or when you scroll into new data in LiveScrolling mode.
onkeydownevent String JavaScript function that fires when a key is pressed down.
onkeyupevent String JavaScript function that fires when a key is released.
onmouseoverevent String JavaScript function that fires when the mouse is moved into the Grid.
onmouseoutevent String JavaScript function that fires when the mouse is moved out of the Grid.
onmousemoveevent String JavaScript function that fires when the mouse is moved, as long as the mouse cursor is over the Grid.
onfocusevent String JavaScript function that fires when browser focus moves over to the Grid.
onhitrowendevent String JavaScript function that fires when the Grid scrolls down to the last row.
onhitrowstartevent String JavaScript function that fires when the Grid scrolls up to the first row.

<ntb:columns>

Container element for custom column definitions. Each column definition contained within this element should be one of datecolumn, numbercolumn or textcolumn.

<ntb:textcolumn>

Main column element, defining a column made for containing various types of strings. You can also include an editor type under this column.
Corresponding JavaScript Class: nitobi.components.grid.TextColumn

<ntb:datecolumn>

Main column element, defining a column made for containing various types of dates. You can also include an editor type under this column.
Corresponding JavaScript Class: nitobi.components.grid.DateColumn

- Hide Property Table
Property Type Description
mask String Specifies a display mask for the date column.

<ntb:numbercolumn>

Main column element, defining a column made for containing various types of number values. You can also include an editor type under this column.
Corresponding JavaScript Class: nitobi.components.grid.NumberColumn

- Hide Property Table
Property Type Description
mask String Specifies the mask to use to display values in the column.
groupingseparator String Specifies the character used for separating groupings in numbers.
decimalseparator String Specifies the character used to separate the integral and fractional parts of a decimal number.
negativemask String Specifies the mask used to display negative values in the column.

Editor Types

The following elements can be defined within the <ntb:textcolumn>, <ntb:datecolumn> and <ntb:numbercolumn> elements, to specify a special type of editor to use.

<ntb:checkboxeditor>

Inserts a checkbox element into each cell of the column. Checkbox state is defined by the cell value, and the assigned checked and unchecked values - see the property table below.
Corresponding JavaScript Class: nitobi.form.Checkbox

- Hide Property Table
Property Type Description
checkedvalue String Specifies the cell value that will register the checkbox as checked.
uncheckedvalue String Specifies the cell value that will register the checkbox as unchecked.
<ntb:imageeditor>

Changes cells in the column to be images, where the cell content becomes the image URL for the cell.
Corresponding JavaScript Class: nitobi.form.Image

- Hide Property Table
Property Type Description
imageurl String This property allows the image to be displayed in each cell in the column to be static. The URL of this static image is defined by this property. This way, the cell content is not translated into a cell image URL.
<ntb:linkeditor>

The contents of cells in linkeditor columns become URLs that are launched upon double-clicking the cell.
Corresponding JavaScript Class: nitobi.form.Link

- Hide Property Table
Property Type Description
openwindow Boolean Specifies whether the link should be opened in a new window or not.
<ntb:listboxeditor>

The contents of cells in listbox editors correspond, usually, to a list of other elements. If you want to model dependency relationships within a Grid (think foreign key relationships) then doing so with a listbox or lookup editor is probably the way to go.
Corresponding JavaScript Class: nitobi.form.Listbox

- Hide Property Table
Property Type Description
gethandler String Just like in the Grid itself, the gethandler property specifies the file name and path of the get handler for the lookup editor - this is the server-side script that queries a dynamic datasource for the entries in the lookup.
displayedfields String Specifies a pipe (|) delimited list of the XML field names to be displayed in the listbox. These fields are defined within the listbox editor's get handler.
valuefield String Specifies the XML field name (defined within the listbox get handler) that the cell will use as its actual value.
<ntb:lookupeditor>

The contents of cells in lookup editors correspond, usually, to a list of other elements. The lookup editor is slightly different from a listbox in that a lookup will filter out results based on what you type, as you type - a SmartSearch type of interface. If you want to model dependency relationships within a Grid (think foreign key relationships) then doing so with a listbox or lookup editor is probably the way to go.
Corresponding JavaScript Class: nitobi.form.Lookup

- Hide Property Table
Property Type Description
gethandler String Just like in the Grid itself, the gethandler property specifies the file name and path of the get handler for the lookup editor - this is the server-side script that queries a dynamic datasource for the entries in the lookup.
displayedfields String Specifies a pipe (|) delimited list of the XML field names to be displayed in the listbox. These fields are defined within the listbox editor's get handler.
valuefield String Specifies the XML field name (defined within the listbox get handler) that the cell will use as its actual value.
delay Number Specifies the amount of time that should pass, in milliseconds, before data is requested from the server in response to a user's keystroke.
forcevalidoption Boolean If true, the value entered into the lookup editor needs to be a valid value from the list. This kind of reduces the lookup editor to be closer in functionality to a listbox editor.
<ntb:numbereditor>

Represents the text input area for editing numeric data.
Corresponding JavaScript Class: nitobi.ui.Number

<ntb:passwordeditor>

The password editor allows users to edit data without the data being displayed on the screen.
Corresponding JavaScript Class: nitobi.form.Password

<ntb:textareaeditor>

This editor "expands" the cell text input area when cells in the column are edited. It displayed four lines and gives a bit more room horizontally as well. Essentially replicates a regular <textarea> control.
Corresponding JavaScript Class: nitobi.form.TextArea

<ntb:texteditor>

Represents the text input area for editing text data.
Corresponding JavaScript Class: nitobi.form.TextArea

<ntb:datasources>

This is a container element that holds all of the XML data sources that the Grid component will use.
Corresponding JavaScript Class: nitobi.data.DataSources

<ntb:datasource>

This element is used to declaratively specify an XML data source that is formatted in the Nitobi XML format.
Corresponding JavaScript Class: nitobi.data.DataSource

- Hide Property Table
Property Type Description
id String A unique identifier that can be referenced via the datasourceid property of a databound editor component or the Grid component.
<ntb:data>

This element is a container tag for data records.
Corresponding JavaScript Class: nitobi.data.DataGroup

<ntb:e>

The records are in a format where the attributes correspond to the alphanumeric value of the index in the FieldNames array of the DataSourceStructure. This "Nitobi XML" format drastically reduces the amount of data being sent from the server to the client.
Corresponding JavaScript Class: nitobi.data.DataRecord

<ntb:datasourcestructure>

The schema for a datasource is defined by this element.
Corresponding JavaScript Class: nitobi.data.DataTableSchema

- Hide Property Table
Property Type Description
keys String A bar or pipe ("|") separated list of keys for the DataField. The values must correspond to field names as specfied by the FieldNames property.
fieldnames String A bar or pipe ("|") separated list of field names. The index that the field name appears at in the bar separated list corresponds to that alphabetic attribute name starting at "a", i.e. in the FieldNames string "Name|Email", the Name field corresponds to the "a" attribute and the Email field corresponds to the "b" attribute.

Spotlight

There are no HTML elements when using the Spotlight component - it is purely JavaScript.

Tabstrip

This component allows users to define a tab of different buttons that open up to different contents.

<ntb:tabstrip>

The main Tabstrip HTML element.
Corresponding JavaScript Class: nitobi.TabStrip

- Hide Property Table
Property Type Description
width String Specifies the width of the component in HTML units, e.g. 100px or 50%.
height String Specifies the height of the component in HTML units, e.g. 100px or 50%.

<ntb:tabs>

Corresponds to the element representing the series of tabs.
Corresponding JavaScript Class: nitobi.tabstrip.Tabs

- Hide Property Table
Property Type Description
height String Specifies the height of the tabs in HTML units, e.g. 100px or 50%.
align String The alignment of the tabs; value can be one of 'left', 'right' or 'center'.
overlap Integer A percentage overlap between adjacent tabs.
activateeffect String Determines what effect is applied when the tab is activated; value can be either 'none' or 'fade'.
activetabindex Integer Sets the initial active tab by index.
onmouseout String JavaScript function that fires when the mouse is moved out of the Tabstrip. No 'event' suffix in the Tabstrip on… events???
onmouseover String JavaScript function that fires when the mouse is moved, as long as the mouse cursor is over the Tabstrip.
onclick String JavaScript function that fires when the Tabstrip is clicked.
onbeforetabchange String JavaScript function that fires before a tab switch is initiated. As with all onbefore events, returning false cancels the initiated event - in this case, the tab change event.
ontabchange String JavaScript function that fires after a tab switch.

<ntb:tab>

Represents the individual tab elements within the Tabstrip.
Corresponding JavaScript Class: nitobi.tabstrip.Tab

- Hide Property Table
Property Type Description
width String Specifies the width of the tab in HTML units, e.g. 100px or 50%.
tooltip String String value that will appear as a tooltip when a tab gets hovered with the mouse.
label String The text value displayed in the tab.
source String The contents or source of the tab.
containertype String The type of container for the tab content. If you want to embed a page within the content of the tab, use 'iframe' for the value here.
icon String URL to an image that will be used as the icon for the tab.
cssclassname String The CSS class that will be applied to the tab.
scriptevaluationenabled Boolean Determines whether or not script blocks are recursively evaluated when HTML is loaded in a tab without an iframe. The default is true.
loadondemandenabled Boolean Determines whether to load the tab's contents when the Tabstrip is first rendered or when the tab is first set as the active tab.
hideoverflowenabled Boolean Specifies whether elements from the tab's contents are hidden if they end up being positioned outside of the bounds of the tab.
onclick String JavaScript function that is executed when the tab is clicked.
onmouseout String JavaScript function that is executed when the mouse is moved out of the tab's area.
onmouseover String JavaScript function that is executed when the mouse is moved over the tab's area.
onfocus String JavaScript function that is executed when the tab is focused.
onblur String JavaScript function that is executed when the tab is blurred, i.e. un-focused.
onactivate String JavaScript function that is executed when the tab is activated.
ondeactivate String JavaScript function that is executed when the tab is deactivated.
onload String JavaScript function that is executed when the tab's contents are done loading.

Toolkit

<ntb:element>

General user interface element.
Corresponding JavaScript Class: nitobi.ui.Element

- Hide Property Table
Property Type Description
id String Specifies the id of the object.
oncreated String JavaScript function that fires when the object is created.
onbeforerender String JavaScript function that fires before the element is rendered. As with all onbefore events, if the function specified returns false then the upcoming action is cancelled - in this case, the rendering.
onrender String JavaScript function that fires after the element is rendered.
onbeforesetvisible String JavaScript function that fires before a UI element's visibility is set. As with all onbefore events, returning false cancels the initiated event - in this case, visibility change.
onsetvisible String JavaScript function that fires after UI element's visibility is set.

Tree

User interface element that allows the display of nodes in a tree-like manner.

<ntb:tree>

The HTML tag that corresponds to the overall Tree element.
Corresponding JavaScript Class: nitobi.tree.Tree

- Hide Property Table
Property Type Description
gethandler String Specifies the Tree's get handler URL.
cssclass String Sets the custom CSS class of the Tree. Note: Remember to include the CSS file for this class in your page or include some style blocks in your page that specify styles with classnames that correspond to the class specified in this property.
rootenabled Boolean Specifies whether a special root style is applied to the root nodes.
hoverhighlight Boolean Specifies whether a hover class is added to nodes when the mouse is hovered over them.
targetframe String Specifies the id of the target frame. When a frame target is set, the tree subscribes a function to its own onSelect event. The function changes the source of the frame to the URL specified by the selected node's url attribute.
cssstyle String An initial style string to use for the component. Should you wish to change the style of the component at run-time, see the setStyle() method.
theme String A theme to apply to the component. Create a class of the same name, include it in your page, and apply your personalized theming here. Alternatively, there are a few pre-packaged themes that come with the Tree. For a complete list of available themes, look at the style/tree directory. Each sub-directory corresponds to a separate theme.
expanded Boolean The default expansion for nodes in this Tree. If set to true, every node in the Tree will be expanded to show its children. If set to false, every node will be collapsed. Individual nodes can override this property by setting their own expanded attributes.
effect String This will set the effect family used to expand and collapse nodes in the tree. See the documentation for nitobi.effects.families.
onclick String JavaScript function that fires when any node in the tree is clicked. The clickable areas include the icon and the label of the nodes.
ondeselect String JavaScript function that fires when any node is deselected.
onselect String JavaScript function that fires when any node is selected.
onmouseover String JavaScript function that fires when any node in the Tree is hovered over with the mouse.
onmouseout String JavaScript function that fires when the mouse exits the area that a node occupies.
ondataready String JavaScript function that fires when data has been loaded by the Tree and it is ready to be rendered.

<ntb:children>

Element that is a container for <ntb:node> elements. There is a recursive parent/child relationship between <ntb:children> and <ntb:node> elements.
Corresponding JavaScript Class: nitobi.tree.Children
This element does not have any HTML attributes.

<ntb:node>

Element that represents nodes of a Tree. There is a recursive parent/child relationship between <ntb:children> and <ntb:node> elements.
Corresponding JavaScript Class: nitobi.tree.Node

- Hide Property Table
Property Type Description
gethandler String Specifies the node's get handler URL.
cssclass String Specifies the custom CSS class set on this node.
label String Specifies the text label for the node.
expanded Boolean If set to true, this node's children will be visible when the node is rendered, provided that all ancestors of this node are also expanded. If set to false, the children will be hidden.
nodetype String If set to 'node', the node will be interpreted as being able to have children (often called a node). If set to 'leaf', the tree will assume that this node cannot have children. If this attribute is not set, the tree will interpret the type of the node based on the data available. If the node has a children collection it is a node, if not it is a leaf.
haschildren Boolean If set to true, the node will be expandable. However, if set to false, the node will have no expand/collapse control. If this attribute is not set, the tree will interpret the number of children based on the data available.
onclick String JavaScript function that fires when the node is clicked. The clickable areas include the icon and the label of the node.
ondeselect String JavaScript function that fires when the node is deselected.
onselect String JavaScript function that fires when the node is selected.

TreeGrid

A mix between the Tree and Grid components, this element allows the display of nested Grids which are related in a heirarchical relationship.

<ntb:column>

Please see the <ntb:column> element definition above.

<ntb:grid>

Please see the <ntb:grid> element definition above.

Page tags: html todo
page revision: 52, last edited: 1302804347|%e %b %Y, %H:%M %Z (%O ago)
EditTags History Files Print Site tools+ Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License