projects/i-components/src/lib/utils/event-manager.ts
XamDataGridEventManager is a class used to workaround about xamDataGrid event ordering
Properties |
|
Methods |
|
constructor(xamDataGrid: any)
|
||||||
xamDataGrid event manager constructor
Parameters :
|
Public pointerdownHandler | ||
Default value : () => {...}
|
||
Captures the pointerdown event when it happens inside a cell from a row in order to make sure xamDataGrid triggers row selection first |
||
Parameters :
|
Public xamDataGrid |
Type : any
|
Public destroy |
destroy()
|
Removes event listener for xamDataGrid.
Returns :
void
|
hasTheSelectedRowDataErrors | ||||||||
hasTheSelectedRowDataErrors(rowIndex: number)
|
||||||||
Validates if the previously selected row has errors on any cell to keep the focus on the row with erros
Parameters :
Returns :
boolean
|
Public register |
register()
|
Registers a click event listener
Returns :
void
|
export class XamDataGridEventManager {
/**
* xamDataGrid event manager constructor
* @param {any} xamDataGrid
* @memberof XamDataGridEventManager
*/
/* istanbul ignore next */
constructor(public xamDataGrid: any) {}
/**
* Registers a click event listener
*
* @memberof XamDataGridEventManager
*/
public register() {
this.xamDataGrid.grid?.tbody?.nativeElement?.addEventListener(
'mousedown',
this.mouseDownHandler,
{ capture: true }
);
this.xamDataGrid.grid?.tbody?.nativeElement?.addEventListener(
'pointerdown',
this.pointerdownHandler,
{ capture: true }
);
}
/**
* Captures click event when it happens inside a cell from a row in order to make sure
* xamDataGrid triggers row selection first
*
* @param {MouseEvent} event
* @memberof XamDataGridEventManager
*/
public mouseDownHandler = (event: MouseEvent) => {
const inRow = event
.composedPath()
.find(
(target: HTMLElement) =>
target?.tagName?.toLowerCase() === 'igx-grid-row'
);
const hasSelection = this.xamDataGrid.getSelectionMode
? this.xamDataGrid.getSelectionMode() !== 'none'
: this.xamDataGrid.model.SelectionSettings.RowSelection !== 'None';
const multipleSelection = this.xamDataGrid.getSelectionMode
? this.xamDataGrid.getSelectionMode() === 'multiple'
: this.xamDataGrid.model.SelectionSettings.RowSelection === 'Multiple';
/* istanbul ignore else */
if (inRow && hasSelection) {
const rowIndex = parseInt((inRow as HTMLElement).dataset.rowindex, 10);
/* istanbul ignore else */
if (this.hasTheSelectedRowDataErrors(rowIndex)) {
return;
}
let row = null;
if (
this.xamDataGrid.grid.primaryKey &&
this.xamDataGrid.grid.filteredSortedData.length > 0
) {
const rowKey =
this.xamDataGrid.grid.filteredSortedData[rowIndex][
this.xamDataGrid.grid.primaryKey
];
row = this.xamDataGrid.grid.getRowByKey(rowKey);
} else {
row = this.xamDataGrid.grid.getRowByIndex(rowIndex);
}
/* istanbul ignore else */
if (event.shiftKey && multipleSelection) {
this.xamDataGrid.grid.selectionService.selectMultipleRows(
row.key,
row.data,
event
);
return;
}
this.xamDataGrid.grid.selectionService.selectRowById(
row.key,
!event.ctrlKey,
event
);
}
};
/**
* Validates if the previously selected row has errors on any cell to keep the focus on the row with erros
* @param rowIndex Index of the row where the click was done
* @returns
*/
hasTheSelectedRowDataErrors(rowIndex: number): boolean {
const columnWithErrors =
this.xamDataGrid.evaluateColumnDataErrors?.(
this.xamDataGrid.model.ActiveCell?.Row?.Data
) ?? false;
const activeCellIndex = this.xamDataGrid.model.ActiveCell?.Row?.Index;
/* istanbul ignore next */
if (
columnWithErrors &&
activeCellIndex != rowIndex &&
this.xamDataGrid.model.EditingSettings.AllowEditing !== 1
) {
const nextCell = this.xamDataGrid.grid.getCellByColumn(
activeCellIndex,
'data.' + columnWithErrors
);
nextCell.selected = true;
nextCell.row.selected = true;
nextCell.editMode = true;
setTimeout(() => {
this.xamDataGrid.grid.navigateTo(
nextCell.row.index,
nextCell.column.index,
(args) => {
args.target.nativeElement.click();
}
);
});
this.xamDataGrid.nextColumnWithErrors = null;
return true;
}
return false;
}
/**
* Captures the pointerdown event when it happens inside a cell from a row in order to make sure
* xamDataGrid triggers row selection first
*
* @param {MouseEvent} event
* @memberof XamDataGridEventManager
*/
public pointerdownHandler = (event: PointerEvent) => {
const columnWithErrors =
this.xamDataGrid.evaluateColumnDataErrors?.(
this.xamDataGrid.model.ActiveCell?.Row?.Data
) ?? false;
/* istanbul ignore else */
if (
!columnWithErrors &&
this.xamDataGrid.stopClickOutsideCell?.() === true
) {
event.stopPropagation();
return;
}
const inRow = event
.composedPath()
.find(
(target: HTMLElement) =>
target?.tagName?.toLowerCase() === 'igx-grid-row'
);
/* istanbul ignore else */
if (inRow) {
const rowIndex = parseInt((inRow as HTMLElement).dataset.rowindex, 10);
if (
columnWithErrors &&
this.xamDataGrid.model.ActiveCell?.Row?.Index != rowIndex
) {
event.stopPropagation();
return;
} else {
return;
}
}
};
/**
* Removes event listener for xamDataGrid.
*
* @memberof XamDataGridEventManager
*/
public destroy() {
this.xamDataGrid.grid?.tbody?.nativeElement?.removeEventListener(
'mousedown',
this.mouseDownHandler,
{ capture: true }
);
this.xamDataGrid.grid?.tbody?.nativeElement?.removeEventListener(
'pointerdown',
this.pointerdownHandler,
{ capture: true }
);
}
}