An issues-only repository for the Bryntum project management component suite which includes powerful Grid, Scheduler, Calendar, Kanban Task Board and Gantt chart components all built in pure JS / CSS / TypeScript
Home Page: https://www.bryntum.com
An issues-only repository for the Bryntum suite of JavaScript components. Please report any bugs or ideas on feature requests under issues. For technical support, please join our support forum.
| Product |  |
 |
 |
 |
|---|---|---|---|---|
| Bryntum Core Widgets |  |
 |
 |
 |
| Bryntum Grid |  |
 |
 |
 |
| Bryntum Scheduler |  |
 |
 |
 |
| Bryntum Scheduler Pro |  |
 |
 |
 |
| Bryntum Gantt |  |
 |
 |
 |
| Bryntum Calendar |  |
 |
 |
 |
| Bryntum TaskBoard |  |
 |
 |
 |
When a task is created then startTime/EndTime does not match the working Time.
Go online demo: https://www.bryntum.com/examples/scheduler/workingtime/
Then Zoom, so as to reach "Day" view
Once in Day View double click to create a Task
So now, why the StartTime and EndTime are not aligned to Working Time?
Start & End Time should be suggested based on the working time settings
https://www.bryntum.com/examples/grid/celledit/
Choose Russian locale
Edit Time cell, click forward arrow
grid.module.js?436929:80 Uncaught TypeError: Cannot read property 'magnitude' of undefined
at TimeField.onForwardClick (grid.module.js?436929:80)
at FieldTrigger.onClick (grid.module.js?436929:21)
at HTMLDivElement._0x117fc7 (grid.module.js?436929:12)
Reported here: https://www.bryntum.com/forum/viewtopic.php?f=44&t=12600&p=66197#p66197
See https://app.assembla.com/spaces/bryntum/tickets/9454/details
when I move between months using mouse, calendar appears completely incorrect (10.11.2019 is saturday, displayed on thursday). probably because while moving year gets changed too
hovering month name shows combo box and month name appears according to browser locale
also you can see initially there is a February 2020 in picker, when I click to previous month button I get June 2019 for some reason
Reported here
https://www.bryntum.com/forum/viewtopic.php?f=44&t=12653
Can be reproduced in https://www.bryntum.com/examples/scheduler/ with this config.
Popup can be dragged/moved with second mouse click on it only.
listeners : {
eventClick : (event) => {
const popup = new Popup({
header : 'Popup-Header',
draggable : true,
cls : 'scheduler-popup-w',
html : `Popup-Body`
});
popup.activeTarget = event.event.srcElement;
popup.showBy(event.event.srcElement);
}
}
https://www.bryntum.com/examples/scheduler/vue/javascript/simple/dist/index.html
index.html:10 Uncaught ReferenceError: BrowserHelper is not defined
at HTMLScriptElement.startRootCause (index.html:10)
Ideas for demo
This demo has wrong toolbar layout
https://www.bryntum.com/examples/gantt/angular/advanced/
data-column in fact refers to the field of the column. For the avoidance of confusion, this should be renamed to data-field. It's the data field of that column.
data-column-id is the id of the column.
Repro: https://app.therootcause.io/?page=replay&id=707427#bryntum.com
Uncaught TypeError: Cannot read property 'timeSpan' of null at EventEdit.showRecurrenceEditor (scheduler.module.js?436950:172) at EventEdit.onRecurrenceComboChange (scheduler.module.js?436950:172) at RecurrenceCombo.trigger (scheduler.module.js?436950:10) at RecurrenceCombo.onValueCollectionChange (scheduler.module.js?436950:36) at Collection.trigger (scheduler.module.js?436950:10) at Collection.splice (scheduler.module.js?436950:12) at List.onItemClick (scheduler.module.js?436950:34) at List.onClick (scheduler.module.js?436950:34) at HTMLDivElement._0x2341a0 (scheduler.module.js?436950:12) at Object.Siesta.Test.Simulator[dispatchEvent] (rootcause-playback-engine.js:10)
Happens in both Scheduler and Gantt.
For example: https://www.bryntum.com/examples/gantt/basic/
<meta property="og:site_name" content="Bryntum">
<meta property="og:title" content="Basic demo">
<meta property="og:description" content="Shows a very basic Gantt setup">
<meta property="og:image" content="https://www.bryntum.com/examples/gantt/basic/meta/thumb.2048.png">
<meta property="og:url" content="https://www.bryntum.com/examples/gantt/basic">
<meta name="twitter:site:id" content="@bryntum">
<meta name="twitter:title" content="Basic demo">
<meta name="twitter:description" content="Shows a very basic Gantt setup">
<meta name="twitter:image" content="https://www.bryntum.com/examples/gantt/basic/meta/thumb.2048.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="description" content="Shows a very basic Gantt setup">
<meta property="og:site_name" content="Bryntum">
<meta property="og:title" content="Basic demo">
<meta property="og:description" content="Shows a very basic Gantt setup">
<meta property="og:image" content="https://www.bryntum.com/examples/gantt/basic/meta/thumb.2048.png">
<meta property="og:url" content="https://www.bryntum.com/examples/gantt/basic">
<meta name="twitter:site:id" content="@bryntum">
<meta name="twitter:title" content="Basic demo">
<meta name="twitter:description" content="Shows a very basic Gantt setup">
<meta name="twitter:image" content="https://www.bryntum.com/examples/gantt/basic/meta/thumb.2048.png">
<meta name="twitter:card" content="summary_large_image">
http://lh/bryntum-suite/scheduler/examples/timeranges/
add
hideHeaders : true
Stack:
EventHelper.js:385 Uncaught TypeError: Cannot read property 'addEventListener' of null at Function.addElementListener (EventHelper.js:385) at Function.on (EventHelper.js:335) at DragHelper.initListeners (DragHelper.js:392) at DragHelper.construct (DragHelper.js:354) at new Base (Base.js:55) at new Events (Events.js:189) at new DragHelperContainer (DragHelperContainer.js:17) at new Delayable (Delayable.js:20) at new DragHelperTranslate (DragHelperTranslate.js:18) at new DragHelper (DragHelper.js:121) addElementListener @ EventHelper.js:385 on @ EventHelper.js:335 initListeners @ DragHelper.js:392 construct @ DragHelper.js:354 Base @ Base.js:55 Events @ Events.js:189 DragHelperContainer @ DragHelperContainer.js:17 Delayable @ Delayable.js:20 DragHelperTranslate @ DragHelperTranslate.js:18 DragHelper @ DragHelper.js:121 onPaint @ AbstractTimeRanges.js:152 functionChainRunner @ InstancePlugin.js:257 plugInto.<computed> @ InstancePlugin.js:240 callback @ Base.js:230 trigger @ Events.js:726 triggerPaint @ Widget.js:2269 render @ Widget.js:890 render @ Container.js:712 render @ GridBase.js:2624 render @ TimelineBase.js:1211 functionChainRunner @ InstancePlugin.js:257 plugInto.<computed> @ InstancePlugin.js:240 finalizeInit @ Widget.js:777 finalizeInit @ GridBase.js:473 construct @ Widget.js:512 construct @ TimelineZoomable.js:80 construct @ TimelineBase.js:306 construct @ SchedulerDragResize.js:16 construct @ EventNavigation.js:63 construct @ SchedulerBase.js:193 Base @ Base.js:55 Localizable @ Localizable.js:18 Events @ Events.js:189 Delayable @ Delayable.js:20 Widget @ Widget.js:50 Container @ Container.js:61 Pluggable @ Pluggable.js:20 State @ State.js:30 GridElementEvents @ GridElementEvents.js:40 GridFeatures @ GridFeatures.js:59 GridNavigation @ GridNavigation.js:23 GridResponsive @ GridResponsive.js:66 GridSelection @ GridSelection.js:33 GridState @ GridState.js:25 GridSubGrids @ GridSubGrids.js:30 GridBase @ GridBase.js:72 TimelineDateMapper @ TimelineDateMapper.js:16 TimelineDomEvents @ TimelineDomEvents.js:26 TimelineEventRendering @ TimelineEventRendering.js:13 TimelineScroll @ TimelineScroll.js:13 TimelineViewPresets @ TimelineViewPresets.js:30 TimelineZoomable @ TimelineZoomable.js:21 TimelineBase @ TimelineBase.js:53 SchedulerDom @ SchedulerDom.js:13 SchedulerDomEvents @ SchedulerDomEvents.js:12 SchedulerDragResize @ SchedulerDragResize.js:12 SchedulerStores @ SchedulerStores.js:28 SchedulerScroll @ SchedulerScroll.js:21 SchedulerState @ SchedulerState.js:34 SchedulerEventRendering @ SchedulerEventRendering.js:20 SchedulerRegions @ SchedulerRegions.js:14 EventSelection @ EventSelection.js:12 EventNavigation @ EventNavigation.js:19 SchedulerBase @ SchedulerBase.js:56 Scheduler @ Scheduler.js:301 (anonymous) @ app.js:71 Show 36 more frames
https://www.bryntum.com/forum/viewtopic.php?f=51&t=19296&p=95391#p95391
Currently Scheduler which was created without appendTo/adopt config option can be appended to DOM element with
document.getElementById('container').appendChild(scheduler.element);
or
DomHelper.append(document.getElementById('container'), scheduler.element);
but this also require private render() call to make it visible
scheduler.render();
Also this code below doesn't work
WidgetHelper.append(scheduler, document.getElementById('container'));
Added support for changing widget's appendTo, insertBefore and insertFirst at runtime
http://lh/bryntum-suite/scheduler/examples/vertical/
https://www.bryntum.com/forum/viewtopic.php?f=51&t=12710&e=1&view=unread#unread
Open event editor, click any button. Ext thinks there's an ongoing animation, which makes it bail out:
hide: function(animation) {
var me = this,
activeAnim = me.activeAnimation,
modal;
if (me.isVisible()) {
if (me.hasListeners.beforehide && me.fireEvent('beforehide', me) === false) {
return;
}
if (me.beforeHide() === false) {
return;
}
me.viewportResizeListener = Ext.destroy(me.viewportResizeListener);
me.setCurrentAlignmentInfo(null);
if (activeAnim) {
activeAnim.on({
animationend: function() {
me.hide(animation);
},
single: true
});
return me;
}
Try it on columntypes demo
project.taskStore.on({
change : (event) => {
console.log(event.action, event.changes);
}
})
Uncaught (in promise) TypeError: Cannot read property 'id' of undefined
at RowManager.getRowById (RowManager.js:285)
at HorizontalEventMapper.getTimeSpanRenderData (BaseHorizontalMapper.js:144)
at Scheduler.generateTplData (SchedulerEventRendering.js:531)
at EventEdit.finalizeEventSave (EventEdit.js:631)
at Object.finalize (EventEdit.js:732)
at EventEdit.js:758
at new Promise (<anonymous>)
at EventEdit.save (EventEdit.js:701)
at EventEdit.onSaveClick (EditBase.js:431)
at Button.trigger (Events.js:795)
getRowById @ RowManager.js:285
getTimeSpanRenderData @ BaseHorizontalMapper.js:144
generateTplData @ SchedulerEventRendering.js:531
finalizeEventSave @ EventEdit.js:631
finalize @ EventEdit.js:732
(anonymous) @ EventEdit.js:758
save @ EventEdit.js:701
onSaveClick @ EditBase.js:431
https://www.bryntum.com/examples/grid/celledit/
https://app.therootcause.io/#bryntum/bryntum-grid/errors/e9e33535bbaf64167cd679b5d915c359bf76a030
http://lh/bryntum-suite/grid/examples/celledit/
Dblclick a cell in Custom column to show yes/no button
Change language
Editor.js:184 Uncaught TypeError: inputField.syncInputFieldValue is not a function
at Editor.onLocaleChange (Editor.js:184)
at LocaleManager.trigger (Events.js:828)
at LocaleManager.internalApplyLocale (LocaleManager.js:150)
at internalApply (LocaleManager.js:177)
at LocaleManager.applyLocale (LocaleManager.js:198)
at Combo.onAction (shared.js:541)
at Combo.callback (Base.js:231)
at Combo.trigger (Events.js:759)
at Combo.onValueCollectionChange (Combo.js:1166)
at Collection.trigger (Events.js:828)
So we can delay starting t.it until they are all expired to avoid test race conditions
This is a common scenario:
this.storeDetacher = store.on({ xxx, thisObj : this });
...
if (this.storeDetacher) {
this.storeDetacher();
this.storeDetacher = null;
}
Could be simplified by allowing named listener blocks, an internal map (on thisObj) of them and a function to detach:
store.on({ name : 'store', xxx, thisObj : this });
...
this.detachListeners('store')
`indexOf(recordOrId, visibleRecords = false) {
const id = Model.asId(recordOrId);
if (!id) {
return -1;
}`
tipTemplate public for ResizeBase plugintipEl exists in updateDateIndicator to allow any personal templates.eventRecord to template data.Add to basic scheduler sample:
subGridConfigs: {
locked: { collapsed: false },
normal: { collapsed: true } // swap these booleans for same issue
},
Console logs: "No available space provided for time axis. Make sure you have set width for horizontal mode and height for vertical"
https://www.bryntum.com/forum/viewtopic.php?f=44&t=12649
[...changes.added, ...changes.modified]
// get all the affected rows and collect them in a single array
.flatMap(eventRecord => this.eventStore.getResourcesForEvent(eventRecord))
// filter out the unique rows
.filter((value, index, self) => self.indexOf(value) === index)
// repaint those resource rows
.forEach(resourceRecord => this.repaintEventsForResource(resourceRecord));
}```
createEventOnDblClick : Boolean,regionResizeFeature : {type: Boolean, default : true},Check if other parameters doesn't exist.
https://bryntum.com/examples/gantt/basic/
Must be able to display multiple series with different renditions. For example the max allocation is an outline:
While the actual consumed allocation is as bars:
Background colours and CSS classNames should be configurable. There should be a tooltip option which is passed contextual data about the series items hovered.
Using Bryntum Scheduler 2.3.0.
Specifying a startDate containing a datetime with a timezone offset seems to not work correctly.
const scheduler = new Scheduler({
...
startDate: '2019-11-19T00:00:00+01:00'
});
Executing scheduler.startDate.getTime() returns 1574118000001.
Looks like an issue with the DateHelper since DateHelper.parse('2019-11-19T00:00:00+01:00') returns a Date with time of 1574118000001 (seems to add 1 millisecond). Expected time 1574118000000.
Reported here
https://www.bryntum.com/forum/viewtopic.php?f=44&t=12693
Steps to reproduce
vertical scrollbar scrolls to the previously selected resource
The desired behavior is to reset selection/scroll and add an option to preserve selection/scroll it on load.
{ text : 'Time', field : 'time', flex : 1, type : 'time', format : 'HH:mm' },
It should not. To reproduce, try this on console in the Gantt basic demo:
gantt.setStartDate(new Date(2019,0,20))
Then double click a task that is partially out of timeaxis (Setup web server).
It focuses the task and extends the timeaxis. It should focus but not extend
On this demo, https://www.bryntum.com/examples/scheduler/tree/ :
rowReorder : true,
filterBar : true
Filter the name column
Move a row
The row is doubled
Displays resource utilization based on tasks and assignments. Should live in Scheduler Pro and work with it and Gantt
See Ext version for inspiration: https://www.bryntum.com/examples/gantt-for-extjs/histogram/
Reported here
https://www.bryntum.com/forum/viewtopic.php?f=51&t=12659
Open this demo on touch device (checked on Windows Chrome and iPad Safari)
https://www.bryntum.com/examples/grid/multiregion/
Steps to reproduce:
Result: the task gets moved
Reported here: https://www.bryntum.com/forum/viewtopic.php?f=52&t=12639
Forum: https://bryntum.com/forum/viewtopic.php?f=51&t=12752
http://lh/bryntum-suite/scheduler/examples/basic/
Run in console:
scheduler.zoomOut();
scheduler.zoomOut();
scheduler.scrollToDate(new Date(2019, 11, 22))
https://www.bryntum.com/examples/gantt/exporttoexcel/
at Gantt.set features (gantt.module.js?436952:146)
at Gantt.set features (gantt.module.js?436952:175)
at Gantt.get (gantt.module.js?436952:10)
at Gantt.onTaskStoreChange (gantt.module.js?436952:189)
at Gantt.set project (gantt.module.js?436952:189)
at Gantt.get (gantt.module.js?436952:10)
at CalendarColumn.afterConstruct (gantt.module.js?436952:176)
at new Base (gantt.module.js?436952:10)
at new ModelStm (gantt.module.js?436952:24)
at new TreeNode (gantt.module.js?436952:24)```
Steps to reproduce on basic grid demo:
state = grid.stategrid.state = stateRequested here
https://www.bryntum.com/forum/viewtopic.php?f=51&t=12676
BryntumWidgetAdapterRegister is marked as @private so it is not exported to typing wrappers.
Should export code like this
export class BryntumWidgetAdapterRegister {
static register(type: string, widgetClass: any): void;
...
}
when two milestones are assigned to adjacent resources, start on same date and have a dependency between them, such dependency line is not drawn with narrow row height.
If either milestone is moved back-forth dependency line is drawn, when you drop milestone back to original position - it is hidden again.
Test pushed to related branch
Requested here
https://www.bryntum.com/forum/viewtopic.php?f=44&t=12731
https://www.bryntum.com/forum/viewtopic.php?f=51&t=21001&p=103962#p103962
https://www.bryntum.com/forum/viewtopic.php?f=52&t=21888&p=108180#p108180
It is really difficult to hover the cursor on this one pixel line. I
s there a way to increase the amount of hoverable space on these lines?
Derived products should import definitions from their "parent" product.
https://bryntum.com/examples/scheduler/partners/
Drag it upwards, it disappears
The framework needs a general purpose number formatting function which can be internationalized.
Probably in Core/helper/StringHelper. Should use browser formatting https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat. Locale can be read from same setting as DateHelper uses (key DateHelper.locale in localization files)
Probably needs a string-based format token for ease of use.
NumberColumn should then use it in its defaultRenderer.
{ type : 'number', field : 'value', text : 'Value', format : '????' }
Right now, any non-integer value can be displayed by javascript's default toString which is unsuitable for a UI.
Transfered from Assembla #6246.
Open https://bryntum.com/examples/gantt/advanced/
Observe screen freezes for half second looking empty, should ideally show loadmask until rendering is ready
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.