Skip to content

feat: provide default callbacks for Row Move plugin when null #2577

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ghiscoding merged 3 commits into from
May 9, 2026
+1,317 −735
Merged

feat: provide default callbacks for Row Move plugin when null #2577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
995a3d7
feat: provide default implementation for Row Move handler w/null
ghiscoding May 9, 2026
8d30153
chore: add missing .js extensions
ghiscoding May 9, 2026
50babfd
docs: add Row Move documentation
ghiscoding May 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 12 additions & 70 deletions demos/aurelia/src/examples/slickgrid/example16.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,18 @@ export class Example16 {
cancelEditOnDrag: true,
hideRowMoveShadow: false,
width: 30,
onBeforeMoveRows: this.onBeforeMoveRow.bind(this),
onMoveRows: this.onMoveRows.bind(this),
// you can provide your own `onBeforeMoveRows` and/or `onMoveRows` implementation
// or use the default implementation, however the default won't work with Tree Data
// onBeforeMoveRows: () => {},
// onMoveRows: () => {},
// you can provide your own `onBeforeMoveRows` and/or `onMoveRows` implementation
// or use the default implementation, however the default won't work with Tree Data
// onBeforeMoveRows: () => {},
// onMoveRows: () => {},
onAfterMoveRows: (_e, args) => {
// update dataset for the ms-select list to be updated
this.dataset = args.updatedItems;
},

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

onBeforeMoveRow(e: MouseEvent | TouchEvent, data: { rows: number[]; insertBefore: number }) {
for (const rowIdx of data.rows) {
// no point in moving before or after itself
if (
rowIdx === data.insertBefore ||
(rowIdx === data.insertBefore - 1 && data.insertBefore - 1 !== this.aureliaGrid.dataView.getItemCount())
) {
e.preventDefault(); // OR eventData.preventDefault();
return false;
}
}
return true;
}

onMoveRows(_e: MouseEvent | TouchEvent, args: any) {
// rows and insertBefore references,
// note that these references are assuming that the dataset isn't filtered at all
// which is not always the case so we will recalcualte them and we won't use these reference afterward
const rows = args.rows as number[];
const insertBefore = args.insertBefore;
const extractedRows: number[] = [];

// when moving rows, we need to cancel any sorting that might happen
// we can do this by providing an undefined sort comparer
// which basically destroys the current sort comparer without resorting the dataset, it basically keeps the previous sorting
this.aureliaGrid.dataView.sort(undefined as any, true);

// the dataset might be filtered/sorted,
// so we need to get the same dataset as the one that the SlickGrid DataView uses
const tmpDataset = this.aureliaGrid.dataView.getItems();
const filteredItems = this.aureliaGrid.dataView.getFilteredItems();

const itemOnRight = this.aureliaGrid.dataView.getItem(insertBefore);
const insertBeforeFilteredIdx = itemOnRight
? this.aureliaGrid.dataView.getIdxById(itemOnRight.id)
: this.aureliaGrid.dataView.getItemCount();

const filteredRowItems: any[] = [];
rows.forEach((row) => filteredRowItems.push(filteredItems[row]));
const filteredRows = filteredRowItems.map((item) => this.aureliaGrid.dataView.getIdxById(item.id));

const left = tmpDataset.slice(0, insertBeforeFilteredIdx);
const right = tmpDataset.slice(insertBeforeFilteredIdx, tmpDataset.length);

// convert into a final new dataset that has the new order
// we need to resort with
rows.sort((a: number, b: number) => a - b);
for (const filteredRow of filteredRows) {
if (filteredRow) {
extractedRows.push(tmpDataset[filteredRow]);
}
}
filteredRows.reverse();
for (const row of filteredRows) {
if (row !== undefined && insertBeforeFilteredIdx !== undefined) {
if (row < insertBeforeFilteredIdx) {
left.splice(row, 1);
} else {
right.splice(row - insertBeforeFilteredIdx, 1);
}
}
}

// final updated dataset, we need to overwrite the DataView dataset (and our local one) with this new dataset that has a new order
const finalDataset = left.concat(extractedRows.concat(right));
this.dataset = finalDataset; // update dataset and re-render the grid
}

hideDurationColumnDynamically() {
// -- you can hide by one Id or multiple Ids:
// hideColumnById(id, options), hideColumnByIds([ids], options)
Expand Down
55 changes: 8 additions & 47 deletions demos/aurelia/src/examples/slickgrid/example41.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,14 @@ export class Example41 {
cancelEditOnDrag: true,
disableRowSelection: true,
hideRowMoveShadow: false,
onBeforeMoveRows: this.onBeforeMoveRows.bind(this),
onMoveRows: this.onMoveRows.bind(this),
// you can provide your own `onBeforeMoveRows` and/or `onMoveRows` implementation
// or use the default implementation, however the default won't work with Tree Data
// onBeforeMoveRows: () => {},
// onMoveRows: () => {},
onAfterMoveRows: (_e, args) => {
// update dataset for the ms-select list to be updated
this.dataset = args.updatedItems;
},

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

onBeforeMoveRows(e: MouseEvent | TouchEvent, data: { rows: number[]; insertBefore: number }) {
for (const dataRow of data.rows) {
// no point in moving before or after itself
if (dataRow === data.insertBefore || dataRow === data.insertBefore - 1) {
e.stopPropagation();
return false;
}
}
return true;
}

onMoveRows(_e: MouseEvent | TouchEvent, args: { rows: number[]; insertBefore: number }) {
const extractedRows: any[] = [];
const rows = args.rows;
const insertBefore = args.insertBefore;
const left = this.dataset.slice(0, insertBefore);
const right = this.dataset.slice(insertBefore, this.dataset.length);

rows.sort((a, b) => a - b);

for (const row of rows) {
extractedRows.push(this.dataset[row]);
}

rows.reverse();

for (const row of rows) {
if (row < insertBefore) {
left.splice(row, 1);
} else {
right.splice(row - insertBefore, 1);
}
}

this.dataset = left.concat(extractedRows.concat(right));

const selectedRows: number[] = [];
for (let i = 0; i < rows.length; i++) {
selectedRows.push(left.length + i);
}

this.aureliaGrid.slickGrid?.resetActiveCell();
this.aureliaGrid.slickGrid?.invalidate();
}

handleOnDragInit(e: CustomEvent) {
// prevent the grid from cancelling drag'n'drop by default
e.stopImmediatePropagation();
Expand Down
79 changes: 8 additions & 71 deletions demos/react-fluent/src/examples/slickgrid/Example02.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,14 @@ const Example02: React.FC = () => {
disableRowSelection: true,
cancelEditOnDrag: true,
width: 30,
onBeforeMoveRows,
onMoveRows,
// you can provide your own `onBeforeMoveRows` and/or `onMoveRows` implementation
// or use the default implementation, however the default won't work with Tree Data
// onBeforeMoveRows: () => {},
// onMoveRows: () => {},
onAfterMoveRows: (_e, args) => {
// update dataset for the ms-select list to be updated
setDataset(args.updatedItems);
},

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

function onBeforeMoveRows(e: MouseEvent | TouchEvent, data: { rows: number[]; insertBefore: number }) {
for (const rowIdx of data.rows) {
// no point in moving before or after itself
if (
rowIdx === data.insertBefore ||
(rowIdx === data.insertBefore - 1 && data.insertBefore - 1 !== reactGridRef.current?.dataView.getItemCount())
) {
e.stopPropagation();
return false;
}
}
return true;
}

function onMoveRows(_e: MouseEvent | TouchEvent, args: any) {
// rows and insertBefore references,
// note that these references are assuming that the dataset isn't filtered at all
// which is not always the case so we will recalcualte them and we won't use these reference afterward
const rows = args.rows as number[];
const insertBefore = args.insertBefore;
const extractedRows: number[] = [];

// when moving rows, we need to cancel any sorting that might happen
// we can do this by providing an undefined sort comparer
// which basically destroys the current sort comparer without resorting the dataset, it basically keeps the previous sorting
reactGridRef.current?.dataView.sort(undefined as any, true);

// the dataset might be filtered/sorted,
// so we need to get the same dataset as the one that the SlickGrid DataView uses
const tmpDataset = reactGridRef.current?.dataView.getItems() || [];
const filteredItems = reactGridRef.current?.dataView.getFilteredItems() || [];

const itemOnRight = reactGridRef.current?.dataView.getItem(insertBefore);
const insertBeforeFilteredIdx = itemOnRight
? reactGridRef.current?.dataView.getIdxById(itemOnRight.id)
: reactGridRef.current?.dataView.getItemCount();

const filteredRowItems: any[] = [];
rows.forEach((row) => filteredRowItems.push(filteredItems[row]));
const filteredRows = filteredRowItems.map((item) => reactGridRef.current?.dataView.getIdxById(item.id));

const left = tmpDataset.slice(0, insertBeforeFilteredIdx);
const right = tmpDataset.slice(insertBeforeFilteredIdx, tmpDataset.length);

// convert into a final new dataset that has the new order
// we need to resort with
rows.sort((a: number, b: number) => a - b);
for (const filteredRow of filteredRows) {
if (filteredRow) {
extractedRows.push(tmpDataset[filteredRow]);
}
}
filteredRows.reverse();
for (const row of filteredRows) {
if (row !== undefined && insertBeforeFilteredIdx !== undefined) {
if (row < insertBeforeFilteredIdx) {
left.splice(row, 1);
} else {
right.splice(row - insertBeforeFilteredIdx, 1);
}
}
}

// final updated dataset, we need to overwrite the DataView dataset (and our local one) with this new dataset that has a new order
const finalDataset = left.concat(extractedRows.concat(right));

setDataset(finalDataset);
}

function hideDurationColumnDynamically() {
// -- you can hide by one Id or multiple Ids:
// hideColumnById(id, options), hideColumnByIds([ids], options)
Expand Down
80 changes: 8 additions & 72 deletions demos/react/src/examples/slickgrid/Example16.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,14 @@ const Example16: React.FC = () => {
disableRowSelection: true,
cancelEditOnDrag: true,
width: 30,
onBeforeMoveRows,
onMoveRows,

// you can provide your own `onBeforeMoveRows` and/or `onMoveRows` implementation
// or use the default implementation, however the default won't work with Tree Data
// onBeforeMoveRows: () => {},
// onMoveRows: () => {},
onAfterMoveRows: (_e, args) => {
// update dataset for the ms-select list to be updated
setDataset(args.updatedItems);
},
// you can change the move icon position of any extension (RowMove, RowDetail or RowSelector icon)
// note that you might have to play with the position when using multiple extension
// since it really depends on which extension get created first to know what their real position are
Expand Down Expand Up @@ -141,75 +146,6 @@ const Example16: React.FC = () => {
return mockDataset;
}

function onBeforeMoveRows(e: MouseEvent | TouchEvent, data: { rows: number[]; insertBefore: number }) {
for (const rowIdx of data.rows) {
// no point in moving before or after itself
if (
rowIdx === data.insertBefore ||
(rowIdx === data.insertBefore - 1 && data.insertBefore - 1 !== reactGridRef.current?.dataView.getItemCount())
) {
e.stopPropagation();
return false;
}
}
return true;
}

function onMoveRows(_e: MouseEvent | TouchEvent, args: any) {
// rows and insertBefore references,
// note that these references are assuming that the dataset isn't filtered at all
// which is not always the case so we will recalcualte them and we won't use these reference afterward
const rows = args.rows as number[];
const insertBefore = args.insertBefore;
const extractedRows: number[] = [];

// when moving rows, we need to cancel any sorting that might happen
// we can do this by providing an undefined sort comparer
// which basically destroys the current sort comparer without resorting the dataset, it basically keeps the previous sorting
reactGridRef.current?.dataView.sort(undefined as any, true);

// the dataset might be filtered/sorted,
// so we need to get the same dataset as the one that the SlickGrid DataView uses
const tmpDataset = reactGridRef.current?.dataView.getItems() || [];
const filteredItems = reactGridRef.current?.dataView.getFilteredItems() || [];

const itemOnRight = reactGridRef.current?.dataView.getItem(insertBefore);
const insertBeforeFilteredIdx = itemOnRight
? reactGridRef.current?.dataView.getIdxById(itemOnRight.id)
: reactGridRef.current?.dataView.getItemCount();

const filteredRowItems: any[] = [];
rows.forEach((row) => filteredRowItems.push(filteredItems[row]));
const filteredRows = filteredRowItems.map((item) => reactGridRef.current?.dataView.getIdxById(item.id));

const left = tmpDataset.slice(0, insertBeforeFilteredIdx);
const right = tmpDataset.slice(insertBeforeFilteredIdx, tmpDataset.length);

// convert into a final new dataset that has the new order
// we need to resort with
rows.sort((a: number, b: number) => a - b);
for (const filteredRow of filteredRows) {
if (filteredRow) {
extractedRows.push(tmpDataset[filteredRow]);
}
}
filteredRows.reverse();
for (const row of filteredRows) {
if (row !== undefined && insertBeforeFilteredIdx !== undefined) {
if (row < insertBeforeFilteredIdx) {
left.splice(row, 1);
} else {
right.splice(row - insertBeforeFilteredIdx, 1);
}
}
}

// final updated dataset, we need to overwrite the DataView dataset (and our local one) with this new dataset that has a new order
const finalDataset = left.concat(extractedRows.concat(right));

setDataset(finalDataset);
}

function hideDurationColumnDynamically() {
// -- you can hide by one Id or multiple Ids:
// hideColumnById(id, options), hideColumnByIds([ids], options)
Expand Down
Loading
Loading