Reorder Kendo grid row with angular 6

Question

I have used the same code as used to implement the row reorder feature in the example given here https://www.telerik.com/kendo-angular-ui/components/grid/how-to/row-reordering

private handleDragAndDrop(): Subscription {
const sub = new Subscription(() => { });
let draggedItemIndex;

const tableRows = Array.from(document.querySelectorAll('.k-grid-content       
tr'));
tableRows.forEach(item => {
this.renderer.setAttribute(item, 'draggable', 'true');
const dragStart = fromEvent(item, 'dragstart');
const dragOver = fromEvent(item, 'dragover');
const drop = fromEvent(item, 'drop');

sub.add(dragStart.pipe(
tap(({ dataTransfer }) => {
try {
// Firefox won't drag without setting data
dataTransfer.setData('application/json', {});
} catch (err) {
// IE doesn't support MIME types in setData
}
})
).subscribe(({ target }) => {
draggedItemIndex = target.rowIndex;
}));

sub.add(dragOver.subscribe((e: any) => e.preventDefault()));

sub.add(drop.subscribe((e: any) => {
e.preventDefault();
const dataItem = this.gridData.data.splice(draggedItemIndex, 1)[0];
const dropIndex = closest(e.target, tableRow).rowIndex;
this.zone.run(() =>
this.gridData.data.splice(dropIndex, 0, dataItem)
);
}));
});

`-------------------------- I am receiving below error for the above code

error TS2459: Type 'Event' has no property 'dataTransfer' and no string index signature. error TS2339: Property 'rowIndex' does not exist on type 'EventTarget'.

Answer 1

Simply change following line -

// Firefox won't drag without setting data
dataTransfer.setData('application/json', '');