We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Centering of Cursor when Dragging the Header

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.

1 Reply

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 7, 2019 04:43 AM

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; 
    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)'> 
       . . . 
          . . .  

Seeni Sakthi Kumar S.

Live Chat Icon For mobile
Up arrow icon