Caption Template

24 Feb 20221 minute to read

You can customize the group caption by using the captionTemplate property of e-grid-groupsettings tag helper.

CSHTML

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowGrouping="true"  height="315"> 
    <e-grid-groupsettings captionTemplate="#captiontemplate" columns="@(new string[] {"EmployeeID"})"></e-grid-groupsettings>
    <e-grid-columns>
        <e-grid-column field="EmployeeID" headerText="Employee ID" ></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID"></e-grid-column>       
        <e-grid-column field="FirstName" headerText="First Name" width="120"></e-grid-column>
        <e-grid-column field="Title" headerText="Title" width="170"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script id="captiontemplate" type="text/x-template">
    ${field} - ${key}
</script>

Caption-temp.cs

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