Your search did not match any results.
Data Grid

Web API Service

Documentation
This example demonstrates the DataGrid widget communicating with a Web API service. Most of the DataGrid features are enabled, including the master-detail interface, header filter, summary, editing, and many more.

ASP.NET MVC

ASP.NET Core

@(Html.DevExtreme().DataGrid() .Columns(columns => { columns.Add() .DataField("CustomerID") .Caption("Customer") .Lookup(lookup => lookup .DataSource(d => d.WebApi().Controller("DataGridWebApi").LoadAction("CustomersLookup").Key("Value")) .ValueExpr("Value") .DisplayExpr("Text") ); columns.Add() .DataField("OrderDate") .DataType(GridColumnDataType.Date); columns.Add() .DataField("Freight") .HeaderFilter(f => f.GroupInterval(100)); columns.Add() .DataField("ShipCountry"); columns.Add() .DataField("ShipRegion"); columns.Add() .DataField("ShipVia") .Caption("Shipping Company") .Lookup(lookup => lookup .DataSource(d => d.WebApi().Controller("DataGridWebApi").LoadAction("ShippersLookup").Key("Value")) .ValueExpr("Value") .DisplayExpr("Text") ); }) .DataSource(d => d.WebApi().Controller("DataGridWebApi").Key("OrderID")) .FilterRow(f => f.Visible(true)) .HeaderFilter(f => f.Visible(true)) .GroupPanel(p => p.Visible(true)) .Scrolling(s => s.Mode(GridScrollingMode.Virtual)) .Height(600) .ShowBorders(true) .MasterDetail(md => md .Enabled(true) .Template(@<text> @(Html.DevExtreme().DataGrid() .DataSource(d => d.WebApi() .Controller("DataGridWebApi") .LoadAction("OrderDetails") .LoadParams(new { orderID = new JS("data.OrderID") }) ) ) </text>) ) .Editing(e => e.AllowAdding(true).AllowDeleting(true).AllowUpdating(true)) .RemoteOperations(true) .Grouping(g => g.AutoExpandAll(false)) .Summary(s => s .TotalItems(totalItems => { totalItems.Add().Column("Freight").SummaryType(SummaryType.Sum); }) .GroupItems(groupItems => { groupItems.Add().Column("Freight").SummaryType(SummaryType.Sum); groupItems.Add().SummaryType(SummaryType.Count); }) ) )
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 WebAPIService() { return View(); } } }
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models.Northwind; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using Microsoft.Extensions.Caching.Memory; using Newtonsoft.Json; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers { [Route("api/[controller]/[action]")] public class DataGridWebApiController : Controller { InMemoryNorthwindContext _nwind; public DataGridWebApiController(NorthwindContext nwind, IHttpContextAccessor httpContextAccessor, IMemoryCache memoryCache) { _nwind = new InMemoryNorthwindContext(nwind, httpContextAccessor, memoryCache); } [HttpGet] public object Get(DataSourceLoadOptions loadOptions) { return DataSourceLoader.Load(_nwind.Orders, loadOptions); } [HttpPost] public IActionResult Post(string values) { var newOrder = new Order(); JsonConvert.PopulateObject(values, newOrder); if(!TryValidateModel(newOrder)) return BadRequest(ModelState.GetFullErrorMessage()); _nwind.Orders.Add(newOrder); _nwind.SaveChanges(); return Ok(); } [HttpPut] public IActionResult Put(int key, string values) { var order = _nwind.Orders.First(o => o.OrderID == key); JsonConvert.PopulateObject(values, order); if(!TryValidateModel(order)) return BadRequest(ModelState.GetFullErrorMessage()); _nwind.SaveChanges(); return Ok(); } [HttpDelete] public void Delete(int key) { var order = _nwind.Orders.First(o => o.OrderID == key); _nwind.Orders.Remove(order); _nwind.SaveChanges(); } // additional actions [HttpGet] public object OrderDetails(int orderID, DataSourceLoadOptions loadOptions) { return DataSourceLoader.Load( from i in _nwind.Order_Details where i.OrderID == orderID select new { Product = i.Product.ProductName, Price = i.UnitPrice, Quantity = i.Quantity, Sum = i.UnitPrice * i.Quantity }, loadOptions ); } [HttpGet] public object ShippersLookup(DataSourceLoadOptions loadOptions) { var lookup = from i in _nwind.Shippers orderby i.CompanyName select new { Value = i.ShipperID, Text = i.CompanyName }; return DataSourceLoader.Load(lookup, loadOptions); } [HttpGet] public object CustomersLookup(DataSourceLoadOptions loadOptions) { var lookup = from i in _nwind.Customers let text = i.CompanyName + " (" + i.Country + ")" orderby i.CompanyName select new { Value = i.CustomerID, Text = text }; return DataSourceLoader.Load(lookup, loadOptions); } } }
using Microsoft.AspNetCore.Http; using Microsoft.EntityFrameworkCore; using Microsoft.Extensions.Caching.Memory; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.Northwind { public class InMemoryNorthwindContext { NorthwindContext _nwind; IHttpContextAccessor _contextAccessor; IMemoryCache _memoryCache; public InMemoryNorthwindContext(NorthwindContext nwind, IHttpContextAccessor contextAccessor, IMemoryCache memoryCache) { _nwind = nwind; _memoryCache = memoryCache; _contextAccessor = contextAccessor; } public DbSet<Customer> Customers { get { return _nwind.Customers; } } public DbSet<Order_Detail> Order_Details { get { return _nwind.Order_Details; } } public ICollection<Order> Orders { get { var session = _contextAccessor.HttpContext.Session; var key = session.Id + "_Orders"; if(_memoryCache.Get(key) == null) { _memoryCache.Set<ICollection<Order>>(key, _nwind.Orders.ToList(), new MemoryCacheEntryOptions { SlidingExpiration = TimeSpan.FromMinutes(10) }); session.SetInt32("dirty", 1); } return _memoryCache.Get<ICollection<Order>>(key); } } public DbSet<Shipper> Shippers { get { return _nwind.Shippers; } } public void SaveChanges() { foreach(var order in Orders.Where(o => o.OrderID == 0)) { order.OrderID = Orders.Max(o => o.OrderID) + 1; } } } }