$(() => { const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi'; $('#grid').dxDataGrid({ dataSource: DevExpress.data.AspNet.createStore({ key: 'OrderID', loadUrl: `${url}/Orders`, insertUrl: `${url}/InsertOrder`, updateUrl: `${url}/UpdateOrder`, deleteUrl: `${url}/DeleteOrder`, onBeforeSend(method, ajaxOptions) { ajaxOptions.xhrFields = { withCredentials: true }; }, }), remoteOperations: true, columns: [{ dataField: 'CustomerID', caption: 'Customer', validationRules: [{ type: 'stringLength', message: 'The field Customer must be a string with a maximum length of 5.', max: 5, }], lookup: { dataSource: DevExpress.data.AspNet.createStore({ key: 'Value', loadUrl: `${url}/CustomersLookup`, onBeforeSend(method, ajaxOptions) { ajaxOptions.xhrFields = { withCredentials: true }; }, }), valueExpr: 'Value', displayExpr: 'Text', }, }, { dataField: 'OrderDate', dataType: 'date', validationRules: [{ type: 'required', message: 'The OrderDate field is required.', }], }, { dataField: 'Freight', headerFilter: { groupInterval: 100, }, validationRules: [{ type: 'range', message: 'The field Freight must be between 0 and 2000.', min: 0, max: 2000, }], }, { dataField: 'ShipCountry', validationRules: [{ type: 'stringLength', message: 'The field ShipCountry must be a string with a maximum length of 15.', max: 15, }], }, { dataField: 'ShipVia', caption: 'Shipping Company', dataType: 'number', lookup: { dataSource: DevExpress.data.AspNet.createStore({ key: 'Value', loadUrl: `${url}/ShippersLookup`, onBeforeSend(method, ajaxOptions) { ajaxOptions.xhrFields = { withCredentials: true }; }, }), valueExpr: 'Value', displayExpr: 'Text', }, }, ], filterRow: { visible: true, }, headerFilter: { visible: true, }, groupPanel: { visible: true, }, scrolling: { mode: 'virtual', }, width: '100%', height: 600, showBorders: true, masterDetail: { enabled: true, template(container, options) { $('<div>') .dxDataGrid({ dataSource: DevExpress.data.AspNet.createStore({ loadUrl: `${url}/OrderDetails`, loadParams: { orderID: options.data.OrderID }, onBeforeSend(method, ajaxOptions) { ajaxOptions.xhrFields = { withCredentials: true }; }, }), showBorders: true, }).appendTo(container); }, }, editing: { allowAdding: true, allowUpdating: true, allowDeleting: true, }, grouping: { autoExpandAll: false, }, summary: { totalItems: [{ column: 'Freight', summaryType: 'sum', }], groupItems: [{ column: 'Freight', summaryType: 'sum', }, { summaryType: 'count', }, ], }, }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.4/css/dx.light.css" /> <script src="js/dx.all.js?v=25.1.4"></script> <script src="https://unpkg.com/devextreme-aspnet-data@5.0.0/js/dx.aspnet.data.js"></script> <script src="index.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="grid"></div> </div> </body> </html>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using Newtonsoft.Json; using System; using System.Linq; using System.Net; using System.Net.Http; using System.Net.Http.Formatting; using System.Web.Http; using DevExtreme.MVC.Demos.Models.Northwind; using DevExtreme.MVC.Demos.Models.DataGrid; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Controllers { [Route("api/DataGridWebApi/{action}", Name = "DataGridWebApi")] public class DataGridWebApiController : ApiController { InMemoryNorthwindContext _nwind = new InMemoryNorthwindContext(); [HttpGet] public HttpResponseMessage Orders(DataSourceLoadOptions loadOptions) { return Request.CreateResponse(DataSourceLoader.Load(_nwind.Orders, loadOptions)); } [HttpPost] public HttpResponseMessage InsertOrder(FormDataCollection form) { var values = form.Get("values"); var newOrder = new Order(); JsonConvert.PopulateObject(values, newOrder); Validate(newOrder); if(!ModelState.IsValid) return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState.GetFullErrorMessage()); _nwind.Orders.Add(newOrder); _nwind.SaveChanges(); return Request.CreateResponse(HttpStatusCode.Created, newOrder); } [HttpPut] public HttpResponseMessage UpdateOrder(FormDataCollection form) { var key = Convert.ToInt32(form.Get("key")); var values = form.Get("values"); var order = _nwind.Orders.First(o => o.OrderID == key); JsonConvert.PopulateObject(values, order); Validate(order); if(!ModelState.IsValid) return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState.GetFullErrorMessage()); _nwind.SaveChanges(); return Request.CreateResponse(HttpStatusCode.OK, order); } [HttpDelete] public void DeleteOrder(FormDataCollection form) { var key = Convert.ToInt32(form.Get("key")); var order = _nwind.Orders.First(o => o.OrderID == key); _nwind.Orders.Remove(order); _nwind.SaveChanges(); } // additional actions [HttpGet] public HttpResponseMessage OrderDetails(int orderID, DataSourceLoadOptions loadOptions) { return Request.CreateResponse(DataSourceLoader.Load( from i in _nwind.Order_Details where i.OrderID == orderID select new { Product = i.Product.ProductName, Price = i.UnitPrice, i.Quantity, Sum = i.UnitPrice * i.Quantity }, loadOptions )); } [HttpGet] public HttpResponseMessage ShippersLookup(DataSourceLoadOptions loadOptions) { var lookup = from i in _nwind.Shippers orderby i.CompanyName select new { Value = i.ShipperID, Text = i.CompanyName }; return Request.CreateResponse(DataSourceLoader.Load(lookup, loadOptions)); } [HttpGet] public HttpResponseMessage 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 Request.CreateResponse(DataSourceLoader.Load(lookup, loadOptions)); } [HttpPost] public HttpResponseMessage Batch(List<DataChange> changes) { foreach(var change in changes) { Order order; if(change.Type == "update" || change.Type == "remove") { var key = Convert.ToInt32(change.Key); order = _nwind.Orders.First(o => o.OrderID == key); } else { order = new Order(); } if(change.Type == "insert" || change.Type == "update") { JsonConvert.PopulateObject(change.Data.ToString(), order); Validate(order); if(!ModelState.IsValid) return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState.GetFullErrorMessage()); if(change.Type == "insert") { _nwind.Orders.Add(order); } change.Data = order; } else if(change.Type == "remove") { _nwind.Orders.Remove(order); } } _nwind.SaveChanges(); return Request.CreateResponse(HttpStatusCode.OK, changes); } } }
using System; using System.Collections.Generic; using System.Data.Entity; namespace DevExtreme.MVC.Demos.Models.Northwind { public class InMemoryNorthwindContext : InMemoryDataContext<Order> { readonly NorthwindContext _nwind = new NorthwindContext(); public DbSet<Customer> Customers => _nwind.Customers; public DbSet<Order_Detail> Order_Details => _nwind.Order_Details; public ICollection<Order> Orders => ItemsInternal; public DbSet<Shipper> Shippers => _nwind.Shippers; protected override IEnumerable<Order> Source => _nwind.Orders; protected override int GetKey(Order item) => item.OrderID; protected override void SetKey(Order item, int key) => item.OrderID = key; } }
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4