addSpan

adds colspan or rowspan to the datatable

void addSpan(number|string|object id,string column,number width,number height, [string value,string css] );

Parameters

idnumber|string|objectid of the row that starts colspan/rowspan
columnstringid of the column that starts colspan/rowspan
widthnumberhow many columns should the span include
heightnumberhow many rows should the span include
valuestringvalue that the span area should display
cssstringcss class that should be applied to the span area

Available only in PRO Edition

Example

grid.addSpan(1, "country", 1, 3);
grid.refresh();

Details

To enable the rowspans and colspans functionality, you should set the spans parameter with the true value in the datatable configuration:

webix.ui({
    view:"datatable",
    columns:[...],
    spans:true
    ...
});

The method can as well take an array of arrays with the same configuration (id, column, width, height, value, css) to define several spans at a time.

grid.addSpan([
    [1, "country", 1, 3],
    [4, "country", 1, 2],
    [6, "country", 1, 3]
]);

Defaults:

  • default values for span width and height are 1;
  • span value parameter is optional and used if a custom text for the cell is required. If you need to display the initial value, omit this field or pass an empty value ("", null);
  • span css is optional. By default, colspans and rowspans don't feature any special styling.
See also
Back to top
If you have not checked yet, be sure to visit site of our main product Webix javascript dashboard framework and page of javascript data table product.