Function on input field called continuosly on mouse over

Question

Hi,on grid component I have defined a column header text to a function, such as [headerText]="getHeaderText()".In the getHeaderFunction i trace the call with console.log('getHedaerText').Now I see that on mousemover in the grid component the getHeaderText is called continuosly (a lot of tons).What I'm wrong ?ThanksAdriano

Manivel Sellamuthu · Accepted Answer

Hi Adriano, 

Thanks for your update. 

We would like to inform you that it is the default behavior of change detection mechanism. Because if we use method in the angular expressions the method will be checked each time on mouseover and other DOM actions to update the value even if the method returns the same value. By default the angular change detection will be Default, so the functions will be called each time for change-detection in the Angular component. Please refer the below general link and API for more information. 

API: https://angular.io/api/core/ChangeDetectionStrategy 

General link: https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496 

Please let us know, if you need further assistance. 

Regards, 
Manivel

Rajapandiyan Settu · Answer

Hi Adriano, 
 
Thanks for contacting Syncfusion support. 
 
We have validated your query at our end. By default, the column headerText property supports only the string value and it does not support the method. Find the below documentation for your reference. 
 
headerText: https://ej2.syncfusion.com/angular/documentation/api/grid/column/#headertext 
 
Please explain more information on your requirement to validate further. Also explain,  Why you want to bind a method to the headerText property?. 
 
Regards, 
Rajapandiyan S

Adriano · Answer

Sorry for my unclearness.Setting the [headerText] to a function works fine, that is I see correctly the value returned by the associated function getHeaderText (getHeaderText return a string).The very question is that the getHeaderText function is called continuosly when the mouse is hovering on the grid.Infact, adding a console.log('getHeaderText') in the function, in the console I see continuosly adding 'getHeaderText' during mouse hovering the component.Further, in the same component hosting the grid, the app-component, there is a my-component (only for test purpose) where an input field is setted on a simlar function ([text]="getMyComponentText()"); in the getMyComponentText I've added a console.log('getMyComponentText'). Hovering the mouse on the grid component I see continuosly adding 'getHeaderText' and 'getMyComponentText'.Why this behaviour?ThanksAdriano

Adriano · Answer

Ok, right.I just traced that situation (mouse hovering) because I've a problem using a directive to manage file dragging on grid.The directive is base on https://medium.com/@tarekabdelkhalek/how-to-create-a-drag-and-drop-file-uploading-in-angular-78d9eba0b854 and https://stackblitz.com/edit/angular-drag-n-drop-directive.For this problem I've started another thread (id 161413), are the two behaviors linked?Thanks a lotAdriano

Adriano · Answer

I started this thread with a problem: dragging a file (using a custom directive to intercept file dragging events) on a grid with a custom CSS to border of blue the grid (to evidentiate the dragging), there is a flickering effect.

Searching on your site, in the file manager example, there is the same effect: dragging a file in the "files area" (I suppose it is realized as a grid component) there is the flickering effect. The red dotted box around the files area flickers (inspecting with F12 I see that the "e-upload-drag-over" class is added and removed continuolsy moving the mouse over the files area with the file dragging).

Is it correct?

Thanks

Adriano

Manivel Sellamuthu · Answer

Hi Adriano, 

Thanks for your update. 

We have validated your provided sample the reported issue not related t Syncfusion or Angular custom directive. 

While validating your sample we have found that the fileDragOver, fileDragLeave events called continuously. In that events you have changed the fileover based on the event, so that the display as none and block are changing continuously, which is the cause of the issue. You can resolve the flickering effect by checking the target in the fileDragLeave event.  

Please refer the below modified code example for more information. In this example we have checked the condition whether the dragleave target is inside the Grid or not. 





import { parentsUntil } from '@syncfusion/ej2-angular-grids'; 
   
onFileDragLeave(e) { 
    if (!parentsUntil(e.target, 'e-grid')) { 
      this.fileOver = false; 
      console.log('onFileDragLEAVE()'); 
    } 

Please let us know, if you  need further assistance. 

Regards, 
Manivel

Adriano · Answer

OK, it's all right now.However I suggest you to read my last reply, because of similar behaviour in your File Manager component.Thanks a lotAdriano

Sowmiya Padmanaban · Answer

Hi Adriano,  
 
We have checked your reported problem. We have used uploader component for uploading the files in FileManager component. We have considered your reported issue as bug in uploader component. We will include the fix for this bug in our third patch release after Volume 4 SP1 release which is expected to be rolled out by the mid of February 2021. 
 
You can track the status of this issue through the following feedback portal link.   
 
https://www.syncfusion.com/feedback/21579/the-flickering-issue-occurs-in-the-custom-drop-area-sample 
 
We appreciate your patience. 
 
Regards,  
Sowmiya.P

Sowmiya Padmanaban · Answer

Hi Adriano,  
 
We are glad to announce that our patch release (v18.4.47) is rolled out successfully. In this release, we have included a fix for the reported issue (Flickering issue in drop area). To access this fix, we suggest you update the package to the latest version (v18.4.47). 
 
We have prepared a simple sample for your reference. Please, refer to the below sample link.  
 
https://stackblitz.com/edit/angular-stwznd?file=main.ts 
 
Release Notes: https://ej2.syncfusion.com/angular/documentation/release-notes/18.4.41/?type=all#uploader 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Sowmiya.P