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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Centering of Cursor when Dragging the Header

Thread ID:

Created:

Updated:

Platform:

Replies:

146464 Aug 5,2019 09:05 AM UTC Aug 7,2019 09:43 AM UTC Angular - EJ 2 1
loading
Tags: Grid
Albert K
Asked On August 5, 2019 09:05 AM UTC

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 [Syncfusion]
Replied On August 7, 2019 09:43 AM UTC

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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon