Skip to main content

subRowConfig

pro version only

This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.

Optional. Specifies the configuration settings of a sub-row

note

Note that when the subRow config is used, Grid doesn't support the TreeGrid mode and the data grouping functionality.

subRowConfig?: ((row: IRow) => ISubRowConfig) | ISubRowConfig;

Parameters​

When the property is set as an object, the specified parameters are applied to all the rows.

When the property is set as a callback function, it is called with the row object as a parameter and returns the subRowConfig object, which allows providing specific configuration for each particular row.

The subRowConfig object may contain the following properties:

  • expanded - (boolean) defines whether a sub-row is expanded by default, false by default
  • preserve - (boolean) saves the state of sub-rows while expanding/collapsing, disappearing from the visible area, data updating, false by default
  • toggleIcon - (boolean) enables the icon for expanding/collapsing, true by default
  • height - (number) the height of a sub-row in pixels, controls the visibility of sub-rows, 200 by default
  • padding - (string | number) the inner padding of a sub-row, 8 by default
  • css - (string) user-defined CSS classes for a sub-row
  • fullWidth - (boolean) defines whether a sub-row will take all the width of Grid, false by default
note

The fullWidth property works only if the subRowConfig property is initialized as an object.

Example​

  • the global configuration of sub-rows
const grid = new dhx.Grid("grid_container", {
    columns: [
        { id: "zone_name", header: [{ text: "Zone name" }] },
        { id: "temperature", header: [{ text: "Temperature" }] },
    ],
    data: dataset,
    subRowConfig: {
        height: 200,
        padding: 8,
        fullWidth: true,
    },
    subRow: ({ zone_name }) => `<div>Details for ${zone_name}</div>`,
});
  • configuring sub-rows settings dynamically

The height setting of the subRowConfig property (set as a callback function) allows you to control the visibility of sub-rows. Set the height setting to 0 if you don't want a sub-row to be created for particular rows.

const grid = new dhx.Grid("grid_container", {
    columns:[
        // columns config
    ],
    data: dataset,
    autoWidth: true,
    subRowConfig: (row) => ({
        height: row.data.length ? 250 : 0, 
        expanded: true
    }),
    subRow: (row) => new dhx.Grid(null, {
        columns: [
            // columns config
        ],
        data: row.data
    }),
});

Related sample:

Related article: Row expander

Related API: subRow

Change log:

  • Added in v9.1