Visual feedback issue while dragging and dropping ejs-grid row on to ejs-scheduler spererated by ejs-splitter

Question

Hi,I am having a visual feedback issue while dragging and dropping an ejs-grid row on to ejs-scheduler separated by ejs-splitter. I have ejs-grid on the left pane and ejs-scheduler on the right pane of splitter. After selection a row and while dragging, the row is getting behind the scheduler component after crossing the splitter's grid pane. User is not able to see any visual feedback of where the row is after crossing the splitter bar.I have tried couple of solutions to fix this but nothing worked. I have found a thread reporting a similar issue, but the solution provided in the there didn't work for us. Can someone help me fixing the issue by any other way? it looks like the thread is old and may be not a working solution with the latest packages. Help is very much appreciated.https://www.syncfusion.com/forums/149254/splitter-in-combination-with-scheduler-and-grid-gives-visual-problem-with-drag-and-drop Package versions in our project are as below.    "@syncfusion/ej2-angular-grids": "^19.3.43",    "@syncfusion/ej2-angular-layouts": "^19.3.43",    "@syncfusion/ej2-angular-navigations": "^19.3.43",    "@syncfusion/ej2-angular-notifications": "^19.3.43",    "@syncfusion/ej2-angular-schedule": "^19.3.43",    "@syncfusion/ej2-angular-splitbuttons": "^19.3.43",Thanks & Regards,Nagendra Babu Pasupuleti.

Vinitha Jeyakumar · Answer

Hi Nagendra, 
 
 
Currently, we are validating your reported query. We will update you the further details in two business days on or before 21st October 2021. 
 
Regards, 
Vinitha

Vinitha Jeyakumar · Answer

Hi Nagendra, 
 
 
We have validated your query “Visual feedback issue while dragging and dropping ejs-grid row on to ejs-scheduler spererated by ejs-splitter” 
 
Your reported issue can be solved by adding the same CSS code along with the encapsulation code in your application’s component section. It will emulates the behavior of the DOM elements by preprocessing (and renaming) the CSS code to effectively scope the CSS to the component's view. Please check the code below, 
 
Code snippet: 
App.component.ts 




@Component({ 
encapsulation: ViewEncapsulation.None, 
} 
 
App.component.css 




.e-splitter.e-splitter-horizontal .e-pane.e-scrollable, .e-splitter.e-splitter-vertical .e-pane.e-scrollable { 
      overflow: unset; 
  } 
 
Sample: https://www.syncfusion.com/downloads/support/forum/169735/ze/Ang_Splitter1086765167 
 
Please check the sample and suggested solution and let us know if it resolves your issue. 
 
Regards, 
Vinitha