ASP.NET - Add custom JS files

.gitignore

@@ -304,7 +304,7 @@ TesterMetadata.xml
 # Backup files
 *.bak
 
-*/wwwroot/*
-
+*/wwwroot/js/vendor.js
+*/wwwroot/css/*
 !*/wwwroot/css/Site.css
 *.DS_Store

ASP.NET Core/wwwroot/js/GridLocal.js

@@ -0,0 +1,84 @@
+const LocalGrid = {
+  KEY_EXPR: 'ID',
+
+  dragStart(e) {
+    const selectedData = e.component.getSelectedRowsData();
+    e.itemData = LocalGrid.getVisibleRowValues(selectedData, e.component);
+    e.cancel = !LocalGrid.canDrag(e);
+  },
+
+  dragChange(e) {
+    e.cancel = !LocalGrid.canDrop(e);
+  },
+
+  reorder(e) {
+    const fullDataToInsert = [];
+    e.itemData.forEach((rowData) => {
+      const indexToRemove = customers.findIndex((item) => item[LocalGrid.KEY_EXPR] === rowData[LocalGrid.KEY_EXPR]);
+      fullDataToInsert.push(customers[indexToRemove]);
+      customers.splice(indexToRemove, 1);
+    });
+    const toIndex = LocalGrid.calculateToIndex(customers, e);
+    customers.splice(toIndex, 0, ...fullDataToInsert);
+    e.component.refresh();
+    if (LocalGrid.shouldClearSelection()) {
+      e.component.clearSelection();
+    }
+  },
+
+  dragTemplate(dragData) {
+    const itemsContainer = $('<table>').addClass('drag-container');
+    dragData.itemData.forEach((rowData) => {
+      const itemContainer = $('<tr>');
+      for (const field in rowData) {
+        if (Object.prototype.hasOwnProperty.call(rowData, field)) {
+          itemContainer.append($('<td>').text(rowData[field]));
+        }
+      }
+      itemsContainer.append(itemContainer);
+    });
+    return $('<div>').append(itemsContainer);
+  },
+
+  canDrag(e) {
+    const visibleRows = e.component.getVisibleRows();
+    return visibleRows.some((r) => r.isSelected && r.rowIndex === e.fromIndex);
+  },
+
+  canDrop(e) {
+    const visibleRows = e.component.getVisibleRows();
+    return !visibleRows.some((r) => r.isSelected && r.rowIndex === e.toIndex);
+  },
+
+  calculateToIndex(dataArray, e) {
+    const visibleRows = e.component.getVisibleRows();
+    const toIndex = dataArray.findIndex((item) => item[LocalGrid.KEY_EXPR] === visibleRows[e.toIndex].data[LocalGrid.KEY_EXPR]);
+    return e.fromIndex >= e.toIndex ? toIndex : toIndex + 1;
+  },
+
+  getVisibleRowValues(rowsData, grid) {
+    const visibleColumns = grid.getVisibleColumns();
+    const selectedData = rowsData.map((rowData) => {
+      const visibleValues = {};
+      visibleColumns.forEach((column) => {
+        if (column.dataField) {
+          visibleValues[column.dataField] = LocalGrid.getVisibleCellValue(column, rowData);
+        }
+      });
+      return visibleValues;
+    });
+    return selectedData;
+  },
+
+  getVisibleCellValue(column, rowData) {
+    if (!column.dataField) return undefined;
+    const cellValue = rowData[column.dataField];
+    return column.lookup?.calculateCellValue
+      ? column.lookup.calculateCellValue(cellValue)
+      : cellValue;
+  },
+
+  shouldClearSelection() {
+    return $('#clear-after-drop-switch').dxSwitch('option', 'value');
+  },
+};

ASP.NET Core/wwwroot/js/GridRemote.js

@@ -0,0 +1,98 @@
+const RemoteGrid = {
+    updateInProgress: false,
+    KEY_EXPR: 'ID',
+
+    dragStart(e) {
+        const selectedData = e.component.getSelectedRowsData().sort((a, b) => (a.OrderIndex > b.OrderIndex ? 1 : -1));
+        e.itemData = RemoteGrid.getVisibleRowValues(selectedData, e.component);
+        e.cancel = !RemoteGrid.canDrag(e);
+    },
+
+    dragChange(e) {
+        e.cancel = !RemoteGrid.canDrop(e);
+    },
+
+    reorder(e) {
+        e.promise = RemoteGrid.updateOrderIndex(e);
+        if (RemoteGrid.shouldClearSelection()) {
+            e.component.clearSelection();
+        }
+    },
+
+    dragTemplate(dragData) {
+        const itemsContainer = $('<table>').addClass('drag-container');
+        dragData.itemData.forEach((rowData) => {
+            const itemContainer = $('<tr>');
+            for (const field in rowData) {
+                if (Object.prototype.hasOwnProperty.call(rowData, field)) {
+                    itemContainer.append($('<td>').text(rowData[field]));
+                }
+            }
+            itemsContainer.append(itemContainer);
+        });
+        return $('<div>').append(itemsContainer);
+    },
+
+    async updateOrderIndex(e) {
+        const visibleRows = e.component.getVisibleRows();
+        const newOrderIndex = visibleRows[e.toIndex].data.OrderIndex;
+        const store = e.component.getDataSource().store();
+        RemoteGrid.updateInProgress = true;
+        e.component.beginCustomLoading('Loading...');
+
+        try {
+            const updatePromises = e.itemData.map((itemData) =>
+                store.update(itemData[RemoteGrid.KEY_EXPR], { OrderIndex: newOrderIndex })
+            );
+            await Promise.all(updatePromises);
+            await e.component.refresh();
+        } catch (error) {
+            throw DevExtreme.ui.notify(error, 'error', 1000);
+        } finally {
+            e.component.endCustomLoading();
+            RemoteGrid.updateInProgress = false;
+        }
+    },
+
+    canDrag(e) {
+        if (RemoteGrid.updateInProgress) return false;
+        const visibleRows = e.component.getVisibleRows();
+        return visibleRows.some((r) => r.isSelected && r.rowIndex === e.fromIndex);
+    },
+
+    canDrop(e) {
+        if (RemoteGrid.updateInProgress) return false;
+        const visibleRows = e.component.getVisibleRows();
+        return !visibleRows.some((r) => r.isSelected && r.rowIndex === e.toIndex);
+    },
+
+    getVisibleRowValues(rowsData, grid) {
+        const visibleColumns = grid.getVisibleColumns();
+        const selectedData = rowsData.map((rowData) => {
+            const visibleValues = {};
+            visibleColumns.forEach((column) => {
+                if (column.dataField) {
+                    visibleValues[column.dataField] = RemoteGrid.getVisibleCellValue(column, rowData);
+                }
+            });
+            return visibleValues;
+        });
+        return selectedData;
+    },
+
+    getVisibleCellValue(column, rowData) {
+        if (!column.dataField) return undefined;
+        const cellValue = rowData[column.dataField];
+        return column.lookup?.calculateCellValue
+            ? column.lookup.calculateCellValue(cellValue)
+            : cellValue;
+    },
+
+    shouldClearSelection() {
+        return $('#clear-after-drop-switch').dxSwitch('option', 'value');
+    },
+
+    beforeSend(method, ajaxOptions) {
+        ajaxOptions.xhrFields = { withCredentials: true };
+    },
+};

ASP.NET Core/wwwroot/js/LocalDataArray.js

@@ -0,0 +1,85 @@
+const customers = [{
+  ID: 1,
+  CompanyName: 'Super Mart of the West',
+  Address: '702 SW 8th Street',
+  City: 'Bentonville',
+  State: 'Arkansas',
+  Website: 'http://www.nowebsitesupermart.com',
+}, {
+  ID: 2,
+  CompanyName: 'Electronics Depot',
+  Address: '2455 Paces Ferry Road NW',
+  City: 'Atlanta',
+  State: 'Georgia',
+  Website: 'http://www.nowebsitedepot.com',
+}, {
+  ID: 3,
+  CompanyName: 'K&S Music',
+  Address: '1000 Nicllet Mall',
+  City: 'Minneapolis',
+  State: 'Minnesota',
+  Website: 'http://www.nowebsitemusic.com',
+}, {
+  ID: 4,
+  CompanyName: "Tom's Club",
+  Address: '999 Lake Drive',
+  City: 'Issaquah',
+  State: 'Washington',
+  Website: 'http://www.nowebsitetomsclub.com',
+}, {
+  ID: 5,
+  CompanyName: 'E-Mart',
+  Address: '3333 Beverly Rd',
+  City: 'Hoffman Estates',
+  State: 'Illinois',
+  Website: 'http://www.nowebsiteemart.com',
+}, {
+  ID: 6,
+  CompanyName: 'Walters',
+  Address: '200 Wilmot Rd',
+  City: 'Deerfield',
+  State: 'Illinois',
+  Website: 'http://www.nowebsitewalters.com',
+}, {
+  ID: 7,
+  CompanyName: 'StereoShack',
+  Address: '400 Commerce S',
+  City: 'Fort Worth',
+  State: 'Texas',
+  Website: 'http://www.nowebsiteshack.com',
+}, {
+  ID: 8,
+  CompanyName: 'Circuit Town',
+  Address: '2200 Kensington Court',
+  City: 'Oak Brook',
+  State: 'Illinois',
+  Website: 'http://www.nowebsitecircuittown.com',
+}, {
+  ID: 9,
+  CompanyName: 'Premier Buy',
+  Address: '7601 Penn Avenue South',
+  City: 'Richfield',
+  State: 'Minnesota',
+  Website: 'http://www.nowebsitepremierbuy.com',
+}, {
+  ID: 10,
+  CompanyName: 'ElectrixMax',
+  Address: '263 Shuman Blvd',
+  City: 'Naperville',
+  State: 'Illinois',
+  Website: 'http://www.nowebsiteelectrixmax.com',
+}, {
+  ID: 11,
+  CompanyName: 'Video Emporium',
+  Address: '1201 Elm Street',
+  City: 'Dallas',
+  State: 'Texas',
+  Website: 'http://www.nowebsitevideoemporium.com',
+}, {
+  ID: 12,
+  CompanyName: 'Screen Shop',
+  Address: '1000 Lowes Blvd',
+  City: 'Mooresville',
+  State: 'North Carolina',
+  Website: 'http://www.nowebsitescreenshop.com',
+}];

README.md

@@ -1,5 +1,4 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/617017018/25.1.3%2B)
 [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1155013)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)