Search results

How to show grouped rows based on the pageSize in ASP.NET Core Grid control

26 Oct 2021 / 1 minute to read

By default, we have displayed the no of records based on the pageSize. If you want to show grouped column rows based on the pageSize then we suggest you to use the below way.

In the below sample, we have overridden the default generateQuery to display the grouped rows instead of grid rows based on the pageSize.

tagHelper
group-page-size.cs
Copied to clipboard
<script>
    var old = ej.grids.Data.prototype.generateQuery;
    ej.grids.Data.prototype.generateQuery = function () {
        var query = old.call(this, true);
        this.pageQuery(query);
        return query;
    };
</script>

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowGrouping="true" allowPaging="true">
    <e-grid-groupSettings showDropArea="true" columns="@(new string[] { "ShipCountry"})"></e-grid-groupSettings>
    <e-grid-pagesettings pageSize=5></e-grid-pagesettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
Copied to clipboard
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}