GANTT - Is there a way to display a Task Duration column

[adamhughes]

Is there a way to display the Duration of a Task as a column on the left?

[Aleksandar]

Hi Adam,

The TreeList component of the Gantt supports Bound columns. You can add a column bound to a model property, End, for example, and add a template, where you can calculate the duration between the start and end dates:

@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
    .Name("gantt")
    .Columns(columns =>
    {
        columns.Bound(c => c.TaskID).Title("ID").Width(50);
        columns.Bound(c => c.Title).Editable(true).Sortable(true);
        columns.Bound(c => c.Start).Width(100).Editable(true).Sortable(true);
        columns.Bound(c => c.End).Width(100).Editable(true).Sortable(true);
        columns.Bound(c=>c.End).Template("#= differenceInDays(end,start)# days").Title("Duration");
    })
...
)

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

Here is a sample REPL demonstrating the above. You can customize the daysBetween function to return the desired data.

Alternatively, you can perform this calculation on the server-side and use a bound column that will display the calculated result.

Regards,
Aleksandar
Progress Telerik