Your search did not match any results.
Data Grid

Grid Summaries

Documentation
The DataGrid widget allows you to display data summaries within its container. This example illustrates the use of total summaries. The demo is configured using the totalItems array declared within the summary object. This array contains several objects that specify summary settings for each item.
@(Html.DevExtreme().DataGrid() .ID("gridContainer") .DataSource(d => d.WebApi().Controller("DataGridSummaries").Key("ID")) .Selection(s => s.Mode(SelectionMode.Single)) .Columns(columns => { columns.Add() .DataField("OrderNumber") .Width(130) .Caption("Invoice Number"); columns.Add() .DataField("OrderDate") .DataType(GridColumnDataType.Date) .Width(160); columns.Add() .DataField("Employee"); columns.Add() .Caption("City") .DataField("CustomerStoreCity"); columns.Add() .Caption("State") .DataField("CustomerStoreState"); columns.Add() .DataField("SaleAmount") .Alignment(HorizontalAlignment.Right) .Format(Format.Currency); }) .Summary(s => s.TotalItems(items => { items.Add() .Column("OrderNumber") .SummaryType(SummaryType.Count); items.Add() .Column("OrderDate") .SummaryType(SummaryType.Min) .CustomizeText(@<text> function(data) { return "First: " + Globalize.formatDate(data.value, { date: "medium" }); } </text>); items.Add() .Column("SaleAmount") .SummaryType(SummaryType.Sum) .ValueFormat(Format.Currency); }) ) )
using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.DataGrid; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class DataGridController : Controller { public ActionResult GridSummaries() { return View(); } } }
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers { [Route("api/[controller]/[action]")] public class DataGridSummariesController : Controller { [HttpGet] public object Get(DataSourceLoadOptions loadOptions) { return DataSourceLoader.Load(SampleData.Orders.Where(o => o.ID != 14), loadOptions); } } }
using System; namespace DevExtreme.NETCore.Demos.Models { public class Order { public int ID { get; set; } public int OrderNumber { get; set; } public DateTime OrderDate { get; set; } public int SaleAmount { get; set; } public string Terms { get; set; } public int TotalAmount { get; set; } public string CustomerStoreState { get; set; } public string CustomerStoreCity { get; set; } public string Employee { get; set; } } }
using System; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<Order> Orders { get { return new List<Order> { new Order { ID = 1, OrderNumber = 35703, OrderDate = DateTime.Parse("2014/04/10"), SaleAmount = 11800, Terms = "15 Days", TotalAmount = 12175, CustomerStoreState = "California", CustomerStoreCity = "Los Angeles", Employee = "Harv Mudd" }, new Order { ID = 4, OrderNumber = 35711, OrderDate = DateTime.Parse("2014/01/12"), SaleAmount = 16050, Terms = "15 Days", TotalAmount = 16550, CustomerStoreState = "California", CustomerStoreCity = "San Jose", Employee = "Jim Packard" }, new Order { ID = 5, OrderNumber = 35714, OrderDate = DateTime.Parse("2014/01/22"), SaleAmount = 14750, Terms = "15 Days", TotalAmount = 15250, CustomerStoreState = "Nevada", CustomerStoreCity = "Las Vegas", Employee = "Harv Mudd" }, new Order { ID = 7, OrderNumber = 35983, OrderDate = DateTime.Parse("2014/02/07"), SaleAmount = 3725, Terms = "15 Days", TotalAmount = 3850, CustomerStoreState = "Colorado", CustomerStoreCity = "Denver", Employee = "Todd Hoffman" }, new Order { ID = 9, OrderNumber = 36987, OrderDate = DateTime.Parse("2014/03/11"), SaleAmount = 14200, Terms = "15 Days", TotalAmount = 14800, CustomerStoreState = "Utah", CustomerStoreCity = "Salt Lake City", Employee = "Clark Morgan" }, new Order { ID = 11, OrderNumber = 38466, OrderDate = DateTime.Parse("2014/03/01"), SaleAmount = 7800, Terms = "15 Days", TotalAmount = 8200, CustomerStoreState = "California", CustomerStoreCity = "Los Angeles", Employee = "Harv Mudd" }, new Order { ID = 14, OrderNumber = 39420, OrderDate = DateTime.Parse("2014/02/15"), SaleAmount = 20500, Terms = "15 Days", TotalAmount = 9100, CustomerStoreState = "California", CustomerStoreCity = "San Jose", Employee = "Jim Packard" }, new Order { ID = 15, OrderNumber = 39874, OrderDate = DateTime.Parse("2014/02/04"), SaleAmount = 9050, Terms = "30 Days", TotalAmount = 19100, CustomerStoreState = "Nevada", CustomerStoreCity = "Las Vegas", Employee = "Harv Mudd" }, new Order { ID = 18, OrderNumber = 42847, OrderDate = DateTime.Parse("2014/02/15"), SaleAmount = 20400, Terms = "30 Days", TotalAmount = 20800, CustomerStoreState = "Wyoming", CustomerStoreCity = "Casper", Employee = "Todd Hoffman" }, new Order { ID = 19, OrderNumber = 43982, OrderDate = DateTime.Parse("2014/05/29"), SaleAmount = 6050, Terms = "30 Days", TotalAmount = 6250, CustomerStoreState = "Utah", CustomerStoreCity = "Salt Lake City", Employee = "Clark Morgan" }, new Order { ID = 29, OrderNumber = 56272, OrderDate = DateTime.Parse("2014/02/06"), SaleAmount = 15850, Terms = "30 Days", TotalAmount = 16350, CustomerStoreState = "Utah", CustomerStoreCity = "Salt Lake City", Employee = "Clark Morgan" }, new Order { ID = 30, OrderNumber = 57429, OrderDate = DateTime.Parse("2013/12/31"), SaleAmount = 11050, Terms = "30 Days", TotalAmount = 11400, CustomerStoreState = "Arizona", CustomerStoreCity = "Phoenix", Employee = "Clark Morgan" }, new Order { ID = 32, OrderNumber = 58292, OrderDate = DateTime.Parse("2014/05/13"), SaleAmount = 13500, Terms = "15 Days", TotalAmount = 13800, CustomerStoreState = "California", CustomerStoreCity = "Los Angeles", Employee = "Harv Mudd" }, new Order { ID = 36, OrderNumber = 62427, OrderDate = DateTime.Parse("2014/01/27"), SaleAmount = 23500, Terms = "15 Days", TotalAmount = 24000, CustomerStoreState = "Nevada", CustomerStoreCity = "Las Vegas", Employee = "Harv Mudd" }, new Order { ID = 39, OrderNumber = 65977, OrderDate = DateTime.Parse("2014/02/05"), SaleAmount = 2550, Terms = "15 Days", TotalAmount = 2625, CustomerStoreState = "Wyoming", CustomerStoreCity = "Casper", Employee = "Todd Hoffman" }, new Order { ID = 40, OrderNumber = 66947, OrderDate = DateTime.Parse("2014/03/23"), SaleAmount = 3500, Terms = "15 Days", TotalAmount = 3600, CustomerStoreState = "Utah", CustomerStoreCity = "Salt Lake City", Employee = "Clark Morgan" }, new Order { ID = 42, OrderNumber = 68428, OrderDate = DateTime.Parse("2014/04/10"), SaleAmount = 10500, Terms = "15 Days", TotalAmount = 10900, CustomerStoreState = "California", CustomerStoreCity = "Los Angeles", Employee = "Harv Mudd" }, new Order { ID = 43, OrderNumber = 69477, OrderDate = DateTime.Parse("2014/03/09"), SaleAmount = 14200, Terms = "15 Days", TotalAmount = 14500, CustomerStoreState = "California", CustomerStoreCity = "Anaheim", Employee = "Harv Mudd" }, new Order { ID = 46, OrderNumber = 72947, OrderDate = DateTime.Parse("2014/01/14"), SaleAmount = 13350, Terms = "30 Days", TotalAmount = 13650, CustomerStoreState = "Nevada", CustomerStoreCity = "Las Vegas", Employee = "Harv Mudd" }, new Order { ID = 47, OrderNumber = 73088, OrderDate = DateTime.Parse("2014/03/25"), SaleAmount = 8600, Terms = "30 Days", TotalAmount = 8850, CustomerStoreState = "Nevada", CustomerStoreCity = "Reno", Employee = "Clark Morgan" }, new Order { ID = 50, OrderNumber = 76927, OrderDate = DateTime.Parse("2014/04/27"), SaleAmount = 9800, Terms = "30 Days", TotalAmount = 10050, CustomerStoreState = "Utah", CustomerStoreCity = "Salt Lake City", Employee = "Clark Morgan" }, new Order { ID = 51, OrderNumber = 77297, OrderDate = DateTime.Parse("2014/04/30"), SaleAmount = 10850, Terms = "30 Days", TotalAmount = 11100, CustomerStoreState = "Arizona", CustomerStoreCity = "Phoenix", Employee = "Clark Morgan" }, new Order { ID = 56, OrderNumber = 84744, OrderDate = DateTime.Parse("2014/02/10"), SaleAmount = 4650, Terms = "30 Days", TotalAmount = 4750, CustomerStoreState = "Nevada", CustomerStoreCity = "Las Vegas", Employee = "Harv Mudd" }, new Order { ID = 57, OrderNumber = 85028, OrderDate = DateTime.Parse("2014/05/17"), SaleAmount = 2575, Terms = "30 Days", TotalAmount = 2625, CustomerStoreState = "Nevada", CustomerStoreCity = "Reno", Employee = "Clark Morgan" }, new Order { ID = 59, OrderNumber = 87297, OrderDate = DateTime.Parse("2014/04/21"), SaleAmount = 14200, Terms = "30 Days", CustomerStoreState = "Wyoming", CustomerStoreCity = "Casper", Employee = "Todd Hoffman" }, new Order { ID = 60, OrderNumber = 88027, OrderDate = DateTime.Parse("2014/02/14"), SaleAmount = 13650, Terms = "30 Days", TotalAmount = 14050, CustomerStoreState = "Utah", CustomerStoreCity = "Salt Lake City", Employee = "Clark Morgan" }, new Order { ID = 65, OrderNumber = 94726, OrderDate = DateTime.Parse("2014/05/22"), SaleAmount = 20500, Terms = "15 Days", TotalAmount = 20800, CustomerStoreState = "California", CustomerStoreCity = "San Jose", Employee = "Jim Packard" }, new Order { ID = 66, OrderNumber = 95266, OrderDate = DateTime.Parse("2014/03/10"), SaleAmount = 9050, Terms = "15 Days", TotalAmount = 9250, CustomerStoreState = "Nevada", CustomerStoreCity = "Las Vegas", Employee = "Harv Mudd" }, new Order { ID = 69, OrderNumber = 98477, OrderDate = DateTime.Parse("2014/01/01"), SaleAmount = 23500, Terms = "15 Days", TotalAmount = 23800, CustomerStoreState = "Wyoming", CustomerStoreCity = "Casper", Employee = "Todd Hoffman" }, new Order { ID = 70, OrderNumber = 99247, OrderDate = DateTime.Parse("2014/02/08"), SaleAmount = 2100, Terms = "15 Days", TotalAmount = 2150, CustomerStoreState = "Utah", CustomerStoreCity = "Salt Lake City", Employee = "Clark Morgan" }, new Order { ID = 78, OrderNumber = 174884, OrderDate = DateTime.Parse("2014/04/10"), SaleAmount = 7200, Terms = "30 Days", TotalAmount = 7350, CustomerStoreState = "Colorado", CustomerStoreCity = "Denver", Employee = "Todd Hoffman" }, new Order { ID = 81, OrderNumber = 188877, OrderDate = DateTime.Parse("2014/02/11"), SaleAmount = 8750, Terms = "30 Days", TotalAmount = 8900, CustomerStoreState = "Arizona", CustomerStoreCity = "Phoenix", Employee = "Clark Morgan" }, new Order { ID = 82, OrderNumber = 191883, OrderDate = DateTime.Parse("2014/02/05"), SaleAmount = 9900, Terms = "30 Days", TotalAmount = 10150, CustomerStoreState = "California", CustomerStoreCity = "Los Angeles", Employee = "Harv Mudd" }, new Order { ID = 83, OrderNumber = 192474, OrderDate = DateTime.Parse("2014/01/21"), SaleAmount = 12800, Terms = "30 Days", TotalAmount = 13100, CustomerStoreState = "California", CustomerStoreCity = "Anaheim", Employee = "Harv Mudd" }, new Order { ID = 84, OrderNumber = 193847, OrderDate = DateTime.Parse("2014/03/21"), SaleAmount = 14100, Terms = "30 Days", TotalAmount = 14350, CustomerStoreState = "California", CustomerStoreCity = "San Diego", Employee = "Harv Mudd" }, new Order { ID = 85, OrderNumber = 194877, OrderDate = DateTime.Parse("2014/03/06"), SaleAmount = 4750, Terms = "30 Days", TotalAmount = 4950, CustomerStoreState = "California", CustomerStoreCity = "San Jose", Employee = "Jim Packard" }, new Order { ID = 86, OrderNumber = 195746, OrderDate = DateTime.Parse("2014/05/26"), SaleAmount = 9050, Terms = "30 Days", TotalAmount = 9250, CustomerStoreState = "Nevada", CustomerStoreCity = "Las Vegas", Employee = "Harv Mudd" }, new Order { ID = 87, OrderNumber = 197474, OrderDate = DateTime.Parse("2014/03/02"), SaleAmount = 6400, Terms = "30 Days", TotalAmount = 6600, CustomerStoreState = "Nevada", CustomerStoreCity = "Reno", Employee = "Clark Morgan" }, new Order { ID = 88, OrderNumber = 198746, OrderDate = DateTime.Parse("2014/05/09"), SaleAmount = 15700, Terms = "30 Days", TotalAmount = 16050, CustomerStoreState = "Colorado", CustomerStoreCity = "Denver", Employee = "Todd Hoffman" }, new Order { ID = 91, OrderNumber = 214222, OrderDate = DateTime.Parse("2014/02/08"), SaleAmount = 11050, Terms = "30 Days", TotalAmount = 11250, CustomerStoreState = "Arizona", CustomerStoreCity = "Phoenix", Employee = "Clark Morgan" } }; } } } }
#gridContainer { height: 440px; }