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

[Bob Fiering]

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="width: 100%; height: 100%" >
      <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]

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> 

 

 

 

 Sample: https://stackblitz.com/edit/angular-nvf4zk-rccstb?file=index.html 

 

Please let us know if any concerns.  

 

Regards,  

Gurunathan    

[Bob Fiering]

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]

Hi Bob,  

  

We are happy to hear form you. Please let us know if you need further assistance. 

  

Regards,  

Gurunathan 

[Bob Fiering]

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

[Indrajith Srinivasan]

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 { 

        overflow: unset !important; 

      } 

 

      .e-splitter .e-split-bar.e-split-bar-horizontal { 

        z-index: unset !important; 

      } 

    </style> 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Angular13_sample-1084657763 

 

Screenshot: 

 

 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith