Detail Template in ASP.Net Core Grid Component

27 Sep 202317 minutes to read

The detail template provides additional information about a particular row by expanding or collapsing detail content. The detailTemplate property accepts either the template string or HTML element ID.

CSHTML

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource"  detailTemplate="#detailtemplate"> 
    <e-grid-columns> 
        <e-grid-column field="FirstName" headerText="First Name" width="110"></e-grid-column> 
        <e-grid-column field="LastName" headerText="Last Name" width="110"></e-grid-column> 
        <e-grid-column field="Title" headerText="Title" width="150"></e-grid-column> 
        <e-grid-column field="Country" headerText="Country" width="110"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid>

<style type="text/css" class="cssStyles">
    .detailtable td {
        font-size: 13px;
        padding: 4px;
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .photo {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);
    }
</style> <script type="text/x-template" id="detailtemplate">
    <table class="detailtable" width="100%">
        <colgroup>
            <col width="35%" />
            <col width="35%" />
            <col width="30%" />
        </colgroup>
        <tbody>
            <tr>
                <td rowspan="4" style="text-align: center;">
                    <img class="photo" src="/scripts/Images/Employees/${EmployeeID}.png" alt="${EmployeeID}" />
                </td>
                <td>
                    <span style="font-weight: 500;">First Name: </span> ${FirstName}
                </td>
                <td>
                    <span style="font-weight: 500;">Postal Code: </span> ${PostalCode}
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-weight: 500;">Last Name: </span> ${LastName}
                </td>
                <td>
                    <span style="font-weight: 500;">City: </span> ${City}
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-weight: 500;">Title: </span> ${Title}
                </td>
                <td>
                    <span style="font-weight: 500;">Phone: </span> ${HomePhone}
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-weight: 500;">Address: </span> ${Address}
                </td>
                <td>
                    <span style="font-weight: 500;">HireDate: </span> ${HireDate.toLocaleDateString()}
                </td>
            </tr>
        </tbody>
    </table>
</script>

Detail-temp.cs

public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

Rendering custom component

To render the custom component inside the detail row, define the template in the detailTemplate property and render the component in the detailDataBound event.

For example, to render grid inside the detail row, place an HTML div element in the detailTemplate property and render the DIV element as grid component in the detailDataBound event.

CSHTML

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" detailTemplate="#detailtemplate" detailDataBound="detailDataBound">
        <e-grid-columns>
            <e-grid-column field="FirstName" headerText="First Name" width="110"></e-grid-column>
            <e-grid-column field="LastName" headerText="Last Name" width="110"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>
    
    <script id='detailtemplate' type="text/x-template">
        <div class='custom-grid'></div>
    </script>
    
    <script>
        function detailDataBound(e) {
           var data = @Json.Serialize(ViewBag.ChildDataSource);
            var detail = new ej.grids.Grid({
                dataSource: data.filter((item) => item['EmployeeID'] === e.data['EmployeeID']).slice(0, 3),
                columns: [
                    { field: 'OrderID', headerText: 'Order ID', width: 110 },
                    { field: 'CustomerID', headerText: 'Customer Name', width: 140 },
                    { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
                ]
            });
            detail.appendTo(e.detailElement.querySelector('.custom-grid'));
        }
    </script>

Custom-component.cs

public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    ViewBag.ChildDataSource = ChildDetails.GetRecords();
    return View();
}

Expand by external button

By default, detail rows render in collapsed state. You can expand a detail row by invoking the expand method using the external button.

CSHTML

<input type="text" value="1" class="rowindex" />
    <ejs-button id="expand" content="Expand"></ejs-button>
    <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" detailTemplate="#detailtemplate">
        <e-grid-columns>
            <e-grid-column field="FirstName" headerText="First Name" width="110"></e-grid-column>
            <e-grid-column field="LastName" headerText="Last Name" width="110"></e-grid-column>
            <e-grid-column field="Title" headerText="Title" width="150"></e-grid-column>
            <e-grid-column field="Country" headerText="Country" width="110"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>

    <script>
        document.getElementById('expand').addEventListener('click', () => {
            var grid = document.getElementById("Grid").ej2_instances[0];
            var inputElem = (document.getElementsByClassName('rowindex')[0]);
            var rowIndex= parseInt(inputElem.value, 10);
            grid.detailRowModule.expand(rowIndex);
        });
    </script>

<style type="text/css" class="cssStyles">
    .detailtable td {
        font-size: 13px;
        padding: 4px;
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .photo {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);
    }
</style> <script type="text/x-template" id="detailtemplate">
    <table class="detailtable" width="100%">
        <colgroup>
            <col width="35%" />
            <col width="35%" />
            <col width="30%" />
        </colgroup>
        <tbody>
            <tr>
                <td rowspan="4" style="text-align: center;">
                    <img class="photo" src="/scripts/Images/Employees/${EmployeeID}.png" alt="${EmployeeID}" />
                </td>
                <td>
                    <span style="font-weight: 500;">First Name: </span> ${FirstName}
                </td>
                <td>
                    <span style="font-weight: 500;">Postal Code: </span> ${PostalCode}
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-weight: 500;">Last Name: </span> ${LastName}
                </td>
                <td>
                    <span style="font-weight: 500;">City: </span> ${City}
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-weight: 500;">Title: </span> ${Title}
                </td>
                <td>
                    <span style="font-weight: 500;">Phone: </span> ${HomePhone}
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-weight: 500;">Address: </span> ${Address}
                </td>
                <td>
                    <span style="font-weight: 500;">HireDate: </span> ${HireDate.toLocaleDateString()}
                </td>
            </tr>
        </tbody>
    </table>
</script>

Expand-external.cs

public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

NOTE

• You can expand all the rows by using expandAll method.
  
  * If you want to expand all the rows at initial Grid rendering, then use expandAll method in dataBound event of the Grid.

Limitations for detail template

Detail template is not supported with the following features:

• Frozen rows and columns
• Immutable mode
• Infinite scrolling
• Virtual scrolling
• Print
• Row template
• Row spanning
• Column spanning
• Lazy load grouping
• State persistence
• Hierarchy Grid

NOTE

• You can expand all the rows by using expandAll method.
  
  * If you want to expand all the rows at initial Grid rendering, then use expandAll method in dataBound event of the Grid.

Limitations for detail template

Detail template is not supported with the following features:

• Frozen rows and columns
• Immutable mode
• Infinite scrolling
• Virtual scrolling
• Print
• Row template
• Row spanning
• Column spanning
• Lazy load grouping
• State persistence
• Hierarchy Grid