Skip to main content

spans

Optional. Describes the configuration of cols/rows spans

spans?: object[];

Example

const grid = new dhx.Grid("grid_container", {
    columns: [ 
        // columns config
    ],
    spans: [
        {row:"0", column:"a", rowspan:5 },
        {row:"0", column:"b", rowspan:9, text:"<h2>Some content here</h2>"},
        {row:"0", column:"c", colspan:2, text:"Some content"},
        {row:"10", column:"a", colspan:4, text:"Some header", css:"myCustomColspan"}
    ],
    data: dataset
});

Related sample: Grid. Grouped headers (spans)

Each object in the spans array contains the following properties:

row(string|number) obligatory, the id of a row
column(string|number) obligatory, the id of a column
rowspan(number) optional, the number of rows in a span
colspan(number) optional, the number of columns in a span
text(string|number) optional, the content of a span
css(string) optional, the name of a CSS class applied to a span
tooltip(boolean) enables a tooltip on hovering over the content of a span, or sets the configuration object with the tooltip settings; true by default. When set as an object, the tooltip config can have the following properties:
  • force - (optional) forces opening of a tooltip; if set to true, the showDelay and hideDelay settings are ignored, false by default
  • showDelay - (optional) the time period that should pass before showing a tooltip, in ms
  • hideDelay - (optional) the time period that should pass before hiding a tooltip, in ms
  • margin - (optional) the margin between the node and tooltip; 8px by default
  • position - (optional) the position of a tooltip: "right", "bottom", "center", "left", "top"; "bottom" by default
  • css - (optional) the style of a tooltip box

Change log:

  • The ability to set the tooltip config as an object is added in v8.4
  • The tooltip property is added in v6.5.