Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | 1x 1x 1x | import { Draggable, IDraggable } from '@zeedhi/zd-drag-grid-common';
import { IDictionary } from '@zeedhi/core';
import { TekGrid } from '../tek-grid/grid';
import { ITekDragGrid } from './interfaces';
export class TekDragGrid extends TekGrid implements ITekDragGrid {
private internalOrderColumnName: string = '';
private internalOrderMode: 'asc' | 'desc' = 'asc';
protected draggable: IDraggable;
constructor(props: ITekDragGrid) {
super({
...props,
datasource: {
...props.datasource, order: [`${props.orderColumnName}.${props.orderMode || 'asc'}`],
},
});
this.internalOrderColumnName = this.getInitValue('orderColumnName', props.orderColumnName, this.orderColumnName);
this.internalOrderMode = this.getInitValue('orderMode', props.orderMode, this.orderMode);
this.createAccessors();
this.draggable = new Draggable(this.orderColumnName, this.orderMode);
}
public set orderColumnName(value: string) {
this.internalOrderColumnName = value;
this.draggable.orderColumnName = value;
}
public get orderColumnName() {
return this.internalOrderColumnName;
}
public set orderMode(value: 'asc' | 'desc') {
this.internalOrderMode = value;
this.draggable.orderColumnName = value;
}
public get orderMode() {
return this.internalOrderMode;
}
/**
* Event triggered when dragged element is moving
* @param event DOM event
* @param row row being dragged
* @param element HTML element
* @returns return false to cancel dragging
*/
public onDragMove(event: Event, row: IDictionary, element: HTMLElement) {
this.callEvent('onDragMove', {
component: this,
event,
row,
element,
});
return true;
}
/**
* Event triggered when drag starts
* @param event DOM event
* @param row row being dragged
* @param element HTML element
*/
public onDragStart(event: Event, row: IDictionary, element: HTMLElement) {
return this.callEvent('onDragStart', {
component: this,
event,
row,
element,
});
}
/**
* Event triggered when drag ends
* @param event DOM event
* @param row row being dragged
* @param element HTML element
*/
public onDragEnd(event: Event, row: IDictionary, element: HTMLElement) {
const { oldIndex, newIndex } = event as any;
const changes = this.draggable.getDragChanges(oldIndex, newIndex, this.datasource, this.getEditedRows());
this.editing = true;
changes.forEach((change) => {
(this as any).changeEditableComponent({ name: this.orderColumnName }, change.row, change.value);
});
this.callEvent('inlineEdit', {
event,
element,
row,
column: { name: this.orderColumnName },
component: this,
});
this.callEvent('onDragEnd', {
component: this,
event,
row,
element,
});
}
}
|