How to Add Planned Duration column and calculate duration using Planned End Date and Planned Start Date

[Abhishek]

I am new to KENDO UI Gantt Chart, using it for the first time, and facing lots of issues in adding new columns and calculations.

My client's requirement is to have a Duration column based on Planned Start Date and Planned End Date, column should be editable and when I change either PSD or PED duration should be updated, and vice versa that is if I update the duration my Planned End Date should also get updated accordingly.

Requesting help on this, I have attached the code.  

 

[Neli]

Hello Abhishek,

A possible approach is to use the suggestion from the following forum thread. 

- https://www.telerik.com/forums/gantt---is-there-a-way-to-display-a-task-duration-column#5462317

Here you will find a Dojo example based on the suggestion from the forum. in the example, in the custom Duration column the user can select a new planned end date.

Let me know in case you have additional questions on the matter.

Regards,
Neli
Progress Telerik

[Abhishek]

Hi Neli,

Thanks for the response, I am not clear on how to add columns.bound in my existing code.

Is there any other way to add the column and calculate duration based on the way I have added it in my code?

columns: [
                        { field: "title", title: "Title", editable: true, sortable: true, width: 200 }

]

[Neli]

Hi Abhishek,

The syntax in the linked forum is a razor syntax and can be used with UI for ASP.NET MVC or UI for ASP.NET Core wrappers. The syntax in Kendo UI for the jQuery scenario is demonstrated in the Dojo example. 

You need to configure a template. The example below shows how a function can be invoked in a  template

 columns: [
              { field: "title", title: "Title", editable: true, sortable: true, width: 100 },
              { template: "#= differenceInDays(plannedEnd,plannedStart)# days", field: "plannedEnd", width: 150, title: "Duration", editable: true},           
              { field: "plannedStart", title: "Planned Start Date", format: "{0:M/d/yyyy}", width: 85, editable: true,  },
              { field: "plannedEnd", title: "Planned End Date", format: "{0:M/d/yyyy}", width: 85, editable: true,  },
            ],

And here is the respective function that calculates the duration:

  function differenceInDays(endDate,startDate){
            var timeBetween = endDate.getTime() - startDate.getTime();
            var daysBetween = timeBetween / (1000 * 3600 * 24);      
            return  daysBetween       
}

I hope you will find the provided information helpful. 

Regards,

Neli