Skip to content

Commit 6e866a2

Browse files
ghiscodingghiscoding
authored
feat: provide default callbacks for Row Move plugin when null (#2577)
* feat: provide default implementation for Row Move handler w/null
1 parent d12cccd commit 6e866a2

27 files changed

Lines changed: 1317 additions & 735 deletions

File tree

‎demos/aurelia/src/examples/slickgrid/example16.ts‎

Lines changed: 12 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,18 @@ export class Example16 {
9696
cancelEditOnDrag: true,
9797
hideRowMoveShadow: false,
9898
width: 30,
99-
onBeforeMoveRows: this.onBeforeMoveRow.bind(this),
100-
onMoveRows: this.onMoveRows.bind(this),
99+
// you can provide your own `onBeforeMoveRows` and/or `onMoveRows` implementation
100+
// or use the default implementation, however the default won't work with Tree Data
101+
// onBeforeMoveRows: () => {},
102+
// onMoveRows: () => {},
103+
// you can provide your own `onBeforeMoveRows` and/or `onMoveRows` implementation
104+
// or use the default implementation, however the default won't work with Tree Data
105+
// onBeforeMoveRows: () => {},
106+
// onMoveRows: () => {},
107+
onAfterMoveRows: (_e, args) => {
108+
// update dataset for the ms-select list to be updated
109+
this.dataset = args.updatedItems;
110+
},
101111

102112
// you can change the move icon position of any extension (RowMove, RowDetail or RowSelector icon)
103113
// note that you might have to play with the position when using multiple extension
@@ -137,74 +147,6 @@ export class Example16 {
137147
this.dataset = mockDataset;
138148
}
139149

140-
onBeforeMoveRow(e: MouseEvent | TouchEvent, data: { rows: number[]; insertBefore: number }) {
141-
for (const rowIdx of data.rows) {
142-
// no point in moving before or after itself
143-
if (
144-
rowIdx === data.insertBefore ||
145-
(rowIdx === data.insertBefore - 1 && data.insertBefore - 1 !== this.aureliaGrid.dataView.getItemCount())
146-
) {
147-
e.preventDefault(); // OR eventData.preventDefault();
148-
return false;
149-
}
150-
}
151-
return true;
152-
}
153-
154-
onMoveRows(_e: MouseEvent | TouchEvent, args: any) {
155-
// rows and insertBefore references,
156-
// note that these references are assuming that the dataset isn't filtered at all
157-
// which is not always the case so we will recalcualte them and we won't use these reference afterward
158-
const rows = args.rows as number[];
159-
const insertBefore = args.insertBefore;
160-
const extractedRows: number[] = [];
161-
162-
// when moving rows, we need to cancel any sorting that might happen
163-
// we can do this by providing an undefined sort comparer
164-
// which basically destroys the current sort comparer without resorting the dataset, it basically keeps the previous sorting
165-
this.aureliaGrid.dataView.sort(undefined as any, true);
166-
167-
// the dataset might be filtered/sorted,
168-
// so we need to get the same dataset as the one that the SlickGrid DataView uses
169-
const tmpDataset = this.aureliaGrid.dataView.getItems();
170-
const filteredItems = this.aureliaGrid.dataView.getFilteredItems();
171-
172-
const itemOnRight = this.aureliaGrid.dataView.getItem(insertBefore);
173-
const insertBeforeFilteredIdx = itemOnRight
174-
? this.aureliaGrid.dataView.getIdxById(itemOnRight.id)
175-
: this.aureliaGrid.dataView.getItemCount();
176-
177-
const filteredRowItems: any[] = [];
178-
rows.forEach((row) => filteredRowItems.push(filteredItems[row]));
179-
const filteredRows = filteredRowItems.map((item) => this.aureliaGrid.dataView.getIdxById(item.id));
180-
181-
const left = tmpDataset.slice(0, insertBeforeFilteredIdx);
182-
const right = tmpDataset.slice(insertBeforeFilteredIdx, tmpDataset.length);
183-
184-
// convert into a final new dataset that has the new order
185-
// we need to resort with
186-
rows.sort((a: number, b: number) => a - b);
187-
for (const filteredRow of filteredRows) {
188-
if (filteredRow) {
189-
extractedRows.push(tmpDataset[filteredRow]);
190-
}
191-
}
192-
filteredRows.reverse();
193-
for (const row of filteredRows) {
194-
if (row !== undefined && insertBeforeFilteredIdx !== undefined) {
195-
if (row < insertBeforeFilteredIdx) {
196-
left.splice(row, 1);
197-
} else {
198-
right.splice(row - insertBeforeFilteredIdx, 1);
199-
}
200-
}
201-
}
202-
203-
// final updated dataset, we need to overwrite the DataView dataset (and our local one) with this new dataset that has a new order
204-
const finalDataset = left.concat(extractedRows.concat(right));
205-
this.dataset = finalDataset; // update dataset and re-render the grid
206-
}
207-
208150
hideDurationColumnDynamically() {
209151
// -- you can hide by one Id or multiple Ids:
210152
// hideColumnById(id, options), hideColumnByIds([ids], options)

‎demos/aurelia/src/examples/slickgrid/example41.ts‎

Lines changed: 8 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,14 @@ export class Example41 {
6161
cancelEditOnDrag: true,
6262
disableRowSelection: true,
6363
hideRowMoveShadow: false,
64-
onBeforeMoveRows: this.onBeforeMoveRows.bind(this),
65-
onMoveRows: this.onMoveRows.bind(this),
64+
// you can provide your own `onBeforeMoveRows` and/or `onMoveRows` implementation
65+
// or use the default implementation, however the default won't work with Tree Data
66+
// onBeforeMoveRows: () => {},
67+
// onMoveRows: () => {},
68+
onAfterMoveRows: (_e, args) => {
69+
// update dataset for the ms-select list to be updated
70+
this.dataset = args.updatedItems;
71+
},
6672

6773
// you can also override the usability of the rows, for example make every 2nd row the only moveable rows,
6874
// usabilityOverride: (row, dataContext, grid) => dataContext.id % 2 === 1
@@ -79,51 +85,6 @@ export class Example41 {
7985
];
8086
}
8187

82-
onBeforeMoveRows(e: MouseEvent | TouchEvent, data: { rows: number[]; insertBefore: number }) {
83-
for (const dataRow of data.rows) {
84-
// no point in moving before or after itself
85-
if (dataRow === data.insertBefore || dataRow === data.insertBefore - 1) {
86-
e.stopPropagation();
87-
return false;
88-
}
89-
}
90-
return true;
91-
}
92-
93-
onMoveRows(_e: MouseEvent | TouchEvent, args: { rows: number[]; insertBefore: number }) {
94-
const extractedRows: any[] = [];
95-
const rows = args.rows;
96-
const insertBefore = args.insertBefore;
97-
const left = this.dataset.slice(0, insertBefore);
98-
const right = this.dataset.slice(insertBefore, this.dataset.length);
99-
100-
rows.sort((a, b) => a - b);
101-
102-
for (const row of rows) {
103-
extractedRows.push(this.dataset[row]);
104-
}
105-
106-
rows.reverse();
107-
108-
for (const row of rows) {
109-
if (row < insertBefore) {
110-
left.splice(row, 1);
111-
} else {
112-
right.splice(row - insertBefore, 1);
113-
}
114-
}
115-
116-
this.dataset = left.concat(extractedRows.concat(right));
117-
118-
const selectedRows: number[] = [];
119-
for (let i = 0; i < rows.length; i++) {
120-
selectedRows.push(left.length + i);
121-
}
122-
123-
this.aureliaGrid.slickGrid?.resetActiveCell();
124-
this.aureliaGrid.slickGrid?.invalidate();
125-
}
126-
12788
handleOnDragInit(e: CustomEvent) {
12889
// prevent the grid from cancelling drag'n'drop by default
12990
e.stopImmediatePropagation();

‎demos/react-fluent/src/examples/slickgrid/Example02.tsx‎

Lines changed: 8 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,14 @@ const Example02: React.FC = () => {
9898
disableRowSelection: true,
9999
cancelEditOnDrag: true,
100100
width: 30,
101-
onBeforeMoveRows,
102-
onMoveRows,
101+
// you can provide your own `onBeforeMoveRows` and/or `onMoveRows` implementation
102+
// or use the default implementation, however the default won't work with Tree Data
103+
// onBeforeMoveRows: () => {},
104+
// onMoveRows: () => {},
105+
onAfterMoveRows: (_e, args) => {
106+
// update dataset for the ms-select list to be updated
107+
setDataset(args.updatedItems);
108+
},
103109

104110
// you can change the move icon position of any extension (RowMove, RowDetail or RowSelector icon)
105111
// note that you might have to play with the position when using multiple extension
@@ -143,75 +149,6 @@ const Example02: React.FC = () => {
143149
return mockDataset;
144150
}
145151

146-
function onBeforeMoveRows(e: MouseEvent | TouchEvent, data: { rows: number[]; insertBefore: number }) {
147-
for (const rowIdx of data.rows) {
148-
// no point in moving before or after itself
149-
if (
150-
rowIdx === data.insertBefore ||
151-
(rowIdx === data.insertBefore - 1 && data.insertBefore - 1 !== reactGridRef.current?.dataView.getItemCount())
152-
) {
153-
e.stopPropagation();
154-
return false;
155-
}
156-
}
157-
return true;
158-
}
159-
160-
function onMoveRows(_e: MouseEvent | TouchEvent, args: any) {
161-
// rows and insertBefore references,
162-
// note that these references are assuming that the dataset isn't filtered at all
163-
// which is not always the case so we will recalcualte them and we won't use these reference afterward
164-
const rows = args.rows as number[];
165-
const insertBefore = args.insertBefore;
166-
const extractedRows: number[] = [];
167-
168-
// when moving rows, we need to cancel any sorting that might happen
169-
// we can do this by providing an undefined sort comparer
170-
// which basically destroys the current sort comparer without resorting the dataset, it basically keeps the previous sorting
171-
reactGridRef.current?.dataView.sort(undefined as any, true);
172-
173-
// the dataset might be filtered/sorted,
174-
// so we need to get the same dataset as the one that the SlickGrid DataView uses
175-
const tmpDataset = reactGridRef.current?.dataView.getItems() || [];
176-
const filteredItems = reactGridRef.current?.dataView.getFilteredItems() || [];
177-
178-
const itemOnRight = reactGridRef.current?.dataView.getItem(insertBefore);
179-
const insertBeforeFilteredIdx = itemOnRight
180-
? reactGridRef.current?.dataView.getIdxById(itemOnRight.id)
181-
: reactGridRef.current?.dataView.getItemCount();
182-
183-
const filteredRowItems: any[] = [];
184-
rows.forEach((row) => filteredRowItems.push(filteredItems[row]));
185-
const filteredRows = filteredRowItems.map((item) => reactGridRef.current?.dataView.getIdxById(item.id));
186-
187-
const left = tmpDataset.slice(0, insertBeforeFilteredIdx);
188-
const right = tmpDataset.slice(insertBeforeFilteredIdx, tmpDataset.length);
189-
190-
// convert into a final new dataset that has the new order
191-
// we need to resort with
192-
rows.sort((a: number, b: number) => a - b);
193-
for (const filteredRow of filteredRows) {
194-
if (filteredRow) {
195-
extractedRows.push(tmpDataset[filteredRow]);
196-
}
197-
}
198-
filteredRows.reverse();
199-
for (const row of filteredRows) {
200-
if (row !== undefined && insertBeforeFilteredIdx !== undefined) {
201-
if (row < insertBeforeFilteredIdx) {
202-
left.splice(row, 1);
203-
} else {
204-
right.splice(row - insertBeforeFilteredIdx, 1);
205-
}
206-
}
207-
}
208-
209-
// final updated dataset, we need to overwrite the DataView dataset (and our local one) with this new dataset that has a new order
210-
const finalDataset = left.concat(extractedRows.concat(right));
211-
212-
setDataset(finalDataset);
213-
}
214-
215152
function hideDurationColumnDynamically() {
216153
// -- you can hide by one Id or multiple Ids:
217154
// hideColumnById(id, options), hideColumnByIds([ids], options)

‎demos/react/src/examples/slickgrid/Example16.tsx‎

Lines changed: 8 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,14 @@ const Example16: React.FC = () => {
9797
disableRowSelection: true,
9898
cancelEditOnDrag: true,
9999
width: 30,
100-
onBeforeMoveRows,
101-
onMoveRows,
102-
100+
// you can provide your own `onBeforeMoveRows` and/or `onMoveRows` implementation
101+
// or use the default implementation, however the default won't work with Tree Data
102+
// onBeforeMoveRows: () => {},
103+
// onMoveRows: () => {},
104+
onAfterMoveRows: (_e, args) => {
105+
// update dataset for the ms-select list to be updated
106+
setDataset(args.updatedItems);
107+
},
103108
// you can change the move icon position of any extension (RowMove, RowDetail or RowSelector icon)
104109
// note that you might have to play with the position when using multiple extension
105110
// since it really depends on which extension get created first to know what their real position are
@@ -141,75 +146,6 @@ const Example16: React.FC = () => {
141146
return mockDataset;
142147
}
143148

144-
function onBeforeMoveRows(e: MouseEvent | TouchEvent, data: { rows: number[]; insertBefore: number }) {
145-
for (const rowIdx of data.rows) {
146-
// no point in moving before or after itself
147-
if (
148-
rowIdx === data.insertBefore ||
149-
(rowIdx === data.insertBefore - 1 && data.insertBefore - 1 !== reactGridRef.current?.dataView.getItemCount())
150-
) {
151-
e.stopPropagation();
152-
return false;
153-
}
154-
}
155-
return true;
156-
}
157-
158-
function onMoveRows(_e: MouseEvent | TouchEvent, args: any) {
159-
// rows and insertBefore references,
160-
// note that these references are assuming that the dataset isn't filtered at all
161-
// which is not always the case so we will recalcualte them and we won't use these reference afterward
162-
const rows = args.rows as number[];
163-
const insertBefore = args.insertBefore;
164-
const extractedRows: number[] = [];
165-
166-
// when moving rows, we need to cancel any sorting that might happen
167-
// we can do this by providing an undefined sort comparer
168-
// which basically destroys the current sort comparer without resorting the dataset, it basically keeps the previous sorting
169-
reactGridRef.current?.dataView.sort(undefined as any, true);
170-
171-
// the dataset might be filtered/sorted,
172-
// so we need to get the same dataset as the one that the SlickGrid DataView uses
173-
const tmpDataset = reactGridRef.current?.dataView.getItems() || [];
174-
const filteredItems = reactGridRef.current?.dataView.getFilteredItems() || [];
175-
176-
const itemOnRight = reactGridRef.current?.dataView.getItem(insertBefore);
177-
const insertBeforeFilteredIdx = itemOnRight
178-
? reactGridRef.current?.dataView.getIdxById(itemOnRight.id)
179-
: reactGridRef.current?.dataView.getItemCount();
180-
181-
const filteredRowItems: any[] = [];
182-
rows.forEach((row) => filteredRowItems.push(filteredItems[row]));
183-
const filteredRows = filteredRowItems.map((item) => reactGridRef.current?.dataView.getIdxById(item.id));
184-
185-
const left = tmpDataset.slice(0, insertBeforeFilteredIdx);
186-
const right = tmpDataset.slice(insertBeforeFilteredIdx, tmpDataset.length);
187-
188-
// convert into a final new dataset that has the new order
189-
// we need to resort with
190-
rows.sort((a: number, b: number) => a - b);
191-
for (const filteredRow of filteredRows) {
192-
if (filteredRow) {
193-
extractedRows.push(tmpDataset[filteredRow]);
194-
}
195-
}
196-
filteredRows.reverse();
197-
for (const row of filteredRows) {
198-
if (row !== undefined && insertBeforeFilteredIdx !== undefined) {
199-
if (row < insertBeforeFilteredIdx) {
200-
left.splice(row, 1);
201-
} else {
202-
right.splice(row - insertBeforeFilteredIdx, 1);
203-
}
204-
}
205-
}
206-
207-
// final updated dataset, we need to overwrite the DataView dataset (and our local one) with this new dataset that has a new order
208-
const finalDataset = left.concat(extractedRows.concat(right));
209-
210-
setDataset(finalDataset);
211-
}
212-
213149
function hideDurationColumnDynamically() {
214150
// -- you can hide by one Id or multiple Ids:
215151
// hideColumnById(id, options), hideColumnByIds([ids], options)

0 commit comments

Comments
 (0)