Hi,
I am working with Angular 8.23.x and I have problems with the visibility of the horizontal scroll-bar of the Timeline-View (Resources on the left side, grouped).
The ejs-schedule is positioned in the left pane of an ejs-splitter. In the right pane is an ejs-grid component.
When I don't provide a height in the scheduler, the height is only about 50% of the screen and it shows the horizontal scroll-bar.
The height of the eps-splitter pane is the full 100% of the screen, so (according to the documentation) the height should automatic take the full height.
As soon as I provide a height in the properties of the ejs-schedule tag or in the corresponding css file the scheduler is this height but I loses the horizontal scroll-bar.
It is simply not there anymore.
Is there some configuration I have overlooked?
Hope someone can help me out with this strange behaviour.
Kind regards,
Bob
The structure is as follows:
<div class="toolbar">
<app-planning-toolbar>
</app-planning-toolbar>
</div>
<div id='container'>
<ejs-splitter #horizontal separatorSize=3>
<e-panes>
<e-pane size='70%' min='30%' [collapsible]='true'>
<ng-template #content>
<ejs-schedule
cssClass='virtual-scrolling'
#scheduleObj
id='Schedule'
[currentView]="setView"
[views] = "setViews"
[eventSettings]= "eventObject"
[selectedDate]="setDate"
[allowDragAndDrop]="schedulerDragAndDrop"
[allowResizing]="true"
[group]="groupData"
[rowAutoHeight]="rowAutoHeight"
[showWeekNumber]="showWeekNumber"
[workHours]="scheduleHours"
[startHour]="startHour"
[endHour]="endHour"
[firstDayOfWeek]="weekFirstDay"
[timeScale]="timeScale"
[showHeaderBar]="showHeaderBar"
(eventRendered)="oneventRendered($event)"
(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>
<!-- Set time format for the major timescale-->
<ng-template #timeScaleMajorSlotTemplate let-data>
<div class="majorTime">{{getMajorTime(data.date)}}</div>
</ng-template>
</ejs-schedule>
<!-- Context Menu for the Planning Events-->
<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 size='30%' min='30%' [collapsible]='true'>
<ng-template #content>
<ejs-grid
id='Grid'
#gridObj
[dataSource]="servicePlanItems"
[allowGrouping]="true"
[allowSorting]="true"
[allowFiltering]="true"
[filterSettings]="filterOptions"
[allowSelection]="true"
[allowRowDragAndDrop]="gridDragAndDrop"
[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"
type="date"
format="d-M-y">
</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>
<style>
.e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal {
overflow: scroll;
}
</style>
