let grid: Grid = new Grid(
{
dataSource: orderDetails,
allowRowDragAndDrop: true,
selectionSettings: { type: 'Multiple' },
allowGrouping:true,
rowDrop:rowDrop,
allowPaging:true,
columns: [
. . . .
]
});
grid.appendTo('#Grid');
function rowDrop(arg){
let gObj: any = (<any>document.getElementById('Grid')).ej2_instances[0];
let startedRow:any = arg.rows[0];
let targetRow:any = arg.target.closest('tr');
if(targetRow.classList.contains('e-row') && targetRow.classList.length ){
targetRow = targetRow;
} else{
targetRow = arg.target.closest('tr').nextSibling;
}
let startRowIndex: number = parseInt(startedRow.getAttribute("aria-rowindex"),10);
let targetRowIndex: number = parseInt(targetRow.getAttribute("aria-rowindex"),10);
if(startRowIndex === targetRowIndex){
return;
}
let groupedCol:any = (gObj as any).groupSettings.columns;
for(let i:number=0,len:number=groupedCol.length;i< len; i++){
let dataIndex: number = this.dataSource.indexOf(arg.data);
let value: any = this.currentViewData["records"][targetRowIndex][groupedCol[i]]; //update the group column value to dragging row data
this.currentViewData["records"][startRowIndex][groupedCol[i]] = value;
}
gObj.refreshColumns();
arg.cancel =true; // prevent default action of rowDrop event
}
|
var grid = new ej.grids.Grid({
dataSource: window.orderDatas,
allowRowDragAndDrop: true,
selectionSettings: { type: 'Multiple' },
editSettings: {allowEditing: true, allowDeleting: true, mode: "Batch", allowAdding: true},
toolbar: ["Add", "Edit", "Delete", "Update"],
height: 400,
cellSave: function (args) {
var tr = ej.grids.parentsUntil(args.cell, "e-row");
var cell = this.getRowObjectFromUID(tr.getAttribute('data-uid')).cells;
if(this.columns.length < cell.length){
this.getRowObjectFromUID(tr.getAttribute('data-uid')).cells = this.getRowObjectFromUID(tr.getAttribute('data-uid')).cells.slice(1);
}
},
columns: [
. . . .
]
});
grid.appendTo('#Grid');
|