subRow

pro version only

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

Optional. Defines the sub-row content for each row of the main Grid

note

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

subRow?: (row: IRow) => string | IViewConstructor;

Parameters

The subRow property is a callback function which is called with the row object as a parameter and returns HTML as string or a constructor of a subGrid (or any other nested Suite component).

Example

• a sub-row with an HTML content

const grid = new dhx.Grid("grid_container", {
    columns: [
        { id: "zone_name", header: [{ text: "Zone name" }] },
        { id: "temperature", header: [{ text: "Temperature" }] },
        { id: "status", header: [{ text: "Status" }] },
    ],
    data: dataset,
    subRow: ({ zone_name }) => {
        return `<div>Details for ${zone_name}</div>`;
    },
});

• a sub-row with a subgrid

const grid = new dhx.Grid("grid_container", {
    columns: [
        { id: "zone_name", header: [{ text: "Zone name" }] },
        { id: "temperature", header: [{ text: "Temperature" }] },
    ],
    data: dataset,
    subRow: ({ data }) => {
        return new dhx.Grid(null, {
            columns: [
                { id: "animal_type", header: [{ text: "Animal type" }] },
                { id: "name", header: [{ text: "Name" }] },
            ],
            data,
            autoWidth: true,
        });
    },
});

info

For Grid (in the TreeGrid mode) or Tree used in a sub-row it is important to specify the id of the root element to link data to the corresponding collection:

• by using the rootParent property for Grid in the TreeGrid mode
• by using the rootId property for Tree

For example:

const grid = new dhx.Grid("grid_container", {
    columns: [
        // columns config
    ],
    data: dataset,
    subRow: (row) => (
        new dhx.Grid(null, {
            rootParent: "root", // Add the root id
            columns: [
                { id: "country", header: [{ text: "Country" }] },
                { id: "order_quantity", header: [{ text: "Orders" }], type: "number" },
                { id: "average_check", header: [{ text: "Avg check" }], type: "number" },
            ],
            data: row.data,
            autoWidth: true,
            type: "tree",
        })
    ),
});

Related sample: Grid. Row expander. Full config

Related article: Row expander

Related API: subRowConfig

Change log:

• Added in v9.1