JavaScripTools Manual

JavaScripTable

Column properties

Each Column instance has 2 read-only properties: table (containing the JavaScripTable instance that contains the column) and index (the index inside the table). They are set after adding the column to the table. Also, it is important to note the header property, that reflects the header text. Also, sorting may be disabled by setting sortable to false.

When the table is in client side mode, it is important to set the type property to one of these constants: JST_TYPE_STRING, JST_TYPE_NUMERIC, JST_TYPE_CURRENCY, JST_TYPE_DATE or JST_TYPE_BOOLEAN. This is need to compute the right sorting. The default is JST_TYPE_STRING.

The style may be customized using:

• width, align and valign reflects those TD element attributes.
• cellTextClass, cellTextStyle, headerTextClass, headerTextStyle reflects the style and class attributes for TDs on header and on data rows.
• cropRepeated: If set to true, repeated values (on consecutive rows) won't be displayed.
• colspan and rowspan: When row breaks are used on the table, determine each cell rowspan and colspan, which must be set when "subrows" have different number of columns.
• visible: Columns may be hidden or shown without changing their indexes by setting this property to a boolean value.

Cell functions may be used to allow a custom function to be executed when the user clicks on the cell text. This is done by the cellFunction property. It should be set to a function reference that receives the row identifier, the column index and the table reference.

Editing columns

A column may be edited by setting editable to true. In that case, the column must have an EditControl instance set on the editControl property. The control has the following properties:

• type: Determines what control type will be used to edit the data. Many be one of the following constants: JST_CONTROL_TEXT (the default), JST_CONTROL_PASSWORD, JST_CONTROL_TEXTAREA, JST_CONTROL_CHECKBOX, JST_CONTROL_RADIO, JST_CONTROL_SELECT or JST_CONTROL_SELECT_MULTIPLE. The last 4 requires the column property possibleValues to be set to a Map instance. The value for each option will be a Map key, and the text, a value.
• multiline: A boolean value indicating if, when multiple controls are rendered, a row break will be displayed between each one or not.
• name: The control name. If the table is inside a form, and the form is submitted, the values may be retrieved by that name. Note that this is not that simple on radio or checkboxes, because controls with the same name are considered a group by the browser. So, the names for each group os controls (controls on the same cell) have the specified name plus "_<RowId>".
• attributes: the text on this property will be rendered inside the control tag, so, attributes like maxlength, style and onkeypress may be specified.

Editable cells may be validated after editing by using the validateFunction property, setting it to a function that receives the cell value, the column instance and the row instance. Returning a boolean value means valid or not. Returning a string means invalid, and the string being a message to show. Also, the allowEmptyValue property determines if empty values are accepted or not.

It is possible to use InputMask, NumberMask, DateMask or SizeLimit for each control by setting the column getMaskFunction to a function instance that receives the control instance, the column instance and the row instance. It should return an instance of those masks, for example:

var column = table.addColumn(...);
column.editable = true;
column.getMaskFunction = function (control) {
    return new InputMask("####/##", control);
}