we are having some difficulties with SchedulerPro in our project
We are setting events property on the Scheduler but nothing appears. When moving the timeline using shiftNext(), the events appear.
After selecting an event, we are getting this error message in the console:
Uncaught TypeError: Cannot read properties of null (reading 'outgoingDeps')
at EventSelection.js:587:1
at Array.forEach (<anonymous>)
at SchedulerPro.highlightLinkedEvents (EventSelection.js:580:1)
at SchedulerPro.onSelectedCollectionChange (EventSelection.js:451:1)
at EventSelection.js:166:1
at ProjectModel.deferUntilRepopulationIfNeeded (SchedulerBasicProjectMixin.js:519:1)
at SchedulerPro.change (EventSelection.js:166:1)
at Collection.trigger (Events.js:1212:1)
at Collection.splice (Collection.js:625:1)
at set selectedAssignments [as selectedAssignments] (EventSelection.js:219:1)
We are using typescript and this is the method on how we set events:
data.mwos is saved data from the server.
Could you please provide a sample of how did you set up the Scheduler and the events data?? Without that is difficult to say what could be causing the events to not be appearing...
Also, that error doesn't seem to be related (at first sight) to the way that you're setting the events, perhaps with that sample project, we could check what is going on there. You can base in one of our demos, add your configuration and data with the behavior that you're describing, and from there we could assist you better.
import {BryntumGridProps, BryntumResourceHistogramProps, BryntumSchedulerProProps} from '@bryntum/schedulerpro-react'
import {Column, DateHelper, ProjectModel, ResourceModel, ResourceModelConfig, WidgetHelper} from '@bryntum/schedulerpro'
import EditPanel from '../../widgets/EditPanel/EditPanel'
const dailyPreset = {
base: 'hourAndDay',
tickWidth: 45,
timeResolution: { // Dates will be snapped to this resolution
unit: 'minute', // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
increment: 1
},
headers: [
{
unit: 'day',
align: 'center',
dateFormat: 'dddd DD.MM'
},
{
unit: 'h',
align: 'center',
dateFormat: 'HH'
}
]
}
const weeklyPreset = {
base: 'dayAndWeek',
// id: 'myPreset', // Unique id value provided to recognize your view preset. Not required, but having it you can simply set new view preset by id: scheduler.viewPreset = 'myPreset'
// name: 'My view preset', // A human-readable name provided to be used in GUI, e.i. preset picker, etc.
// tickWidth : 24, // Time column width in horizontal mode
// tickHeight : 50, // Time column height in vertical mode
displayDateFormat: 'DD HH:mm', // Controls how dates will be displayed in tooltips etc
shiftIncrement: 1, // Controls how much time to skip when calling shiftNext and shiftPrevious.
shiftUnit: 'day', // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
//defaultSpan: 7, // By default, if no end date is supplied to a view it will show 12 hours
timeResolution: { // Dates will be snapped to this resolution
unit: 'minute', // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
increment: 10
},
headers: [ // This defines your header rows from top to bottom
{ // For each row you can define 'unit', 'increment', 'dateFormat', 'renderer', 'align', and 'thisObj'
unit: 'month',
increment: 1,
dateFormat: 'MMMM'
},
{
unit: 'day',
increment: 1,
dateFormat: 'ddd DD.MM'
},
],
// columnLinesFor : 1 // Defines header level column lines will be drawn for. Defaults to the last level.
}
const monthlyPreset = {
id: 'monthlyView',
tickWidth: 35,
//rowHeight : 32,
displayDateFormat: 'DD.MM',
shiftIncrement: 1,
shiftUnit: 'day',
timeResolution: {
unit: 'day',
increment: 1
},
//defaultSpan: 31,
mainHeaderLevel: 1,
headers: [
{
unit: 'month',
increment: 1,
dateFormat: 'MMMM YYYY'
},
{
unit: 'day',
increment: 1,
dateFormat: 'DD'
}
]
}
// Upper-level SchedulerPro getter
const getScheduler = (child: any) => {
return child.up('schedulerpro')
}
class MyResource extends ResourceModel {
//https://forum.bryntum.com/viewtopic.php?t=18441&start=10
constructor(config?: Partial<ResourceModelConfig>) {
super(config)
Object.defineProperty(this, 'initials', {
get() {
return 'ABC'
}
})
}
}
const project = new ProjectModel({
resourceModelClass: MyResource,
})
const schedulerProConfig: BryntumSchedulerProProps = {
viewPreset: weeklyPreset,
allowOverlap: false,
rowHeight: 80,
flex: '1 1 60%',
enableUndoRedoKeys: true,
stripeFeature: true,
timeRangesFeature: true,
columns: [
{
type: 'resourceInfo',
text: 'Name',
field: 'name',
showEventCount: true,
width: 200,
editor: null,
}
],
project: project,
calendarHighlightFeature: true,
eventTooltipFeature: {
hoverDelay: 300,
textContent: true,
template: (event: any) => {
return `<h4>ID: ${event.eventRecord.id}</h4>`
},
},
features: {
tree: true,
//To customize arrow between mwos on timeline
//https://www.bryntum.com/docs/gantt/api/Scheduler/feature/Dependencies
dependencies: true,
//https://www.bryntum.com/docs/gantt/api/Scheduler/feature/DependencyEdit
dependencyEdit: false,
eventDrag: {
constrainDragToResource: true,
},
eventDragCreate: false,
eventDragSelect: true,
eventResize: false,
cellMenu: true,
timeAxisHeaderMenu: {
disabled: true,
},
//For right click on events
//https://www.bryntum.com/docs/gantt/api/Scheduler/feature/EventMenu
eventMenu: {
disabled: true
},
//Right click on empty space in timeline
scheduleMenu: {
disabled: true
},
nonWorkingTime: true,
resourceNonWorkingTime: {
maxTimeAxisUnit: 'week',
},
},
extraData: {
startHour: 0,
endHour: 24
},
zoomKeepsOriginalTimespan: true,
zoomOnTimeAxisDoubleClick: false,
zoomOnMouseWheel: false,
createEventOnDblClick: false,
enableDeleteKey: false,
enableEventAnimations: false,
multiEventSelect: false,
highlightPredecessors: true,
highlightSuccessors: true,
}
const histogramConfig: BryntumResourceHistogramProps = {
project: project,
hideHeaders: true,
viewPreset: weeklyPreset,
rowHeight: 60,
flex: '1 1 40%',
showBarTip: true,
showBarText: false,
columns: [
{
type: 'resourceInfo',
text: 'Name',
field: 'name',
editor: false,
//enableCellContextMenu: false,
showEventCount: true,
width: 200
},
{
type: 'scale',
hidden: true,
}
],
features: {
nonWorkingTime: true,
resourceNonWorkingTime: {
maxTimeAxisUnit: 'week',
},
},
calendarHighlightFeature: true,
eventTooltipFeature: {
hoverDelay: 300,
textContent: true,
template: (event: any) => {
return `<h4>ID: ${event.eventRecord.id}</h4>`
},
},
}
const gridConfig: BryntumGridProps = {
flex: 1,
rowHeight: 60,
readOnly: false,
minWidth: 250,
maxWidth: 431,
selectionMode: {
row: true
},
draggable: true,
stripeFeature: true,
sortFeature: 'id',
cellTooltipFeature: {
hoverDelay: 300,
textContent: true,
tooltipRenderer: ({record: order}: any) =>
order.isScheduled ?
`<h4>Type: ${order.templateName}</h4>This order is scheduled to finish by <b>${DateHelper.format(order.finishDate, 'MMM d HH:mm')}</b>`
: `<h4>Type: ${order.templateName}</h4>Try dragging this order onto the schedule`
},
// Grid top toolbar
tbar: [
{
text: 'Add order',
cls: {'tbarBryntumButton': true},
//icon: 'b-icon b-fa-plus',
toggleable: true,
// onAction : onAddClick
},
'->',
{
text: 'Hide scheduled',
toggleable: true,
cls: {'tbarBryntumButton': true},
onToggle: ({source, pressed}: any) => {
const store = source.up('grid').store
if (pressed) {
store.filter({
property: 'startDate',
operator: '=',
value: null
})
} else {
store.clearFilters()
}
}
}
],
columns: [{
type: 'template',
text: 'Order List',
flex: 1,
maxWidth: 100,
field: 'name',
editor: false,
htmlEncode: false,
cellCls: 'order-cell',
template: ({record: order}: any) =>
`<div>${'#' + order.id} </div>
<div class="customer">Descr: ${order.name}</div>`
}, {
text: 'Start',
type: 'date',
flex: 1,
align: 'right',
format: 'MMM D HH:mm',
field: 'startDate',
}, {
text: 'Finish',
type: 'date',
flex: 1,
align: 'right',
format: 'MMM D HH:mm',
editor: false,
field: 'endDate'
},
{
text: 'Due date',
type: 'date',
flex: 1,
align: 'right',
format: 'MMM D HH:mm',
editor: false,
field: 'dueDate'
},
],
disableGridRowModelWarning: true
}
export {
schedulerProConfig,
gridConfig,
dailyPreset,
weeklyPreset,
monthlyPreset,
getScheduler,
histogramConfig,
project
}
Re: [REACT]
Posted: Wed Nov 23, 2022 8:10 am
by alex.l
Nothing obvious from the files attached, unfortunately.
Please zip and attach a runnable app here, and provide steps to reproduce the issue. It will help us a lot to investigate it faster.
Re: [REACT] Scheduler errors
Posted: Thu Dec 01, 2022 5:06 pm
by kovacd
Hello,
mateRO was a member in our group an was moved to another department. Now i am working on the project so i will continue with this topic.
I've attached a minimal test case. The src/README.md file contains all of our problems and how to reproduce them.
Re: [REACT] Scheduler errors
Posted: Mon Dec 05, 2022 9:32 am
by kovacd
Hey,
any updates on this topic?
Re: [REACT] Scheduler errors
Posted: Mon Dec 12, 2022 2:24 pm
by alex.l
Sorry for long answer. Your application is very hard to read and understand. We are working hard to find all required parts to see what's going on.
Re: [REACT] Scheduler errors
Posted: Mon Dec 12, 2022 3:51 pm
by kovacd
Thank you for the reply, if there is anything we can help you with understanding the code or anything else, let us know and we can schedule a meeting.
Best regards.
Re: [REACT] Scheduler errors
Posted: Tue Dec 13, 2022 6:09 am
by alex.l
Thanks for waiting!
I found 2 problems:
resourceId notation for SchedulerPro is not supported. You need to fill assignmentStore instead. I see in the code you just need to uncomment that and remove resourceId from events data.
SchedulerPro shows current date period, but your event scheduled on Dec 2023. try to change startDate to new Date() for test. You'll see event on the timeline.
Re: [REACT] Scheduler errors
Posted: Wed Dec 14, 2022 10:31 am
by kovacd
Hey,
thank you for the reply, will make the changes.
Hope you will manage to resolve other issues as well.