Hi,
We would like to change the state of the Gantt from read-only to editable when the user clicks a button. Do you have an example to change the behaviour of the Gantt on the fly for this?
We are using the Vue variant.
Support Forum
Please see readOnly property
You can try it out in console:
here: https://bryntum.com/examples/scheduler/basic/
or here: https://bryntum.com/examples/scheduler/vue/javascript/simple/dist/index.html
In your Vue application you will need to retrieve Scheduler instance first to use API. For example:
Please see "Accessing the Scheduler engine" chapter in this guide: https://www.bryntum.com/docs/scheduler/#guides/integration/vue.md
You can try it out in console:
here: https://bryntum.com/examples/scheduler/basic/
scheduler.readOnly = true;
// scheduler is not editable
scheduler.readOnly = false;
// scheduler is editable
scheduler = bryntum.queryAll('scheduler').filter(cmp => cmp.$name === 'Scheduler')[0]
scheduler.readOnly = true;
// scheduler is not editable
scheduler.readOnly = false;
// scheduler is editable
this.$refs.scheduler.schedulerEngine.readOnly = true;
Pavlo Miklashevych
Sr. Frontend Developer
Hi Pavel,
Thank you for the answer. We've got this working. However I looks like setting the features.rowReorder does not respond correctly. When we initially set the Gantt to
and change it by a user action to
readOnly = false and features.rowReorderset the Gantt to readOnly = false and features.rowReorder to true,
Thank you for the answer. We've got this working. However I looks like setting the features.rowReorder does not respond correctly. When we initially set the Gantt to
readOnly: true,
features: {
filter: true,
nonWorkingTime: true,
rowReorder: false,
taskContextMenu: false,
cellEdit: true,
taskEdit: false,
eventEdit: false,
taskResize: false,
taskDrag: false,
taskDragCreate: false,
timeRanges: {
showCurrentTimeLine: false,
showHeaderElements: false,
enableResizing: true
}
}
setReadOnly: function(value) {
if (this.gantt) {
this.gantt.readOnly = value;
this.gantt.features.taskEdit = !value;
this.gantt.features.eventEdit = !value;
this.gantt.features.rowReorder = !value;
this.gantt.features.cellEdit = !value;
this.gantt.features.taskResize = !value;
this.gantt.features.taskDrag = !value;
this.gantt.features.taskDragCreate = !value;
this.gantt.showRemoveRowInContextMenu = !value;
}
}
Hi Pavel,
Thank you for the answer. We've got this working. However it looks like changing the setting "features.rowReorder" does not respond correctly. We initially set the Gantt to
and during runtime a user switches to an "edit" mode by calling setReadOnly(false):
The Gantt is editable, however you cannot drag and drop the rows.
Thank you for the answer. We've got this working. However it looks like changing the setting "features.rowReorder" does not respond correctly. We initially set the Gantt to
const ganttConfig = {
readOnly: true,
features: {
filter: true,
nonWorkingTime: true,
rowReorder: false,
taskContextMenu: false,
cellEdit: true,
taskEdit: false,
eventEdit: false,
taskResize: false,
taskDrag: false,
taskDragCreate: false,
timeRanges: {
showCurrentTimeLine: false,
showHeaderElements: false,
enableResizing: true
}
}
}
setReadOnly: function(value) {
this.gantt.readOnly = value;
this.gantt.features.taskEdit = !value;
this.gantt.features.eventEdit = !value;
this.gantt.features.rowReorder = !value;
this.gantt.features.cellEdit = !value;
this.gantt.features.taskResize = !value;
this.gantt.features.taskDrag = !value;
this.gantt.features.taskDragCreate = !value;
this.gantt.showRemoveRowInContextMenu = !value;
}
Hi!
Initially features are included/excluded through the features config like featureName: true.
https://www.bryntum.com/docs/gantt/#Grid/view/mixin/GridFeatures
No need to add something like featureName: false if you don't require this feature and it is not enabled by default.
Thus features config should contain all features you are going to access at runtime.
Features could be disabled at runtime with the code below.
https://www.bryntum.com/docs/grid/#Common/mixin/InstancePlugin#property-disabled
Currently not all of them support it.
But we are working on it. This is the ticket
https://app.assembla.com/spaces/bryntum/tickets/8187-implement-feature-disabled-support-in-a-base-feature-class/details
Initially features are included/excluded through the features config like featureName: true.
https://www.bryntum.com/docs/gantt/#Grid/view/mixin/GridFeatures
No need to add something like featureName: false if you don't require this feature and it is not enabled by default.
Thus features config should contain all features you are going to access at runtime.
features: {
filter: true,
nonWorkingTime: true,
rowReorder: true,
taskContextMenu: true,
...
}
https://www.bryntum.com/docs/grid/#Common/mixin/InstancePlugin#property-disabled
setReadOnly: function(value) {
this.gantt.readOnly = value;
this.gantt.features.taskEdit.disabled = value;
this.gantt.features.eventEdit.disabled = value;
...
}
But we are working on it. This is the ticket
https://app.assembla.com/spaces/bryntum/tickets/8187-implement-feature-disabled-support-in-a-base-feature-class/details