Our state of the art Gantt chart


Post by Nualis »

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.

Post by pmiklashevich »

Please see readOnly property

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
or here: https://bryntum.com/examples/scheduler/vue/javascript/simple/dist/index.html
scheduler = bryntum.queryAll('scheduler').filter(cmp => cmp.$name === 'Scheduler')[0]
scheduler.readOnly = true;
// scheduler is not editable
scheduler.readOnly = false;
// scheduler is editable
In your Vue application you will need to retrieve Scheduler instance first to use API. For example:
this.$refs.scheduler.schedulerEngine.readOnly = true;
Please see "Accessing the Scheduler engine" chapter in this guide: https://www.bryntum.com/docs/scheduler/#guides/integration/vue.md

Pavlo Miklashevych
Sr. Frontend Developer


Post by Nualis »

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
 
 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
        }
    }
  
and change it by a user action to
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;
     }
    }
    
readOnly = false and features.rowReorderset the Gantt to readOnly = false and features.rowReorder to true,

Post by Nualis »

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
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
        }
    }
}
and during runtime a user switches to an "edit" mode by calling setReadOnly(false):
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;
    }
The Gantt is editable, however you cannot drag and drop the rows.

Post by Nualis »

Hi Pavel,

Any news on this ticket?

Post by sergey.maltsev »

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: {
        filter: true,
        nonWorkingTime: true,
        rowReorder: true,
        taskContextMenu: true,
        ...
        }
Features could be disabled at runtime with the code below.
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;
        ...
    }
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

Post Reply