CRUD Operations - Vue Data Grid (2024)

Backend API

<template> <div> <DxDataGrid id="grid" :show-borders="true" :data-source="ordersData" :repaint-changes-only="true" > <DxEditing :refresh-mode="refreshMode" :allow-adding="true" :allow-updating="true" :allow-deleting="true" mode="cell" /> <DxColumn data-field="CustomerID" caption="Customer" > <DxLookup :data-source="customersData" value-expr="Value" display-expr="Text" /> </DxColumn> <DxColumn data-field="OrderDate" data-type="date" /> <DxColumn data-field="Freight"/> <DxColumn data-field="ShipCountry"/> <DxColumn data-field="ShipVia" caption="Shipping Company" data-type="number" > <DxLookup :data-source="shippersData" value-expr="Value" display-expr="Text" /> </DxColumn> <DxScrolling mode="virtual"/> <DxSummary> <DxTotalItem column="CustomerID" summary-type="count" /> <DxTotalItem column="Freight" summary-type="sum" value-format="#0.00" /> </DxSummary> </DxDataGrid> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Refresh Mode: </span> <DxSelectBox v-model:value="refreshMode" :input-attr="{ 'aria-label': 'Refresh Mode' }" :items="refreshModes" /> </div> <div id="requests"> <div> <div class="caption">Network Requests</div> <DxButton id="clear" text="Clear" @click="clearRequests" /> </div> <ul> <li v-for="(request, index) in requests" :key="index" >{{ request }}</li> </ul> </div> </div> </div></template><script setup lang="ts">import { ref } from 'vue';import { DxDataGrid, DxColumn, DxEditing, DxScrolling, DxSummary, DxLookup, DxTotalItem,} from 'devextreme-vue/data-grid';import { DxButton } from 'devextreme-vue/button';import { DxSelectBox } from 'devextreme-vue/select-box';import CustomStore from 'devextreme/data/custom_store';import { formatDate } from 'devextreme/localization';import 'whatwg-fetch';const URL = 'https://js.devexpress.com/Demos/Mvc/api/DataGridWebApi';const ordersData = 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 = new CustomStore({ key: 'Value', loadMode: 'raw', load: () => sendRequest(`${URL}/CustomersLookup`),});const shippersData = new CustomStore({ key: 'Value', loadMode: 'raw', load: () => sendRequest(`${URL}/ShippersLookup`),});const refreshModes = ['full', 'reshape', 'repaint'];const requests = ref<string[]>([]);const refreshMode = ref('reshape');const sendRequest = async(url: string, method = 'GET', data: Record<string, string> = {}) => { logRequest(method, url, data); const request: any = { 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 : {};};const logRequest = (method: string, url: string, data: Record<string, string>) => { const args = Object.keys(data || {}).map((key) => `${key}=${data[key]}`).join(' '); const time = formatDate(new Date(), 'HH:mm:ss'); requests.value.unshift([time, method, url.slice(URL.length), args].join(' '));};const clearRequests = () => { requests.value = [];};</script><style scoped>#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;}</style>

import { createApp } from 'vue';import App from './App.vue';createApp(App).mount('#app');

<!DOCTYPE html><html> <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=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" /> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.3.4/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/typescript@4.2.4/lib/typescript.js"></script> <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.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app" /> </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; }}