How to show grouped rows based on the pageSize
17 Feb 20221 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
.
<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>
@Html.EJS().Grid("FlatGrid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowSorting().Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
}).AllowPaging().PageSettings(page => page.PageSize(5)).AllowGrouping().GroupSettings(group=>group.Columns(new string[] { "ShipCountry" })).Render()
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}