Bryntum Support Forums

Posted: **Fri Sep 27, 2019 1:06 pm**

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.

Posted: **Fri Sep 27, 2019 1:39 pm**

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

Posted: **Thu Oct 03, 2019 1:18 pm**

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,

Posted: **Thu Oct 03, 2019 1:23 pm**

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.

Posted: **Tue Oct 08, 2019 11:43 am**

Hi Pavel,

Any news on this ticket?

Posted: **Tue Oct 08, 2019 2:03 pm**

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

Bryntum Support Forums

Change Gantt from read-only to editable state

Change Gantt from read-only to editable state

Re: Change Gantt from read-only to editable state

Re: Change Gantt from read-only to editable state

Re: Change Gantt from read-only to editable state

Re: Change Gantt from read-only to editable state

Re: Change Gantt from read-only to editable state