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

  <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>