Populate Aggregate Based Grid Using Kendo UI and JQuery

Whenever we populate a grid to display data, it always consists of multiple rows and columns in a simple tabular format. But sometimes we need to display the data in a complex format, such as with a SubGroup type where the entire data will be a sub group on the basis of a specific field value. And as per the criteria, it will also display the total number of items and also some aggregate values in the sub group footer.  

 

Suppose we want to populate a product details grid, where we want to group the product data as per the product category and each category must display a total number of products and total prices in the group footer section. This article will show how to populate this type of grid view using a Kendo UI and jQuery. 

 

For this, at first we need to create the model class of Product as below:

  public class Product
  {
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
        public int OrderUnit { get; set; }
        public int StockUnit { get; set; }
        public string ProductType { get; set; }
  }

Now, we add a controller class to the project and add the following code to populate product list. The product list will be called by an Action Method that returns a JSON result to bind the grid as follows:

public ActionResult AggregatesGrid()
{
    List<Product> lstData = GetProductList();
    return Json(lstData, JsonRequestBehavior.AllowGet);
}

public List<Product> GetProductList()
{
    List<Product> lstData = new List<Product>();
    Product objData = new Product();
    objData.ProductName = "Samsung Note 3";
    objData.UnitPrice = 32000;
    objData.OrderUnit = 10;
    objData.StockUnit = 12;
    objData.ProductType = "Mobile";
    lstData.Add(objData);

    objData = new Product();
    objData.ProductName = "Nokia Lumia";
    objData.UnitPrice = 14000;
    objData.OrderUnit = 6;
    objData.StockUnit = 2;
    objData.ProductType = "Mobile";
    lstData.Add(objData);

    objData = new Product();
    objData.ProductName = "Samsung Galaxy";
    objData.UnitPrice = 18000;
    objData.OrderUnit = 3;
    objData.StockUnit = 12;
    objData.ProductType = "Mobile";
    lstData.Add(objData);

    objData = new Product();
    objData.ProductName = "Sony LED";
    objData.UnitPrice = 24000;
    objData.OrderUnit = 4;
    objData.StockUnit = 6;
    objData.ProductType = "TV";
    lstData.Add(objData);

    objData = new Product();
    objData.ProductName = "Samsung LED";
    objData.UnitPrice = 28500;
    objData.OrderUnit = 10;
    objData.StockUnit = 12;
    objData.ProductType = "TV";
    lstData.Add(objData);
    return lstData;
}

public ActionResult ProductGrid()
{
    return View();
}

Now, right on the Action Method "ProductGrid" and select Add View. Open the view and write down the following code within the view: 

@{
    ViewBag.Title = "ProductGrid";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Product Grid</h2>
<div>
    <div id="grdProduct"></div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $.post('@Url.Action("AggregatesGrid", "Grid")')
            .done(function (result) {
                $('#grdProduct').kendoGrid({
                    dataSource: {
                        data: result,
                        scheme: {
                            model: {
                                fields: {
                                    ProductName: { type: "string" },
                                    UnitPrice: { type: "number" },
                                    OrderUnit: { type: "number" },
                                    StockUnit: { type: "number" }
                                }
                            }
                        },
                        group: {
                            field: "ProductType", aggregates: [
                               { field: "ProductName", aggregate: "count" },
                               { field: "UnitPrice", aggregate: "sum" },
                               { field: "UnitsOnOrder", aggregate: "average" },
                               { field: "UnitsInStock", aggregate: "count" }
                            ]
                        },
                        aggregate: [
                                        { field: "ProductName", aggregate: "count" },
                                        { field: "UnitPrice", aggregate: "sum" },
                                       { field: "UnitsOnOrder", aggregate: "average" },
                                       { field: "UnitsInStock", aggregate: "count" }
                        ]
                    },
                    sortable: true,
                    scrollable: false,
                    pageable: true,
                    columns: [
                        { field: "ProductName", title: "Product Name", aggregates: ["count"], groupFooterTemplate: "Count: #=count#" },
                        { field: "UnitPrice", title: "Unit Price", aggregates: ["sum"], groupFooterTemplate: "Total: #=sum#" },
                        { field: "OrderUnit", title: "Order Unit" },
                        { field: "StockUnit", title: "Stock Unit" }
                    ]
                });
            }).error(function (r) {
                alert('Try Again')
            });
    });
</script>

 Now, its done. Now run the code and it will show the output as below: