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 |
![]() |
Tags: Splitter |
<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>
<style> .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal { overflow: unset; } </style> |
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.
This page will automatically be redirected to the sign-in page in 10 seconds.