Master-Detail Interface

When you need to show additional information on each row, consider using a master-detail interface feature of the dxDataGrid widget. Master-detail interface enables you to display an additional widget in an expandable section of a data row. The data row is called "master row", while the section is called "detail section".

Enable the Master-Detail Interface

To enable the master-detail interface, assign true to the masterDetail | enabled option. This will display a master-detail expand button on the left side of each row. The master-detail expand button is used to display the detail section of a master row. Unless you define a detail section markup, the detail section is empty.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    masterDetail: {
        enabled: true
    }
});

Define Detail Section Markup

After enabling the master-detail interface, specify a template for detail sections. Templates allow you to place virtually anything into the detail sections. For instance, you can display another dxDataGrid or any other UI widget there. To define a template, use the grid's masterDetail | template option.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    masterDetail: {
        enabled: true,
        template: function (container, info) {
            $('<div>').dxDataGrid({ // create a div container and place the dxDataGrid widget in it

                // configure the widget here

            }).appendTo(container); // append the div container to the detail section's container
        }
    }
});

View Demo

For more information on specifying the template for the detail sections, see the template option description.

NOTE: If you need to display a very large amount of data in the detail sections, consider using the dxTabPanel widget to organize data into tabs.

Once loaded, the detail section's content remains cached until the grid's page switches or web page reloads. It prevents data from loading from the data source each time a user expands the detail section. Cashing increases the loading speed of detail sections expanded multiple times and reduces the server load if you use the remote data source.

Master-Detail API

If you need to expand and collapse master-detail rows programmatically, use the following API methods.

NOTE: Pass the "-1" parameter to the expandAll()/collapseAll() methods to force expanding/collapsing master rows only.

These API methods work regardless of the enabled option, so you can expand/collapse a master section by handling any required event with the master-detail expand buttons hidden.

View Demo

In addition to the methods listed above, there is a grouping | autoExpandAll option that defines the initial rows state.

To learn more about expanding and collapsing groups in the dxDataGrid widget, refer to the Expanding and Collapsing Groups topic.