DataGrid - Getting Started: Add ASP.NET Core Overhaul

applications/GettingStartedWith/DataGrid/index.js

@@ -1,17 +1,15 @@
-const polyfill = $("<script>", { src: "https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js" });
-const exceljs = $("<script>", { src: "https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.0.1/dx-exceljs-fork.min.js" });
-const fileSaver = $("<script>", { src: "https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js" });
-const jsPdf = $("<script>", { src: "https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js" });
+const polyfill = $("<script>", { src: "https://cdn.jsdelivr.net/npm/babel-polyfill@6.26.0/dist/polyfill.min.js" });
+const exceljs = $("<script>", { src: "https://cdn.jsdelivr.net/npm/devextreme-exceljs-fork@4.4.11/dist/dx-exceljs-fork.min.js" });
+const fileSaver = $("<script>", { src: "https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js" });
+const jsPdf = $("<script>", { src: "https://cdn.jsdelivr.net/npm/jspdf@4.2.1/dist/jspdf.umd.min.js" });
 
 $("head").append(
     polyfill, exceljs, fileSaver, jsPdf
 );
 
-// This code is used for backwards compatibility with the older jsPDF variable name
-// Read more: https://github.com/MrRio/jsPDF/releases/tag/v2.0.0
-// window.jsPDF = window.jspdf.jsPDF;
-
 $(function() {
+    window.jsPDF = window.jspdf.jsPDF;
+
     const dataGrid = $("#dataGrid").dxDataGrid({
         dataSource: employees,
         keyExpr: "EmployeeID",
@@ -60,6 +58,7 @@ $(function() {
             dataField: "PostalCode",
             visible: false
         }],
+        sorting: { mode: "multiple" },
         filterRow: { visible: true },
         searchPanel: { visible: true },
         groupPanel: { visible: true },
@@ -137,8 +136,7 @@ $(function() {
                     }); 
                 }); 
                 e.cancel = true;
-            } 
-            else if (e.format === 'pdf') {
+            } else if (e.format === 'pdf') {
                 const doc = new jsPDF();
                 DevExpress.pdfExporter.exportDataGrid({
                     jsPDFDocument: doc,

concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/02 Create a DataGrid.md

@@ -3,6 +3,23 @@
 
 [Add DevExtreme to your jQuery application](/concepts/58%20jQuery%20Components/05%20Add%20DevExtreme%20to%20a%20jQuery%20Application/00%20Add%20DevExtreme%20to%20a%20jQuery%20Application.md '/Documentation/Guide/jQuery_Components/Add_DevExtreme_to_a_jQuery_Application/') and use the following code to create a DataGrid:
 
+##### Angular
+
+[Add DevExtreme to your Angular application](/concepts/40%20Angular%20Components/10%20Getting%20Started/03%20Add%20DevExtreme%20to%20an%20Angular%20CLI%20Application '/Documentation/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application/') and use the following code to create a DataGrid:
+
+##### Vue
+
+[Add DevExtreme to your Vue application](/concepts/55%20Vue%20Components/05%20Add%20DevExtreme%20to%20a%20Vue%20Application/00%20Add%20DevExtreme%20to%20a%20Vue%20Application.md '/Documentation/Guide/Vue_Components/Add_DevExtreme_to_a_Vue_Application/') and use the following code to create a DataGrid:
+
+##### React
+
+[Add DevExtreme to your React application](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/00%20Add%20DevExtreme%20to%20a%20React%20Application.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/') and use the following code to create a DataGrid:
+
+---
+
+---
+##### jQuery
+
     <!-- tab: index.js -->
     $(function() {
         $("#dataGrid").dxDataGrid({
@@ -32,9 +49,19 @@
         height: 500px;
     }
 
-##### Angular
+##### ASP.NET Core Controls
 
-[Add DevExtreme to your Angular application](/concepts/40%20Angular%20Components/10%20Getting%20Started/03%20Add%20DevExtreme%20to%20an%20Angular%20CLI%20Application '/Documentation/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application/') and use the following code to create a DataGrid:
+    <!-- tab: Index.cshtml -->
+    @(Html.DevExtreme().DataGrid()
+        .ID("grid-container")
+    )
+
+    <!-- tab: Site.css -->
+    #grid-container {
+        height: 500px;
+    }
+
+##### Angular
 
     <!-- tab: app.component.html -->
     <dx-data-grid id="dataGrid"
@@ -81,8 +108,6 @@
 
 ##### Vue
 
-[Add DevExtreme to your Vue application](/concepts/55%20Vue%20Components/05%20Add%20DevExtreme%20to%20a%20Vue%20Application/00%20Add%20DevExtreme%20to%20a%20Vue%20Application.md '/Documentation/Guide/Vue_Components/Add_DevExtreme_to_a_Vue_Application/') and use the following code to create a DataGrid:
-
     <!-- tab: App.vue -->
     <template>
         <div id="app-container">
@@ -112,15 +137,11 @@
 
 ##### React
 
-[Add DevExtreme to your React application](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/00%20Add%20DevExtreme%20to%20a%20React%20Application.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/') and use the following code to create a DataGrid:
-
-    <!-- tab: App.js -->
+    <!-- tab: App.tsx -->
     import React from 'react';
     import 'devextreme/dist/css/dx.fluent.blue.light.css';
 
-    import {
-        DataGrid
-    } from 'devextreme-react/data-grid';
+    import { DataGrid } from 'devextreme-react/data-grid';
 
     function App() {
         return (