CRUD Operations - React Data Grid

// eslint-disable-next-line no-unused-vars /* global RequestInit */ import React, { useCallback, useState } from 'react'; import { DataGrid, Column, Editing, Scrolling, Lookup, Summary, TotalItem, DataGridTypes, } from 'devextreme-react/data-grid'; import { Button } from 'devextreme-react/button'; import { SelectBox, SelectBoxTypes } from 'devextreme-react/select-box'; import CustomStore from 'devextreme/data/custom_store'; import { formatDate } from 'devextreme/localization'; import 'whatwg-fetch'; const refreshModeLabel = { 'aria-label': 'Refresh Mode' }; const URL = 'https://js.devexpress.com/Demos/Mvc/api/DataGridWebApi'; const REFRESH_MODES = ['full', 'reshape', 'repaint']; const App = () => { const [ordersData] = useState(new CustomStore({ key: 'OrderID', load: () => sendRequest(`${URL}/Orders`), insert: (values) => sendRequest(`${URL}/InsertOrder`, 'POST', { values: JSON.stringify(values), }), update: (key, values) => sendRequest(`${URL}/UpdateOrder`, 'PUT', { key, values: JSON.stringify(values), }), remove: (key) => sendRequest(`${URL}/DeleteOrder`, 'DELETE', { key, }), })); const [customersData] = useState(new CustomStore({ key: 'Value', loadMode: 'raw', load: () => sendRequest(`${URL}/CustomersLookup`), })); const [shippersData] = useState(new CustomStore({ key: 'Value', loadMode: 'raw', load: () => sendRequest(`${URL}/ShippersLookup`), })); const [requests, setRequests] = useState([]); const [refreshMode, setRefreshMode] = useState<DataGridTypes.GridsEditRefreshMode>('reshape'); const handleRefreshModeChange = useCallback((e: SelectBoxTypes.ValueChangedEvent) => { setRefreshMode(e.value); }, []); const clearRequests = useCallback(() => { setRequests([]); }, []); const logRequest = useCallback((method, url: string, data: Record<string, any>) => { const args = Object.keys(data || {}).map((key) => `${key}=${data[key]}`).join(' '); const time = formatDate(new Date(), 'HH:mm:ss'); const request = [time, method, url.slice(URL.length), args].join(' '); setRequests((prevRequests: ConcatArray<string>) => [request].concat(prevRequests)); }, []); // eslint-disable-next-line consistent-return, space-before-function-paren const sendRequest = useCallback(async (url: string, method = 'GET', data = {}) => { logRequest(method, url, data); const request: RequestInit = { method, credentials: 'include', }; if (['DELETE', 'POST', 'PUT'].includes(method)) { const params = Object.keys(data) .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`) .join('&'); request.body = params; request.headers = { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }; } const response = await fetch(url, request); const isJson = response.headers.get('content-type')?.includes('application/json'); const result = isJson ? await response.json() : {}; if (!response.ok) { throw result.Message; } return method === 'GET' ? result.data : {}; }, [logRequest]); return ( <React.Fragment> <DataGrid id="grid" showBorders={true} dataSource={ordersData} repaintChangesOnly={true} > <Editing refreshMode={refreshMode} mode="cell" allowAdding={true} allowDeleting={true} allowUpdating={true} /> <Scrolling mode="virtual" /> <Column dataField="CustomerID" caption="Customer"> <Lookup dataSource={customersData} valueExpr="Value" displayExpr="Text" /> </Column> <Column dataField="OrderDate" dataType="date" /> <Column dataField="Freight" /> <Column dataField="ShipCountry" /> <Column dataField="ShipVia" caption="Shipping Company" dataType="number" > <Lookup dataSource={shippersData} valueExpr="Value" displayExpr="Text" /> </Column> <Summary> <TotalItem column="CustomerID" summaryType="count" /> <TotalItem column="Freight" summaryType="sum" valueFormat="#0.00" /> </Summary> </DataGrid> <div className="options"> <div className="caption">Options</div> <div className="option"> <span>Refresh Mode: </span> <SelectBox value={refreshMode} inputAttr={refreshModeLabel} items={REFRESH_MODES} onValueChanged={handleRefreshModeChange} /> </div> <div id="requests"> <div> <div className="caption">Network Requests</div> <Button id="clear" text="Clear" onClick={clearRequests} /> </div> <ul> {requests.map((request, index) => <li key={index}>{request}</li>)} </ul> </div> </div> </React.Fragment> ); }; export default App;

// eslint-disable-next-line no-unused-vars /* global RequestInit */ import React, { useCallback, useState } from 'react'; import { DataGrid, Column, Editing, Scrolling, Lookup, Summary, TotalItem, } from 'devextreme-react/data-grid'; import { Button } from 'devextreme-react/button'; import { SelectBox } from 'devextreme-react/select-box'; import CustomStore from 'devextreme/data/custom_store'; import { formatDate } from 'devextreme/localization'; import 'whatwg-fetch'; const refreshModeLabel = { 'aria-label': 'Refresh Mode' }; const URL = 'https://js.devexpress.com/Demos/Mvc/api/DataGridWebApi'; const REFRESH_MODES = ['full', 'reshape', 'repaint']; const App = () => { const [ordersData] = useState( new CustomStore({ key: 'OrderID', load: () => sendRequest(`${URL}/Orders`), insert: (values) => sendRequest(`${URL}/InsertOrder`, 'POST', { values: JSON.stringify(values), }), update: (key, values) => sendRequest(`${URL}/UpdateOrder`, 'PUT', { key, values: JSON.stringify(values), }), remove: (key) => sendRequest(`${URL}/DeleteOrder`, 'DELETE', { key, }), }), ); const [customersData] = useState( new CustomStore({ key: 'Value', loadMode: 'raw', load: () => sendRequest(`${URL}/CustomersLookup`), }), ); const [shippersData] = useState( new CustomStore({ key: 'Value', loadMode: 'raw', load: () => sendRequest(`${URL}/ShippersLookup`), }), ); const [requests, setRequests] = useState([]); const [refreshMode, setRefreshMode] = useState('reshape'); const handleRefreshModeChange = useCallback((e) => { setRefreshMode(e.value); }, []); const clearRequests = useCallback(() => { setRequests([]); }, []); const logRequest = useCallback((method, url, data) => { const args = Object.keys(data || {}) .map((key) => `${key}=${data[key]}`) .join(' '); const time = formatDate(new Date(), 'HH:mm:ss'); const request = [time, method, url.slice(URL.length), args].join(' '); setRequests((prevRequests) => [request].concat(prevRequests)); }, []); // eslint-disable-next-line consistent-return, space-before-function-paren const sendRequest = useCallback( async(url, method = 'GET', data = {}) => { logRequest(method, url, data); const request = { method, credentials: 'include', }; if (['DELETE', 'POST', 'PUT'].includes(method)) { const params = Object.keys(data) .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`) .join('&'); request.body = params; request.headers = { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }; } const response = await fetch(url, request); const isJson = response.headers.get('content-type')?.includes('application/json'); const result = isJson ? await response.json() : {}; if (!response.ok) { throw result.Message; } return method === 'GET' ? result.data : {}; }, [logRequest], ); return ( <React.Fragment> <DataGrid id="grid" showBorders={true} dataSource={ordersData} repaintChangesOnly={true} > <Editing refreshMode={refreshMode} mode="cell" allowAdding={true} allowDeleting={true} allowUpdating={true} /> <Scrolling mode="virtual" /> <Column dataField="CustomerID" caption="Customer" > <Lookup dataSource={customersData} valueExpr="Value" displayExpr="Text" /> </Column> <Column dataField="OrderDate" dataType="date" /> <Column dataField="Freight" /> <Column dataField="ShipCountry" /> <Column dataField="ShipVia" caption="Shipping Company" dataType="number" > <Lookup dataSource={shippersData} valueExpr="Value" displayExpr="Text" /> </Column> <Summary> <TotalItem column="CustomerID" summaryType="count" /> <TotalItem column="Freight" summaryType="sum" valueFormat="#0.00" /> </Summary> </DataGrid> <div className="options"> <div className="caption">Options</div> <div className="option"> <span>Refresh Mode: </span> <SelectBox value={refreshMode} inputAttr={refreshModeLabel} items={REFRESH_MODES} onValueChanged={handleRefreshModeChange} /> </div> <div id="requests"> <div> <div className="caption">Network Requests</div> <Button id="clear" text="Clear" onClick={clearRequests} /> </div> <ul> {requests.map((request, index) => ( <li key={index}>{request}</li> ))} </ul> </div> </div> </React.Fragment> ); }; export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

<!DOCTYPE html> <html 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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

#grid { height: 440px; } .options { padding: 20px; margin-top: 20px; background-color: rgba(191, 191, 191, 0.15); } .caption { margin-bottom: 10px; font-weight: 500; font-size: 18px; } .option { margin-bottom: 10px; } .option > span { position: relative; top: 2px; margin-right: 10px; } .option > .dx-widget { display: inline-block; vertical-align: middle; } #requests .caption { float: left; padding-top: 7px; } #requests > div { padding-bottom: 5px; } #requests > div::after { content: ""; display: table; clear: both; } #requests #clear { float: right; } #requests ul { list-style: none; max-height: 100px; overflow: auto; margin: 0; } #requests ul li { padding: 7px 0; border-bottom: 1px solid #ddd; } #requests ul li:last-child { border-bottom: none; }

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; } }

React Data Grid - CRUD Operations