Skip to content

Commit ab76159

Browse files
charlescordialDevExpresscharlescordialDevExpress
committed
Fix: jQuery implementation, lint, and build.
1 parent 06d6a97 commit ab76159

File tree

7 files changed

+186
-211
lines changed

7 files changed

+186
-211
lines changed

‎jQuery/src/orig_data.js‎ renamed to ‎jQuery/src/data.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@ const priorities = [{
77
id: 3, text: 'High',
88
}, {
99
id: 4, text: 'Urgent',
10-
}];
10+
}];

‎jQuery/src/index.css‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,43 @@
11
.demo-container {
22
margin: 50px;
3-
width: 90vw;
3+
width: 90vh;
4+
}
5+
6+
.demo-header {
7+
display: flex;
8+
justify-content: space-between;
9+
}
10+
11+
#toggle-container {
12+
padding-top: 20px;
13+
}
14+
15+
#clear-after-drop-switch {
16+
vertical-align: text-bottom;
17+
}
18+
19+
#toggle-container span {
20+
padding-right: 10px;
21+
}
22+
23+
.drag-container {
24+
padding: 10px;
25+
}
26+
27+
.drag-container td {
28+
padding: 0 10px;
29+
}
30+
31+
.tables {
32+
display: flex;
33+
}
34+
35+
.column:first-child {
36+
width: 50%;
37+
padding-right: 15px;
38+
}
39+
40+
.column:last-child {
41+
width: 50%;
42+
padding-left: 15px;
443
}

‎jQuery/src/index.html‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,28 @@
1010
<link rel="stylesheet" type="text/css" href="index.css" />
1111
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
1212
<script type="text/javascript" src="../node_modules/devextreme-dist/js/dx.all.js"></script>
13+
<script src="https://unpkg.com/devextreme-aspnet-data@5.1.0/js/dx.aspnet.data.js"></script>
1314
<script type="text/javascript" src="index.js"></script>
15+
<script type="text/javascript" src="data.js"></script>
1416
</head>
1517

1618
<body class="dx-viewport">
1719
<div class="demo-container">
18-
<div id="btn"></div>
20+
<div class="demo-header">
21+
<h3>DataGrid - Select multiple items and drag'n'drop between grids</h3>
22+
<div id="toggle-container">
23+
<span>Clear selection of dropped items</span>
24+
<div id="clear-after-drop-switch"></div>
25+
</div>
26+
</div>
27+
<div class="tables" id="tables">
28+
<div class="column">
29+
<div id="grid1"></div>
30+
</div>
31+
<div class="column">
32+
<div id="grid2"></div>
33+
</div>
34+
</div>
1935
</div>
2036
</body>
2137
</html>

‎jQuery/src/index.js‎

Lines changed: 128 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,132 @@
11
$(() => {
2-
let count = 0;
3-
$('#btn').dxButton({
4-
text: `Click count: ${count}`,
5-
onClick(e) {
6-
count += 1;
7-
e.component.option('text', `Click count: ${count}`);
2+
const store = DevExpress.data.AspNet.createStore({
3+
key: 'ID',
4+
loadUrl: `${url}/Tasks`,
5+
updateUrl: `${url}/UpdateTask`,
6+
onBeforeSend(method, ajaxOptions) {
7+
ajaxOptions.xhrFields = {
8+
withCredentials: true,
9+
};
810
},
911
});
12+
let updateInProgress = false;
13+
14+
function getDataGridConfiguration(index) {
15+
return {
16+
height: 440,
17+
dataSource: {
18+
store,
19+
reshapeOnPush: true,
20+
},
21+
showBorders: true,
22+
filterValue: ['Status', '=', index],
23+
selection: {
24+
mode: 'multiple',
25+
},
26+
rowDragging: {
27+
data: index,
28+
group: 'tasksGroup',
29+
onAdd,
30+
onDragStart(e) {
31+
const selectedData = e.component.getSelectedRowsData();
32+
e.itemData = getVisibleRowValues(selectedData, e.component);
33+
e.cancel = !canDrag(e);
34+
},
35+
dragTemplate(dragData) {
36+
const itemsContainer = $('<table>').addClass('drag-container');
37+
dragData.itemData.forEach(((rowData) => {
38+
const itemContainer = $('<tr>');
39+
40+
Object.keys(rowData).forEach((field) => {
41+
itemContainer.append($('<td>').text(rowData[field]));
42+
});
43+
44+
itemsContainer.append(itemContainer);
45+
}));
46+
return $('<div>').append(itemsContainer);
47+
},
48+
},
49+
scrolling: {
50+
mode: 'virtual',
51+
},
52+
columns: [{
53+
dataField: 'Subject',
54+
dataType: 'string',
55+
}, {
56+
dataField: 'Priority',
57+
dataType: 'number',
58+
width: 80,
59+
lookup: {
60+
dataSource: priorities,
61+
valueExpr: 'id',
62+
displayExpr: 'text',
63+
},
64+
}, {
65+
dataField: 'Status',
66+
dataType: 'number',
67+
visible: false,
68+
}],
69+
};
70+
}
71+
72+
$('#grid1').dxDataGrid(getDataGridConfiguration(1));
73+
74+
$('#grid2').dxDataGrid(getDataGridConfiguration(2));
75+
76+
function onAdd(e) {
77+
const selectedRowKeys = e.fromComponent.getSelectedRowKeys();
78+
const updateProcess = [];
79+
const changes = [];
80+
updateInProgress = true;
81+
e.fromComponent.beginCustomLoading('Loading...');
82+
e.toComponent.beginCustomLoading('Loading...');
83+
84+
selectedRowKeys.forEach((key) => {
85+
const values = { Status: e.toData };
86+
updateProcess.push(store.update(key, values));
87+
changes.push({
88+
type: 'update',
89+
key,
90+
data: values,
91+
});
92+
});
93+
94+
Promise.all(updateProcess).then(() => {
95+
store.push(changes);
96+
e.fromComponent.endCustomLoading();
97+
e.toComponent.endCustomLoading();
98+
updateInProgress = false;
99+
100+
e.fromComponent.clearSelection();
101+
if (!shouldClearSelection()) {
102+
e.toComponent.selectRows(selectedRowKeys, true);
103+
}
104+
});
105+
}
106+
107+
function canDrag(e) {
108+
if (updateInProgress) return false;
109+
const visibleRows = e.component.getVisibleRows();
110+
return visibleRows.some((r) => r.isSelected && r.rowIndex === e.fromIndex);
111+
}
112+
113+
function getVisibleRowValues(rowsData, grid) {
114+
const visibleColumns = grid.getVisibleColumns().filter((c) => c.dataField);
115+
const selectedData = rowsData.map((s) => {
116+
const visibleValues = {};
117+
visibleColumns.forEach((column) => {
118+
visibleValues[column.dataField] = column.lookup
119+
? column.lookup.calculateCellValue(s[column.dataField])
120+
: s[column.dataField];
121+
});
122+
return visibleValues;
123+
});
124+
return selectedData;
125+
}
126+
127+
function shouldClearSelection() {
128+
return $('#clear-after-drop-switch').dxSwitch('option', 'value');
129+
}
130+
131+
$('#clear-after-drop-switch').dxSwitch({});
10132
});

‎jQuery/src/orig_index.css‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎jQuery/src/orig_index.html‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

0 commit comments

Comments
 (0)