Initializing help system before first use

vdl-datagrid-column

Define an array column within a <vdl-datagrid>. Must be contained within a <vdl-datagrid> element. You can also add <vdl-datagrid-column> elements associated with index sets in the datagrid to allow customization of the index columns.

since 5.2

Example

<vdl-datagrid>
    <vdl-datagrid-column entity="MY_ARRAY_1" editable="true">
        <vdl-validate pass="=value > 10">Value must be greater than 10</vdl-validate>
    </vdl-datagrid-column>
    <vdl-datagrid-column entity="MY_ARRAY_2">
        <vdl-index-filter set="MY_INDEX_SET" value="=2"></vdl-index-filter>
    </vdl-datagrid-column>
</vdl-datagrid>

Attributes

bottom-calc Specify a built-in calculation, one of avg, max, min, sum, concat or count to show that calculated value, alternatively provide a custom function, as a dynamic expression.
Variable Type Description
values (string|boolean|number) Array of column values
data string All table data
calcParams Array.<(string|boolean|number)> params passed from the column definition object
since 5.2 accepts expression
class CSS classes to add to the table column cells. You can provide multiple classes separated by spaces. since 5.2 accepts expression
disable-set-sorting When applied to an index column, this will prevent set sorting from being applied to the column. Default table sorting will be used instead. It will also exclude this column from the default list of sorted columns. This option is provided to reduce the sorting overhead where performance is being affected. Set the value to "true" to disable set sorting for this datagrid column. since 5.2
editable Whether the cells within this column are editable. The column will automatically switch to read-only whilst the bound scenario is reserved for execution. Accepts a string, boolean, or callback which determines if an individual cell can be edited. The callback is invoked when a cell is clicked and is provided with an VdlDatagridCellDetails object to help a decision be made.
/* VdlDatagridCellDetails
{
   cellValue: (string|number|boolean|null|undefined),
   columnDefinition: ColumnDefinition,
   rowData: (string|number|boolean|null|undefined)[] | Record,
   treeParentRow: false | RowDefinition,
   tableData: (string|number|boolean|null|undefined)[][],
}
*/
Variable Type Description
details VdlDatagridCellDetails The clicked cell's details. See the type definition above.
Returns
boolean Whether the cell is editable.
since 5.2 accepts expression
editor Optional callback to provide a custom editor for a cell, returning its DOM node which will be rendered inside the cell, or false to abort editing.
Variable Type Description
cellDetails VdlDatagridCellDetails VdlDatagridCellDetails object for the cell (as used in other areas of VDL)
onRendered Function function to call when the editor has been rendered
success Function function to call to pass the successfully updated value to Tabulator
cancel Function function to call to abort the edit and return to a normal cell
editorParams any params object passed into the editorParams column definition property
columnDefinition ColumnDefinition ColumnDefinition object (as used in other areas of VDL)
since 5.8 requires expression
editor-checked-value The value to set the cell data to if input type is checkbox and it is checked. since 5.2
editor-options An expression that results in one of the follow to be used as the select options: an array of values, an object of property to value or an array of objects containing key and value properties. This will automatically set the editor-type to be select. Note, an empty string value in the options will result in the array element being deleted when they user selects it.
Variable Type Description
value (string|boolean|number) The value of the cell. Its data type will match that of the array elements in this column.
rowData Array.<(string|boolean|number)> The indices for the current row, this does not include array entities. The order of the indices reflects the underlying order of the array indices rather than the displayed order.
Returns
Array.<(string|boolean|number)>|Object.<string, string>|Array.<{key: (string|boolean|number), value: string}> An array of values, an object of property to value or an array of objects containing key and value properties, the value property is displayed in the UI.
since 5.2 requires expression
editor-options-include-empty Allow array elements to be removed using the select input. Setting this to true will add a blank item to the top of the select list. Note, an empty value in the options will result in the array element being deleted when they user selects it. since 5.2
editor-options-set Name of a set entity (or index entity from Python) to use for select options. This will display labels if a labels entity is defined against this set. This will automatically set the editor-type to be select. Note, an empty string value in the options will result in the array element being deleted when they user selects it. since 5.2
editor-params Additional custom parameters passed to the editor callback. since 5.8 accepts expression
editor-type The editor type to use, in edit mode, for cells in this column. If not specified then it will be autodetected based on entity type. Possible values: checkbox, select, text. since 5.2
editor-unchecked-value The value to set the cell data to if input type is checkbox and it is not checked. since 5.2
entity Name of the array entity to show in this column. Throws an error if the entity doesn't exist or is not an array or set type. since 5.2
filter-by-formatted Use formatted values for filtering. This defaults to false unless the entity has a label in which case the default is true. since 5.2
format Specify a number formatting string. Only applicable to array elements of type integer, real, decision variable and constraint. The formatting syntax is explained in the Xpress Insight Developer Guide. since 5.2
heading A custom header for this column, will default to be the entity alias. Alternatively, you can set the title as the text contents of the <vdl-datagrid-column> element. since 5.2 accepts expression
post-save A callback executed after a successful cell edit. It can only be defined on a column that is bound to an array entity
Variable Type Description
oldValue (string|boolean|number) The value before the cell edit.
newValue string|boolean|number The value after the cell edit.
entityName string The name of the column entity.
indices Array.<(string|number)> The indices for the current row.
since 5.7 requires expression
render Reference to a custom cell renderer. Overrides any default entity rendering. This will be used to generate the cell value for rendering, filtering and sorting. It must be an expression and resolves as a function, this function should return a string. The string can either be a new value or an HTML fragment to display int he cell. Render callback may only reference entities through VDL expression that are not present on the table. If it is necessary to use entities data from other columns, then rowData array must be used in the render callback. When a column render function is specified, labels are not automatically looked up or rendered in the cells for that column.
Variable Type Description
data (string|boolean|number) The value of the cell being rendered. Its data type will match that of the array elements in this column. The cell value will be HTML escaped to avoid XSS security issues.
type string The type call data requested - this will be filter, display or sort.
rowData Array.<(string|boolean|number)> The values from each cell in the current row (indices and data cells). The order of the row data reflects the underlying order of the array indices rather than the display order.
since 5.2 requires expression
scenario The scenario id/index for this column. Not allowed on index column (when specifying a set entity). This attribute will not affect the scenario variable in the render expression. since 5.2 accepts expression
set Name of the set entity to show in this column. Throws an error if the entity doesn't exist or is not a set type. since 5.2
set-position Index (zero-based) of occurrence of that index set in the index tuple for the array. Defaults to next available position. since 5.2
sort-by-formatted Use formatted values for sorting. This is always set to enabled for calculated columns. since 5.2
sort-direction The direction the column data should be sorted in. Can take one of the following values: "asc" for ascending values or "desc" for descending values. since 5.2
sort-order Sets the column to be sorted by default, provide a number from 0. With multiple sorted columns the number provides the order in which sorting should be applied to the columns, so the highest number will result in the column having sorting applied last. since 5.2
width The width, in pixels, to set the column. since 5.2 accepts expression

Element contents

Text content only

The text contents are used as the column header. If the "heading" attribute is specified it will override the text contents as the column header. It can also contain multiple <vdl-validate> tags, which are used for column value validation. Validation is performed on initialisation and on every change.

Parent Topic VDL 5 Reference

© 2001-2025 Fair Isaac Corporation. All rights reserved. This documentation is the property of Fair Isaac Corporation (“FICO”). Receipt or possession of this documentation does not convey rights to disclose, reproduce, make derivative works, use, or allow others to use it except solely for internal evaluation purposes to determine whether to purchase a license to the software described in this documentation, or as otherwise set forth in a written software license agreement between you and FICO (or a FICO affiliate). Use of this documentation and the software described in it must conform strictly to the foregoing permitted uses, and no other use is permitted.