").addClass("group-row-flex").appendTo(cellElement);
+ const checkBoxId = this.calcCheckBoxId(cellData.component.element().attr("id"), cellData.row.key);
+ const that = this;
+ const checkBox = $("
").attr("id", checkBoxId).addClass("group-selection-check-box").appendTo(flex).dxCheckBox({
+ visible: false,
+ onValueChanged: function(valueArgs) {
+ if (that.skipCheckBoxValueHandling) return;
+ const childRowKeys = valueArgs.component.option("childRowKeys");
+ if (valueArgs.value)
+ cellData.component.selectRows(childRowKeys, true);
+ else
+ cellData.component.deselectRows(childRowKeys);
+ }
+ }).dxCheckBox("instance");
+ const loadIndicator = $("
").appendTo(flex).addClass("group-selection-check-box").dxLoadIndicator({
+ height: 22,
+ width: 22
+ }).dxLoadIndicator("instance");
+
+ this.getSelectedKeys(cellData.component).then((selectedKeys) => {
+ if (this.cacheGroupRequests && this.rowKeysCache[checkBoxId]) {
+ this.initCheckBox(checkBox, loadIndicator, checkBoxId, selectedKeys);
+ } else {
+ const groupedColumns = cellData.component.getVisibleColumns().filter(c => c.groupIndex >= 0).sort((a, b) => {
+ return a.groupIndex > b.groupIndex ? 1 : -1;
+ });
+ const filter = [];
+ cellData.key.forEach((key, i) => {
+ filter.push([groupedColumns[i].dataField, "=", key]);
+ });
+ const loadOptions = {
+ filter
+ };
+ const store = cellData.component.getDataSource().store();
+ store.load(loadOptions).then((data) => {
+ const keys = data.map(d => cellData.component.keyOf(d));
+ this.rowKeysCache[checkBoxId] = keys;
+ this.initCheckBox(checkBox, loadIndicator, checkBoxId, selectedKeys);
+ });
+ }
+ });
+ flex.append($("
").text(this.getGroupRowText(cellData)));
+ }
+ getGroupRowText(cellData) {
+ let text = `${cellData.column.caption}: ${cellData.displayValue}`;
+ if (cellData.groupContinuedMessage) text += ` (${cellData.groupContinuedMessage})`;
+ if (cellData.groupContinuesMessage) text += ` (${cellData.groupContinuesMessage})`;
+ return text;
+ }
+ initCheckBox(checkBox, loadIndicator, checkBoxId, selectedKeys) {
+ this.skipCheckBoxValueHandling = true;
+ checkBox.option({
+ visible: true,
+ value: this.areKeysSelected(this.rowKeysCache[checkBoxId], selectedKeys),
+ childRowKeys: this.rowKeysCache[checkBoxId]
+ });
+ loadIndicator.option("visible", false);
+ this.skipCheckBoxValueHandling = false;
+ }
+ getSelectedKeys(grid) {
+ if (grid.option("selection.deferred")) {
+ if (!this.getSelectedKeysPromise) {
+ this.getSelectedKeysPromise = new Promise(resolve => {
+ grid.getSelectedRowKeys().then(selectedKeys => {
+ resolve(selectedKeys);
+ });
+ });
+ }
+ return this.getSelectedKeysPromise;
+ } else {
+ return new Promise(resolve => resolve(grid.getSelectedRowKeys()));
+ }
+ }
+ repaintGroupRowTree(grid, groupRows) {
+ const topGroupRow = groupRows.filter(r => r.isExpanded).reduce((acc, curr) => {
+ return (!acc || acc.key.length > curr.key.length) ? curr : acc;
+ }, null);
+ if (topGroupRow) {
+ const affectedGroupRows = groupRows.filter(g => g.key[0] == topGroupRow.key[0]);
+ grid.repaintRows(affectedGroupRows.map(g => g.rowIndex));
+ }
+ }
+ gridSelectionChanged(e) {
+ const groupRows = e.component.getVisibleRows().filter(r => r.rowType === "group");
+ if (e.component.option("selection.deferred")) {
+ this.getSelectedKeysPromise = null;
+ if (e.component.option("selectionFilter").length === 0) {
+ e.component.repaintRows(groupRows.map(g => g.rowIndex));
+ } else {
+ this.repaintGroupRowTree(e.component, groupRows);
+ }
+ } else {
+ if (e.selectedRowKeys.length >= e.component.totalCount() || e.currentDeselectedRowKeys.length >= e.component.totalCount()) {
+ e.component.repaintRows(groupRows.map(g => g.rowIndex));
+ } else {
+ this.repaintGroupRowTree(e.component, groupRows);
+ }
+ }
+ }
+ calcCheckBoxId(gridId, groupRowKey) {
+ return gridId + "groupCheckBox" + groupRowKey.join("");
+ }
+ areKeysSelected(keysToCheck, selectedKeys) {
+ if (selectedKeys.length == 0)
+ return false;
+ const intersectionCount = keysToCheck.filter(k => selectedKeys.indexOf(k) >= 0).length;
+ if (intersectionCount === 0)
+ return false;
+ else if (intersectionCount === keysToCheck.length)
+ return true;
+ else
+ return undefined;
+ }
+}
diff --git a/Angular/package-lock.json b/Angular/package-lock.json
index cca31f2..5ac34ca 100644
--- a/Angular/package-lock.json
+++ b/Angular/package-lock.json
@@ -18,6 +18,7 @@
"@angular/router": "^18.0.3",
"devextreme": "25.1.3",
"devextreme-angular": "25.1.3",
+ "devextreme-aspnet-data-nojquery": "^5.1.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.7"
@@ -6243,6 +6244,15 @@
"yarn": ">= 1.13.0"
}
},
+ "node_modules/devextreme-aspnet-data-nojquery": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/devextreme-aspnet-data-nojquery/-/devextreme-aspnet-data-nojquery-5.1.0.tgz",
+ "integrity": "sha512-YJ7HxOLJTzz6bmpp1uOjXdhUL71THR6IidVONjJRF1R1loTyNVesa6s86gU+mUeNN044UnJKQhtCADc0+TmARQ==",
+ "license": "MIT",
+ "peerDependencies": {
+ "devextreme": ">=18.1.0"
+ }
+ },
"node_modules/devextreme-quill": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/devextreme-quill/-/devextreme-quill-1.7.3.tgz",
diff --git a/Angular/package.json b/Angular/package.json
index 5549641..bbbfa64 100644
--- a/Angular/package.json
+++ b/Angular/package.json
@@ -24,6 +24,7 @@
"@angular/router": "^18.0.3",
"devextreme": "25.1.3",
"devextreme-angular": "25.1.3",
+ "devextreme-aspnet-data-nojquery": "^5.1.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.7"
diff --git a/Angular/src/app/GroupRowSelection/orig_GroupRowSelectionHelper.ts b/Angular/src/app/GroupRowSelection/GroupRowSelectionHelper.ts
similarity index 94%
rename from Angular/src/app/GroupRowSelection/orig_GroupRowSelectionHelper.ts
rename to Angular/src/app/GroupRowSelection/GroupRowSelectionHelper.ts
index 445c06b..96872be 100644
--- a/Angular/src/app/GroupRowSelection/orig_GroupRowSelectionHelper.ts
+++ b/Angular/src/app/GroupRowSelection/GroupRowSelectionHelper.ts
@@ -1,8 +1,8 @@
-import dxDataGrid from 'devextreme/ui/data_grid';
-import { DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
-import { LoadOptions } from 'devextreme/data';
-import { isItemsArray } from 'devextreme/common/data/custom-store';
-import { IGroupRowReadyParameter } from './group-row-component/group-row.component';
+import type dxDataGrid from 'devextreme/ui/data_grid';
+import type { DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
+import type { LoadOptions } from 'devextreme-angular/common/data';
+import { isItemsArray } from 'devextreme-angular/common/data';
+import type { IGroupRowReadyParameter } from './group-row-component/group-row.component';
export default class GroupSelectionHelper {
groupedColumns: DxDataGridTypes.Column[];
diff --git a/Angular/src/app/GroupRowSelection/group-row-component/orig_group-row.component.css b/Angular/src/app/GroupRowSelection/group-row-component/group-row.component.css
similarity index 100%
rename from Angular/src/app/GroupRowSelection/group-row-component/orig_group-row.component.css
rename to Angular/src/app/GroupRowSelection/group-row-component/group-row.component.css
diff --git a/Angular/src/app/GroupRowSelection/group-row-component/orig_group-row.component.html b/Angular/src/app/GroupRowSelection/group-row-component/group-row.component.html
similarity index 100%
rename from Angular/src/app/GroupRowSelection/group-row-component/orig_group-row.component.html
rename to Angular/src/app/GroupRowSelection/group-row-component/group-row.component.html
diff --git a/Angular/src/app/GroupRowSelection/group-row-component/orig_group-row.component.ts b/Angular/src/app/GroupRowSelection/group-row-component/group-row.component.ts
similarity index 90%
rename from Angular/src/app/GroupRowSelection/group-row-component/orig_group-row.component.ts
rename to Angular/src/app/GroupRowSelection/group-row-component/group-row.component.ts
index d16d579..f05cd4d 100644
--- a/Angular/src/app/GroupRowSelection/group-row-component/orig_group-row.component.ts
+++ b/Angular/src/app/GroupRowSelection/group-row-component/group-row.component.ts
@@ -1,8 +1,8 @@
import {
Component, Input, Output, EventEmitter, AfterViewInit,
} from '@angular/core';
-import { DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';
-import { DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
+import type { DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';
+import type { DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
@Component({
selector: 'group-row-selectable',
diff --git a/Angular/src/app/GroupRowSelection/orig_group-text-pipe.ts b/Angular/src/app/GroupRowSelection/group-text-pipe.ts
similarity index 86%
rename from Angular/src/app/GroupRowSelection/orig_group-text-pipe.ts
rename to Angular/src/app/GroupRowSelection/group-text-pipe.ts
index b368cbf..2f81743 100644
--- a/Angular/src/app/GroupRowSelection/orig_group-text-pipe.ts
+++ b/Angular/src/app/GroupRowSelection/group-text-pipe.ts
@@ -1,5 +1,5 @@
import { Pipe, PipeTransform } from '@angular/core';
-import { DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
+import type { DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
@Pipe({
name: 'groupText',
diff --git a/Angular/src/app/app.component.html b/Angular/src/app/app.component.html
index 0f59cbc..4835e1f 100644
--- a/Angular/src/app/app.component.html
+++ b/Angular/src/app/app.component.html
@@ -1,3 +1,51 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -69,7 +74,7 @@ const GroupRowComponent: React.FC = ({
onValueChanged={onValueChange}
>
- {groupText()}
+ {groupText}
);
};
diff --git a/React/src/GroupRowSelection/orig_GroupRowSelectionHelper.tsx b/React/src/GroupRowSelection/GroupRowSelectionHelper.tsx
similarity index 92%
rename from React/src/GroupRowSelection/orig_GroupRowSelectionHelper.tsx
rename to React/src/GroupRowSelection/GroupRowSelectionHelper.tsx
index cd4caca..364dcb6 100644
--- a/React/src/GroupRowSelection/orig_GroupRowSelectionHelper.tsx
+++ b/React/src/GroupRowSelection/GroupRowSelectionHelper.tsx
@@ -1,7 +1,7 @@
import dxDataGrid from 'devextreme/ui/data_grid';
import { type DataGridTypes } from 'devextreme-react/data-grid';
import { type LoadOptions } from 'devextreme/common/data';
-import { isItemsArray } from 'devextreme/common/data/custom-store';
+import { isItemsArray } from 'devextreme-react/common/data';
import { type IGroupRowReadyParameter } from './GroupRowComponent';
export default class GroupSelectionHelper {
@@ -21,7 +21,7 @@ export default class GroupSelectionHelper {
this.getSelectedKeysPromise = this.getSelectedKeys(grid);
this.getSelectedKeysPromise.then((keys: any[]) => {
this.selectedKeys = keys;
- }).catch(() => {});
+ }).catch(() => { });
const defaultSelectionHandler: Function | undefined = grid.option('onSelectionChanged');
grid.option('onSelectionChanged', (e: DataGridTypes.SelectionChangedEvent) => {
this.selectionChanged(e);
@@ -56,16 +56,16 @@ export default class GroupSelectionHelper {
this.getSelectedKeys(this.grid).then((selectedKeys) => {
const checkedState: boolean | undefined = this.areKeysSelected(this.groupChildKeys[checkBoxId], selectedKeys);
arg.setCheckedState(checkedState);
- }).catch(() => {});
+ }).catch(() => { });
resolve(this.groupChildKeys[checkBoxId]);
}
- }).catch(() => {});
+ }).catch(() => { });
} else {
this.getSelectedKeys(this.grid).then((selectedKeys) => {
const checkedState: boolean | undefined = this.areKeysSelected(this.groupChildKeys[checkBoxId], selectedKeys);
arg.setCheckedState(checkedState);
resolve(this.groupChildKeys[checkBoxId]);
- }).catch(() => {});
+ }).catch(() => { });
}
});
@@ -96,11 +96,13 @@ export default class GroupSelectionHelper {
}
return this.getSelectedKeysPromise;
}
- return Promise.resolve(grid.getSelectedRowKeys());
+ return grid.getSelectedRowKeys();
}
repaintGroupRowTree(grid: dxDataGrid, groupRows: DataGridTypes.Row[]): void {
- const topGroupRow: DataGridTypes.Row | null = groupRows.filter((r) => r.isExpanded).reduce((acc: DataGridTypes.Row | null, curr) => (!acc || acc.key.length > curr.key.length ? curr : acc), null);
+ const topGroupRow: DataGridTypes.Row | null = groupRows
+ .filter((r) => r.isExpanded)
+ .reduce((acc: DataGridTypes.Row | null, curr) => (!acc || acc.key.length > curr.key.length ? curr : acc), null);
if (topGroupRow) {
const affectedGroupRows = groupRows.filter((g) => g.key[0] == topGroupRow.key[0]);
grid.repaintRows(affectedGroupRows.map((g) => g.rowIndex));
diff --git a/React/src/hooks.ts b/React/src/hooks.ts
new file mode 100644
index 0000000..124ec68
--- /dev/null
+++ b/React/src/hooks.ts
@@ -0,0 +1,22 @@
+import { useRef, useLayoutEffect, useCallback } from 'react';
+
+export function useEventCallback
(
+ // eslint-disable-next-line no-unused-vars
+ fn: (...args: Args) => Return,
+ // eslint-disable-next-line no-unused-vars
+): (...args: Args) => Return {
+ // eslint-disable-next-line @typescript-eslint/no-extra-parens, no-unused-vars
+ const ref = useRef<((...args: Args) => Return) | null>(null);
+
+ useLayoutEffect(() => {
+ ref.current = fn;
+ }, [fn]);
+
+ return useCallback((...args: Args) => {
+ const f = ref.current;
+ if (!f) {
+ throw new Error('Cannot call function before component is mounted');
+ }
+ return f(...args);
+ }, []);
+}
diff --git a/React/src/orig_App.css b/React/src/orig_App.css
deleted file mode 100644
index 252bfaf..0000000
--- a/React/src/orig_App.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.main {
- margin: 50px;
- width: 90vh;
-}
\ No newline at end of file
diff --git a/React/src/orig_App.tsx b/React/src/orig_App.tsx
deleted file mode 100644
index f8175de..0000000
--- a/React/src/orig_App.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import './App.css';
-import 'devextreme/dist/css/dx.material.blue.light.compact.css';
-import * as AspNetData from 'devextreme-aspnet-data-nojquery';
-import DataGrid, {
- Column, type DataGridTypes, GroupPanel, Grouping, type DataGridRef, Lookup, Paging, Selection,
-} from 'devextreme-react/data-grid';
-import GroupSelectionHelper from './GroupRowSelection/GroupRowSelectionHelper';
-import GroupRowComponent, { type IGroupRowReadyParameter } from './GroupRowSelection/GroupRowComponent';
-
-const url = 'https://js.devexpress.com/Demos/Mvc/api/DataGridWebApi';
-const dataSource = AspNetData.createStore({
- key: 'OrderID',
- loadUrl: `${url}/Orders`,
- onBeforeSend(_method, ajaxOptions) {
- ajaxOptions.xhrFields = { withCredentials: true };
- },
-});
-const customersData = AspNetData.createStore({
- key: 'Value',
- loadUrl: `${url}/CustomersLookup`,
- onBeforeSend(_method, ajaxOptions) {
- ajaxOptions.xhrFields = { withCredentials: true };
- },
-});
-const shippersData = AspNetData.createStore({
- key: 'Value',
- loadUrl: `${url}/ShippersLookup`,
- onBeforeSend(_method, ajaxOptions) {
- ajaxOptions.xhrFields = { withCredentials: true };
- },
-});
-
-function App(): JSX.Element {
- const dataGrid = useRef(null);
- const [helper, setHelper] = useState();
-
- useEffect(() => {
- if (dataGrid?.current) {
- setHelper(new GroupSelectionHelper(dataGrid.current.instance()));
- }
- }, [dataGrid, setHelper]);
-
- // eslint-disable-next-line func-style
- const groupRowInit = (arg: IGroupRowReadyParameter): void => { helper?.groupRowInit(arg); };
-
- // eslint-disable-next-line func-style
- const groupCellRender = (group: DataGridTypes.ColumnGroupCellTemplateData): JSX.Element => (
-
- );
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Vue/src/components/__tests__/orig_Content.spec.ts b/Vue/src/components/__tests__/orig_Content.spec.ts
deleted file mode 100644
index f4b8576..0000000
--- a/Vue/src/components/__tests__/orig_Content.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-import Content from '../HomeContent.vue';
-
-describe('Content', () => {
- it('renders properly', () => {
- const wrapper = mount(Content, { props: { text: 'count' } });
- expect(wrapper.text()).toContain('count');
- });
-});
diff --git a/Vue/src/components/orig_HomeContent.vue b/Vue/src/components/orig_HomeContent.vue
deleted file mode 100644
index fcdb07c..0000000
--- a/Vue/src/components/orig_HomeContent.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/Vue/src/orig_App.vue b/Vue/src/orig_App.vue
deleted file mode 100644
index 3b51b3a..0000000
--- a/Vue/src/orig_App.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
-
-
-
-
diff --git a/Vue/src/orig_main.ts b/Vue/src/orig_main.ts
deleted file mode 100644
index 97a0c3c..0000000
--- a/Vue/src/orig_main.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-import router from './router';
-
-import './assets/main.css';
-
-const app = createApp(App);
-
-app.use(router);
-
-app.mount('#app');
diff --git a/Vue/src/orig_types.ts b/Vue/src/orig_types.ts
deleted file mode 100644
index 9415237..0000000
--- a/Vue/src/orig_types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface IGroupRowReadyParameter {
- key: string[];
- setCheckedState: Function;
-}
diff --git a/Vue/src/types.ts b/Vue/src/types.ts
new file mode 100644
index 0000000..f995219
--- /dev/null
+++ b/Vue/src/types.ts
@@ -0,0 +1,5 @@
+export interface IGroupRowReadyParameter {
+ key: string[];
+ // eslint-disable-next-line no-unused-vars
+ setCheckedState: (state: boolean | undefined) => void;
+}
diff --git a/jQuery/css/orig_styles.css b/jQuery/css/orig_styles.css
deleted file mode 100644
index f568107..0000000
--- a/jQuery/css/orig_styles.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.group-selection-check-box {
- margin-right: 10px;
-}
-
-.group-row-flex {
- display: flex;
- flex-direction: row;
- align-items: center;
-}
\ No newline at end of file
diff --git a/jQuery/orig_data.js b/jQuery/orig_data.js
deleted file mode 100644
index 58e5b8d..0000000
--- a/jQuery/orig_data.js
+++ /dev/null
@@ -1,84 +0,0 @@
-const myJsonObject = [
- {
- 'ProductID': 1,
- 'ProductName': 'Whisk',
- 'Category': {
- 'CategoryName': 'Kitchen',
- },
- 'GroupCode': 'First',
- }, {
- 'ProductID': 2,
- 'ProductName': 'Spatula',
- 'Category': {
- 'CategoryName': 'Kitchen',
- },
- 'GroupCode': 'First',
- }, {
- 'ProductID': 3,
- 'ProductName': 'Wrench',
- 'Category': {
- 'CategoryName': 'HandTool',
- },
- 'GroupCode': 'First',
- }, {
- 'ProductID': 4,
- 'ProductName': 'Hammer',
- 'Category': {
- 'CategoryName': 'HandTool',
- },
- 'GroupCode': 'First',
- },
- {
- 'ProductID': 5,
- 'ProductName': 'Keyboard',
- 'Category': {
- 'CategoryName': 'Computer',
- },
- 'GroupCode': 'Second',
- },
- {
- 'ProductID': 6,
- 'ProductName': 'Mouse',
- 'Category': {
- 'CategoryName': 'Computer',
- },
- 'GroupCode': 'Second',
- },
- {
- 'ProductID': 7,
- 'ProductName': 'LCD Monitor',
- 'Category': {
- 'CategoryName': 'Computer',
- },
- 'GroupCode': 'Second',
- },
- {
- 'ProductID': 8,
- 'ProductName': 'Saw',
- 'Category': {
- 'CategoryName': 'HandTool',
- },
- 'GroupCode': 'First',
- }, {
- 'ProductID': 9,
- 'ProductName': 'Screwdriver',
- 'Category': {
- 'CategoryName': 'HandTool',
- },
- 'GroupCode': 'First',
- }, {
- 'ProductID': 10,
- 'ProductName': 'Pliers',
- 'Category': {
- 'CategoryName': 'HandTool',
- },
- 'GroupCode': 'First',
- },
- {
- 'ProductID': 11,
- 'ProductName': 'LCD Monitor Testing',
- 'Category': {
- 'CategoryName': 'Computer',
- },
- 'GroupCode': 'First',
- }];
diff --git a/jQuery/orig_index.html b/jQuery/orig_index.html
deleted file mode 100644
index cab5500..0000000
--- a/jQuery/orig_index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/jQuery/orig_index.js b/jQuery/orig_index.js
deleted file mode 100644
index 8cbd538..0000000
--- a/jQuery/orig_index.js
+++ /dev/null
@@ -1,72 +0,0 @@
-$(() => {
- const url = 'https://js.devexpress.com/Demos/Mvc/api/DataGridWebApi';
- function getLookupDataSource(lookupUrl) {
- return DevExpress.data.AspNet.createStore({
- key: 'Value',
- loadUrl: lookupUrl,
- onBeforeSend(method, ajaxOptions) {
- ajaxOptions.xhrFields = { withCredentials: true };
- },
- });
- }
- $('#grid').dxDataGrid({
- onInitialized(e) {
- GroupSelectionBehavior(e.component);
- },
- remoteOperations: true,
- selectedRowKeys: [10521],
- selection: {
- mode: 'multiple',
- allowSelectAll: true,
- showCheckBoxesMode: 'always',
- },
- width: 1200,
- height: 880,
- dataSource: DevExpress.data.AspNet.createStore({
- key: 'OrderID',
- loadUrl: `${url}/Orders`,
- onBeforeSend(method, ajaxOptions) {
- ajaxOptions.xhrFields = { withCredentials: true };
- },
- }),
- columns: [{
- dataField: 'OrderID',
- }, {
- dataField: 'CustomerID',
- caption: 'Customer',
- lookup: {
- dataSource: getLookupDataSource(`${url}/CustomersLookup`),
- valueExpr: 'Value',
- displayExpr: 'Text',
- },
- }, {
- dataField: 'OrderDate',
- dataType: 'date',
- }, {
- dataField: 'Freight',
- }, {
- dataField: 'ShipCountry',
- groupIndex: 0,
- }, {
- dataField: 'ShipCity',
- groupIndex: 2,
- }, {
- dataField: 'ShipVia',
- caption: 'Shipping Company',
- groupIndex: 1,
- dataType: 'number',
- lookup: {
- dataSource: getLookupDataSource(`${url}/ShippersLookup`),
- valueExpr: 'Value',
- displayExpr: 'Text',
- },
- }],
- groupPanel: {
- visible: true,
- },
- showBorders: true,
- grouping: {
- autoExpandAll: false,
- },
- });
-});
diff --git a/jQuery/package-lock.json b/jQuery/package-lock.json
index 0faaa05..ab4a148 100644
--- a/jQuery/package-lock.json
+++ b/jQuery/package-lock.json
@@ -10,6 +10,7 @@
"dependencies": {
"browser-sync": "^3.0.2",
"devextreme": "25.1.3",
+ "devextreme-aspnet-data": "^5.1.0",
"devextreme-dist": "25.1.3",
"jquery": "^3.7.1"
},
@@ -2035,6 +2036,15 @@
"devextreme-bundler-init": "bin/bundler-init.js"
}
},
+ "node_modules/devextreme-aspnet-data": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/devextreme-aspnet-data/-/devextreme-aspnet-data-5.1.0.tgz",
+ "integrity": "sha512-8jlAmBq+KcxMwVd5ukAhhia/JWx5fAdZ3qSaATdnCHlYxCCuIL50dBQw9Qd7khk8E0zj3UHwuA/lbhHCxZZxKg==",
+ "license": "MIT",
+ "peerDependencies": {
+ "devextreme": ">=18.1.0"
+ }
+ },
"node_modules/devextreme-dist": {
"version": "25.1.3",
"resolved": "https://registry.npmjs.org/devextreme-dist/-/devextreme-dist-25.1.3.tgz",
diff --git a/jQuery/package.json b/jQuery/package.json
index 1398842..e1ff0ac 100644
--- a/jQuery/package.json
+++ b/jQuery/package.json
@@ -25,8 +25,9 @@
},
"dependencies": {
"browser-sync": "^3.0.2",
- "devextreme": "25.1.3",
- "devextreme-dist": "25.1.3",
+ "devextreme": "^25.1.3",
+ "devextreme-aspnet-data": "^5.1.0",
+ "devextreme-dist": "^25.1.3",
"jquery": "^3.7.1"
}
}
diff --git a/jQuery/orig_GroupSelectionBehavior.js b/jQuery/src/GroupSelectionBehavior.js
similarity index 100%
rename from jQuery/orig_GroupSelectionBehavior.js
rename to jQuery/src/GroupSelectionBehavior.js
diff --git a/jQuery/src/index.css b/jQuery/src/index.css
index 278b9f8..998811f 100644
--- a/jQuery/src/index.css
+++ b/jQuery/src/index.css
@@ -2,3 +2,13 @@
margin: 50px;
width: 90vw;
}
+
+.group-selection-check-box {
+ margin-right: 10px;
+}
+
+.group-row-flex {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
diff --git a/jQuery/src/index.html b/jQuery/src/index.html
index 423bb30..419b0e4 100644
--- a/jQuery/src/index.html
+++ b/jQuery/src/index.html
@@ -1,7 +1,7 @@
- DevExtreme jQuery app
+ DevExtreme jQuery DataGrid Select All Example
@@ -10,12 +10,14 @@
+
+
diff --git a/jQuery/src/index.js b/jQuery/src/index.js
index 6d9c698..e284646 100644
--- a/jQuery/src/index.js
+++ b/jQuery/src/index.js
@@ -1,10 +1,74 @@
$(() => {
- let count = 0;
- $('#btn').dxButton({
- text: `Click count: ${count}`,
- onClick(e) {
- count += 1;
- e.component.option('text', `Click count: ${count}`);
+ const url = 'https://js.devexpress.com/Demos/Mvc/api/DataGridWebApi';
+ function getLookupDataSource(lookupUrl) {
+ return DevExpress.data.AspNet.createStore({
+ key: 'Value',
+ loadUrl: lookupUrl,
+ onBeforeSend(method, ajaxOptions) {
+ ajaxOptions.xhrFields = { withCredentials: true };
+ },
+ });
+ }
+
+ $('#grid').dxDataGrid({
+ onInitialized(e) {
+ // eslint-disable-next-line no-new
+ new GroupSelectionBehavior(e.component);
+ },
+ remoteOperations: true,
+ selectedRowKeys: [10521],
+ selection: {
+ mode: 'multiple',
+ allowSelectAll: true,
+ showCheckBoxesMode: 'always',
+ },
+ width: 1200,
+ height: 880,
+ dataSource: DevExpress.data.AspNet.createStore({
+ key: 'OrderID',
+ loadUrl: `${url}/Orders`,
+ onBeforeSend(method, ajaxOptions) {
+ ajaxOptions.xhrFields = { withCredentials: true };
+ },
+ }),
+ columns: [{
+ dataField: 'OrderID',
+ }, {
+ dataField: 'CustomerID',
+ caption: 'Customer',
+ lookup: {
+ dataSource: getLookupDataSource(`${url}/CustomersLookup`),
+ valueExpr: 'Value',
+ displayExpr: 'Text',
+ },
+ }, {
+ dataField: 'OrderDate',
+ dataType: 'date',
+ }, {
+ dataField: 'Freight',
+ }, {
+ dataField: 'ShipCountry',
+ groupIndex: 0,
+ }, {
+ dataField: 'ShipCity',
+ groupIndex: 2,
+ }, {
+ dataField: 'ShipVia',
+ caption: 'Shipping Company',
+ groupIndex: 1,
+ dataType: 'number',
+ lookup: {
+ dataSource: getLookupDataSource(`${url}/ShippersLookup`),
+ valueExpr: 'Value',
+ displayExpr: 'Text',
+ },
+ }],
+ groupPanel: {
+ visible: true,
+ },
+ showBorders: true,
+ grouping: {
+ autoExpandAll: false,
},
});
});
diff --git a/jQuery/src/orig_index.css b/jQuery/src/orig_index.css
deleted file mode 100644
index 94e5507..0000000
--- a/jQuery/src/orig_index.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.demo-container {
- margin: 50px;
- width: 90vh;
-}
diff --git a/jQuery/src/orig_index.html b/jQuery/src/orig_index.html
deleted file mode 100644
index 423bb30..0000000
--- a/jQuery/src/orig_index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
- DevExtreme jQuery app
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/jQuery/src/orig_index.js b/jQuery/src/orig_index.js
deleted file mode 100644
index 6d9c698..0000000
--- a/jQuery/src/orig_index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-$(() => {
- let count = 0;
- $('#btn').dxButton({
- text: `Click count: ${count}`,
- onClick(e) {
- count += 1;
- e.component.option('text', `Click count: ${count}`);
- },
- });
-});