Configuration 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

    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.

    template

    Specifies the template for detail sections.

    Type: template
    Function parameters:
    detailElement: jQuery
    The detail section's container.
    detailInfo: Object
    Information about the master row.
    Object structure:
    key: any
    The key of the master row.
    data: Object
    The object of the data source presented by the master row.

    Use the template option to define the markup of detail sections in a master-detail hierarchy. Implement a function defining the content of a detail section and assign it to this option. For example, to display another DataGrid widget in the detail section, you can use the following code.

    JavaScript
    $("#gridContainer").dxDataGrid({
        // ...
        masterDetail: {
            enabled: true,
            template: function (container, info) {
                $('<div>').dxDataGrid({ // create a div container and place the **DataGrid** widget in it
                    // ...
                    // configure the widget here
                }).appendTo(container); // append the div container to the detail section's container
            }
        }
    });

    NOTE: When utilizing the Knockout or AngularJS library in your application, you can specify the template using the dxTemplate markup component.

    See Also

    If you are using AngularJS and trying to access row object fields within a template, use a variable whose name is assigned to the dx-item-alias directive. Add this directive to the widget element as shown in the following code. Without this directive, row object fields are beyond reach.

    HTML
    <div id="gridContainer" dx-data-grid="gridOptions" dx-item-alias="employee">
        <div data-options="dxTemplate: { name: 'detail' }">
            <div class="internal-grid-container">
                <div>{{ employee.data.FirstName + " " + employee.data.LastName + " Tasks:" }}</div>
                <div class="internal-grid" dx-data-grid="{
                    dataSource: employee.data.Tasks,
                    columns: ['Subject', {
                        dataField: 'StartDate',
                        dataType: 'date'
                    }, {
                        dataField: 'DueDate',
                        dataType: 'date'
                    }]                
                }"></div>
            </div>
        </div>
    </div>

    It is also possible to define the template in markup. For this purpose, use one of the following template engines.

    Using a template engine, pass one of the following values to the template option.

    • A jQuery object representing the template's container.
    • A DOM Node representing the template's container.
    • A function that returns a jQuery object or a DOM Node representing the template's container.