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

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

Thread ID:

Created:

Updated:

Platform:

Replies:

149254 Nov 20,2019 09:06 AM UTC Nov 21,2019 01:06 PM UTC Angular - EJ 2 3
loading
Tags: Splitter
Bob Fiering
Asked On November 20, 2019 09:06 AM UTC

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>


Gurunathan A [Syncfusion]
Replied On November 21, 2019 12:31 PM UTC

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    


Bob Fiering
Replied On November 21, 2019 12:42 PM UTC

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

Gurunathan A [Syncfusion]
Replied On November 21, 2019 01:06 PM UTC

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


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