Enable/Disable Planned Start and Planned End columns on Planned Tasks Toggle button click

[Abhishek]

HI,

I have a requirement to disable the Planned Start and Planned End column when the user clicks on Planned Task to show Planned on Gantt view and to enable columns for editing when the user hides Planned on Gantt view

 

 

[Neli]

Hi Abhishek,

to achieve the desired behavior you can handle the togglePlannedTasks event:

- https://docs.telerik.com/kendo-ui/api/javascript/ui/gantt/events/toggleplannedtasks

In the event handler, you can access the needed columns and set their editable property to true/false. You can set the updated options using the setOptions method:

togglePlannedTasks: function(e) {
              var columns = e.sender.options.columns
              if(!e.showPlannedTasks){                
                setTimeout(function(){
                  var plannedStart = columns.find(e => e.field == "plannedStart")
                  var plannedEnd = columns.find(e => e.field == "plannedEnd")
                  plannedStart.editable = true;
                  plannedEnd.editable = true;
                  e.sender.setOptions({
                    columns: columns,
                    showPlannedTasks: false
                  })
                })
              }else{
                setTimeout(function(){
                  var plannedStart = columns.find(e => e.field == "plannedStart")
                  var plannedEnd = columns.find(e => e.field == "plannedEnd")
                  plannedStart.editable = false;
                  plannedEnd.editable = false;
                  e.sender.setOptions({
                    columns: columns,
                    showPlannedTasks: true
                  })
                })
              }
            }

Here you will find a Dojo example where this is demonstrated - https://dojo.telerik.com/@NeliKondova/AKUpEcaY.

 

Regards,
Neli
Progress Telerik

[Abhishek]

Thanks @Neli. It's working