Selectable issue and header drag while reordering rows in grid

[Vamshi]

Hello Team,

I am trying to customize the example grid provided in below link.

https://www.telerik.com/kendo-angular-ui/components/grid/how-to/row-reordering/

Here I have added a [selectable]="true" property to the Kendo Grid. After that I have clicked on a row which highlighted the clicked row(for example 2nd row), then I tried to drag the row to 4th position. When I drag the selected row, the content of the row is dragging but the selectable is still fixed there in 2nd row(I mean highlighted color).

And second thing is, I am able to drag the header as well. The content of the header is not dragging but first row is changing when I drag the header. I feel the dragging should not happen while I am dragging on header.

Is there any work around on these two issues? Kindly suggest.

 

[Svet]

Hi Vamshi,

Thank you for reaching out to us.

Let me begin with providing some general information on this case.

The demonstrated how-to article is created in order to demonstrate how a custom rows reordering functionality can be achieved. However, the Kendo UI for Angular Grid doesn't provide such feature as a built-in functionality. This is why, we have created the how - to article in order to demonstrate a custom way how it could be achieved. The example is entirely based on the generic HTML drag and drop api. This is why, the control is in the hands of the developer to add any further required functionality. (The default selection functionality won't work out-of-the-box with the rows reordering functionality as desired.) Instead, some custom functionality will have to be added.  For example, the SelectionDirective could be used in the following way:

        <kendo-grid
            [data]="gridData"
            [height]="350"
            [pageable]="true"
            [skip]="state.skip"
            [pageSize]="state.take"
            [rowClass]="rowCallback"
            [selectable]="{mode: 'single'}" //as the rows reordering is per row the selection should also be per single row
            [selectedKeys]="keys"
            [kendoGridSelectBy]="'ProductID'"
...

and on each generic dragEnd event the keys array could be updated:

            sub.add(dragEnd.subscribe((e: any) => {
                e.preventDefault();
                const dataItem = this.gridData.data[draggedItemIndex];
                dataItem.dragging = false;
                this.keys = [dataItem.ProductID];
            }));

About the second question, the CSS selector currently targets all TR elements representing the Grid rows. In order to avoid the TR element used for the Grid header it can be changed as follows:

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

        const tableRows = Array.from(document.querySelectorAll('.k-grid .k-grid-content tr'));
...

Please check the following example demonstrating both suggestions:

https://stackblitz.com/edit/angular-6wsa94?file=app/app.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik