Events
You can subscribe to all Gantt events and then use them to further customize the behavior of the component.
The example below demonstrates how to use the Move event that the Gantt generates when the user moves a task.
@using Kendo.Mvc.UI
@using MyApplication.Models;
<p class="title">Gantt</p>
@(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).Title("Start Date").Format("{0:dd/MM/yyyy}").Width(100).Editable(true).Sortable(true);
columns.Bound(c => c.End).Title("End Date").Format("{0:dd/MM/yyyy}").Width(100).Editable(true).Sortable(true);
columns.Bound(c => c.PlannedStart).Hidden(true).Title("Planned Start Date").Format("{0:dd/MM/yyyy}");
columns.Bound(c => c.PlannedEnd).Hidden(true).Title("Planned End Date").Format("{0:dd/MM/yyyy}");
})
.Views(views =>
{
views.WeekView(weekView => weekView.Selected(true));
views.MonthView();
})
.ListWidth("400px")
.ShowPlannedTasks(true)
.Toolbar(t => t.Add().Name("plannedTasks"))
.Height(700)
.Events(events => events
.Move("onMove")
)
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.TaskID);
m.ParentId(f => f.ParentID);
m.OrderId(f => f.OrderId);
m.Field(f => f.Expanded).DefaultValue(true);
m.Field(f => f.Start);
m.Field(f => f.End);
m.Field(f => f.PercentComplete);
m.Field(f => f.PlannedStart);
m.Field(f => f.PlannedEnd);
m.Field(f => f.Summary);
})
.Read(read => read.Action("ReadTasks", "Home"))
.Destroy(destroy => destroy.Action("DestroyTask", "Home"))
.Update(update => update.Action("UpdateTask", "Home"))
.Create(create => create.Action("CreateTask", "Home"))
)
.DependenciesDataSource(d => d
.Model(m =>
{
m.Id(f => f.DependencyID);
m.PredecessorId(f => f.PredecessorID);
m.SuccessorId(f => f.SuccessorID);
m.Type(f => f.Type);
})
.Read("ReadDependencies", "Home")
.Create("CreateDependency", "Home")
.Update("UpdateDependency", "Home")
.Destroy("DestroyDependency", "Home")
)
)
<script>
function onMove(e) {
console.log(e.task);
}
</script>