Centering of Cursor when Dragging the Header

[Albert K]

I would like to suggest that the cursor be placed in the center of the header Text being dragged to the grouping bar.  As can be seen in the screenshot below it quite misleading for user as to when and where to release the cursor drag.  Thank you.

[Seeni Sakthi Kumar Seeni Raj]

Hi Albert,  

Thanks for contact Syncfusion Support.  

By Default, cursor over the dragging clone element is placed based on the position of the clicked element. We cannot change the cursor position or centerish the cursor position over the clone element. Instead, we have support for the Tail Mode. This will place the clone element to the tail of the cursor. Refer to the screenshot.  

 

To achieve this, you have to set the enableTailMode as true for the Draggable Element in the dataBound event of the Grid. Refer to the following code example. 

import { Component, OnInit, ViewChild } from '@angular/core'; 

import { data } from './data'; 

import { GridComponent } from '@syncfusion/ej2-angular-grids'; 

. .. . 

     . . . 

class AppComponent { 

    public data: Object[]; 

    public pageSettings: Object; 

    @ViewChild('grid') 

    public grid: GridComponent; 

    . . . 

             . . . 

    ondataBound() : void { 

      this.grid.element.querySelectorAll('.e-draggable')[1].ej2_instances[0].enableTailMode = true; 

    } 

} 

<div class="control-section"> 

    <ejs-grid #grid [dataSource]='data' [allowGrouping]='true' allowPaging='true' [pageSettings]='pageSettings' (dataBound)='ondataBound($event)'> 

       . . . 

          . . .  

    </ejs-grid> 

</div> 

 

Regards, 

Seeni Sakthi Kumar S.