masterDetail

Allows you to build a master-detail interface in the grid.

Type:

Object

In DataGrid, a master-detail interface supplies a usual data row with an expandable section that contains the details on this data row. In that case, the data row is called "master row", while the section is called "detail section".

To enable the master-detail interface, assign true to the masterDetail.enabled option. After that, specify the template for detail sections using the masterDetail.template option. Templates allow you to place virtually anything into the detail sections. For example, you can display another DataGrid or any other UI widget there. For more information on specifying the template for the detail sections, see the template option description.

View Demo Watch Video

See Also

autoExpandAll

Specifies whether detail sections appear expanded or collapsed.

Type:

Boolean

Default Value: false
NOTE
This feature is available only when all data is located locally.

enabled

Enables an end-user to expand/collapse detail sections.

Type:

Boolean

Default Value: false

If you set this option to true, each grid row will be supplied with an arrow that allows an end-user to expand/collapse the detail section of this row.

If the masterDetail.enabled option is false, the expanding arrows are missing. It makes detail sections unreachable for an end-user.

Setting this option to false is recommended if you need a custom logic of expanding/collapsing the detail sections. When implementing this logic, you can use specific API methods. To check whether the detail section is expanded or collapsed, use the isRowExpanded(key) method. To expand or collapse a specific detail section, call the expandRow(key) or collapseRow(key) method respectively.

View Demo

See Also

template

Specifies a custom template for detail sections.

Type:

template

Function parameters:
detailElement:

Element (jQuery or HTML)

The detail section's container. It is an HTML Element or a jQuery Element when you use jQuery.

detailInfo:

Object

Information about the master row.

Object structure:
key: any

The master row's key.

data:

Object

The master row's data object.

jQuery
JavaScript
$("#dataGridContainer").dxDataGrid({
    // ...
    masterDetail: {
        enabled: true,
        template: function (container, info) {
            $('<div>').dxDataGrid({ 
                // configure the widget here
            }).appendTo(container); 
        }
    }
});
Angular
HTML
TypeScript
<dx-data-grid  ...
    [masterDetail]="{ enabled: true, template: 'detail' }">
    <div *dxTemplate="let employee of 'detail'">
        <div class="internal-grid-container">
            <dx-data-grid ... ></dx-data-grid>
        </div>
    </div>
</dx-data-grid>
import { DxDataGridModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
See Also