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

Splitter in combination with Scheduler and Grid gives 'visual' problem with drag and drop.

Hi,

I have a component with in the HTML a splitter with two panes.
In pane one I have the scheduler and in the second pane the grid.
When I drag a row from the grid to the scheduler, the draggable object with data is not dragging over the scheduler but it goes underneath the e-pane from the scheduler.
Without the splitter it is working fine. The draggable row is going over the scheduler to being dropped. As soon I use the splitter this behaviour changes.
I tried to change to change the z-index of the ng-template with the grid in the hope it would solve the problem, but sadly it didn't.
Searching this forum and the internet did not give me a clue how to solve it.
I hope you can help me with this.

Best regards,

Bob Fiering

The HTML I am using:

  <div id='container'>
    <ejs-splitter 
#horizontal style="width100%height100%>
      <e-panes>
        <e-pane>
          <ng-template 
#content class="scheduler-pane">

          
<ejs-schedule
            
width = '100%'
            
[height]="schedulerHeight"
            
cssClass='virtual-scrolling'
            
#scheduleObj
            
id='Schedule'
            
[currentView]="setView"
            
[views] = "setViews"
            
[eventSettings]= "eventObject"
            
[selectedDate]="setDate"
            
[allowDragAndDrop]="true"
            
[allowResizing]="true"
            
[group]="groupData"
            
[rowAutoHeight]="rowAutoHeight"
            
[showWeekNumber]="showWeekNumber"
            
[workHours]="scheduleHours"
            
[startHour]="startHour"
            
[endHour]="endHour"
            
[firstDayOfWeek]="weekFirstDay"
            
[timeScale]="timeScale"
            
[showHeaderBar]="showHeaderBar"
            
(dragStart)="onDragStart($event)"
            
(resizeStart)="onResizeStart($event)"
            
(actionBegin)="onActionBegin($event)">
            <e-resources>
              <e-resource
                
field="ResourceID"
                
title="Resource Name"
                
name="Resources"
                
textField="Name"
                
idField="Id"
                
[dataSource]="resourceDataSource">
              </e-resource>

              
<e-resource
                
field ="GroupID"
                
title = "Group Name"
                
name = "Departments"
                
[dataSource] = "groupDataSource"
                
textField="Name"
                
idField="Id"
                
colorField="Color"
                
groupIDField="GroupID">
              </e-resource>
            </e-resources>

            
<e-header-rows>
              <e-header-row 
option='Week'>
                <ng-template 
#template let-data>
                  <span 
[innerHTML]="getWeekDetails(data)"></span>
                </ng-template>
              </e-header-row>
              <e-header-row 
option='Date'></e-header-row>
              <e-header-row 
option='Hour'></e-header-row>
            </e-header-rows>
            <e-views>
              
<!--          Lazy loading for all views-->
              
<e-view
                
option="TimelineDay"
                
[allowVirtualScrolling]="virtualscroll"
                
displayName="Dag">
              </e-view>
              <e-view
                
option="TimelineWorkWeek"
                
[allowVirtualScrolling]="virtualscroll"
                
displayName="Werkweek">
              </e-view>
              <e-view
                
option="TimelineWeek"
                
[allowVirtualScrolling]="virtualscroll"
                
displayName="Week">
              </e-view>
              <e-view
                
option="TimelineMonth"
                
[allowVirtualScrolling]="virtualscroll"
                
displayName="Maand">
              </e-view>
            </e-views>
            

            
<ng-template #timeScaleMajorSlotTemplate let-data>
              <div 
class="majorTime">{{getMajorTime(data.date)}}</div>
            </ng-template>
          </ejs-schedule>

          
<ejs-contextmenu
            
#menuSchedulerObj
            
cssClass='schedule-context-menu'
            
target='.e-schedule'
            
[items]='menuItems'
            
(beforeOpen)='onContextMenuScheduleBeforeOpen($event)'
            
(select)='onMenuItemScheduleSelect($event)'>
          </ejs-contextmenu>
          </ng-template>
        </e-pane>
        <e-pane>
          <ng-template 
#content class="grid-pane">
          
<!--    Grid with the Service-calls that are not planned -->
                <ejs-grid
                  
id='Grid'
                  
#gridObj
                  
[height]="schedulerHeight"
                  
[dataSource]="profitServicePlanItems"
                  
[allowGrouping]="true"
                  
[allowSorting]="true"
                  
[allowFiltering]="true"
                  
[filterSettings]="filterOptions"
                  
[allowSelection]="true"
                  
[allowRowDragAndDrop]="true"
                  
[editSettings]='editSettings'
                  
[rowHeight]="rowHeight"
                  
[rowDropSettings]="srcDropOptions"
                  
(rowDrop)="onDragStop($event)"
                  
(rowDrag)="onRowDrag($event)"
                  
[contextMenuItems]="contextMenuGridItems"
                  
(contextMenuClick)="contextMenuGridClick($event)"
                
>
                  <e-columns>
                    <e-column
                      
field="sItemMessageDate"
                      
headerText="Datum"
                      
textAlign="right"
                      
width="75">
                    </e-column>
                    <e-column
                      
field="sItemCompany"
                      
headerText="Bedrijf"
                      
textAlign="left"
                      
width="175">
                    </e-column>
                    <e-column
                      
field="sItemSubject"
                      
headerText="Onderwerp"
                      
textAlign="left"
                      
width="200">
                    </e-column>
                    <e-column
                      
field="sItemMFName"
                      
headerText="Code"
                      
textAlign="left"
                      
width="70">
                    </e-column>
                  </e-columns>
                </ejs-grid>
          </ng-template>
        </e-pane>
      </e-panes>
    </ejs-splitter>
  </div>


5 Replies

GA Gurunathan A Syncfusion Team November 21, 2019 04:31 AM

Hi Bob,  
 
Thanks for contacting Syncfusion.  
We have validated this issue, due to overflow: auto style applied to splitter pane element dragging element won’t visible outside of current pane. But we can achieve your requirement by workaround solution by adding following CSS in your application end. 
  
<style> 
  .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal { 
    overflow: unset; 
  } 
</style> 
 
 
 
 
Please let us know if any concerns.  
 
Regards,  
Gurunathan    



BF Bob Fiering November 21, 2019 04:42 AM

Hi Gurunathan,

Very happy with your answer.
Added the style and it works great.
Thank you for looking into this problem and providing a solution.

Regards,

Bob


GA Gurunathan A Syncfusion Team November 21, 2019 05:06 AM

Hi Bob,  
  
We are happy to hear form you. Please let us know if you need further assistance. 
  
Regards,  
Gurunathan 



BF Bob Fiering December 1, 2021 07:33 AM

Hi,


The solution provided has been working perfect the last two years.

With every update to a new Angular version it worked.

When we try the same with Angular 13 it is not working anymore.
The only way to get the dragged line from the grid onto the scheduler is with the lines underneath in the general styles.scss:

.e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal {
overflow: unset !important;
}

.e-splitter .e-split-bar.e-split-bar-horizontal {
z-index: unset !important;
}

But when we do this the scroll / scrollbar functionality of the grid is gone.
The grid is 'frozen' and cannot be scrolled.


Is there a solution to fix this? 

Regards,


Bob




IS Indrajith Srinivasan Syncfusion Team December 2, 2021 02:25 AM

Hi Bob, 
 
Good day to you, 
 
We have validated your reported query. The angular version upgrades will not be an issue, with the style changes applied for the elements. We suspect the style is not applied properly for the elements hence the reported issue occurs. We have also prepared a sample for your reference, using the Angular 13 and same code blocks used earlier. 
 
Style changes: 
 
 
    <style> 
      .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal, 
      .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal { 
        overflowunset !important; 
      } 
 
      .e-splitter .e-split-bar.e-split-bar-horizontal { 
        z-indexunset !important; 
      } 
    </style> 
 
 
 
Screenshot: 
 
 
 
Please let us know if the solution helps, 
 
Regards, 
Indrajith 


Loader.
Live Chat Icon For mobile
Up arrow icon