New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Switch Between Day, Week, Month, and Year Views in the Gantt
Updated on Mar 26, 2026
Environment
| Product | Telerik UI for ASP.NET MVC Gantt |
Description
How can I configure the Telerik UI for UI for ASP.NET MVC Gantt to support Day, Week, Month, and Year views and switch between them with custom buttons?
Solution
The Gantt component supports multiple built-in views via its Views configuration. To switch views programmatically from the client side, use the view() method of the Gantt client-side API.
The following approach demonstrates how to:
- Configure the Gantt with all four view types and set Month as the default selected view.
- Create custom view selector buttons outside the Gantt.
- Handle the
Navigateevent to keep the custom buttons synchronized when the user switches views.
View Configuration
Razor
@using Kendo.Mvc.Examples.Models.Gantt;
@(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 Time").Format("{0:MM/dd/yyyy}").Width(100).Editable(true).Sortable(true);
})
.Views(views =>
{
views.DayView();
views.WeekView();
views.MonthView(monthView => monthView.Selected(true));
views.YearView();
})
.Height(430)
.ShowWorkHours(false)
.ShowWorkDays(false)
.Snap(false)
.Editable(false)
.Events(events => events.Navigate("onGanttNavigate"))
.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);
})
.Read("Views_Read_Tasks", "Gantt")
)
.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("Views_Read_Dependencies", "Gantt")
)
)Custom View Selector Buttons
Place these buttons above the Gantt to provide a visual view switcher.
html
<div class="gantt-view-buttons">
<button type="button" class="gantt-view-btn" data-view="day">Day</button>
<button type="button" class="gantt-view-btn" data-view="week">Week</button>
<button type="button" class="gantt-view-btn active" data-view="month">Month</button>
<button type="button" class="gantt-view-btn" data-view="year">Year</button>
</div>Client-Side Event Handling
JavaScript
$(document).on("kendoReady", function () {
$(".gantt-view-btn").on("click", function () {
var gantt = $("#gantt").data("kendoGantt");
var selectedView = $(this).data("view");
$(".gantt-view-btn").removeClass("active");
$(this).addClass("active");
gantt.view(selectedView);
});
});
function onGanttNavigate(e) {
var viewName = e.view;
$(".gantt-view-btn").removeClass("active");
$(".gantt-view-btn[data-view='" + viewName + "']").addClass("active");
}Controller
The controller provides data endpoints for the Gantt tasks and dependencies.
C#
public partial class GanttController : Controller
{
[Demo]
public IActionResult Views()
{
return View();
}
public virtual JsonResult Views_Read_Tasks([DataSourceRequest] DataSourceRequest request)
{
return Json(GetViewsTasks().ToDataSourceResult(request));
}
public virtual JsonResult Views_Read_Dependencies([DataSourceRequest] DataSourceRequest request)
{
return Json(GetViewsDependencies().ToDataSourceResult(request));
}
private IList<TaskViewModel> GetViewsTasks()
{
return new List<TaskViewModel>
{
new TaskViewModel { TaskID = 1, Title = "Project Plan", ParentID = null, OrderId = 0, Start = new DateTime(2024, 7, 14), End = new DateTime(2024, 8, 31), PercentComplete = 0.52m, Summary = true, Expanded = true },
new TaskViewModel { TaskID = 2, Title = "Research Phase", ParentID = 1, OrderId = 0, Start = new DateTime(2024, 7, 14), End = new DateTime(2024, 7, 20), PercentComplete = 1m, Summary = false, Expanded = true },
new TaskViewModel { TaskID = 3, Title = "Design Phase", ParentID = 1, OrderId = 1, Start = new DateTime(2024, 7, 8), End = new DateTime(2024, 7, 19), PercentComplete = 1m, Summary = false, Expanded = true },
new TaskViewModel { TaskID = 4, Title = "Development", ParentID = 1, OrderId = 2, Start = new DateTime(2024, 7, 18), End = new DateTime(2024, 8, 16), PercentComplete = 0.6m, Summary = true, Expanded = true },
new TaskViewModel { TaskID = 5, Title = "Backend Development", ParentID = 4, OrderId = 0, Start = new DateTime(2024, 7, 18), End = new DateTime(2024, 8, 2), PercentComplete = 0.75m, Summary = false, Expanded = true },
new TaskViewModel { TaskID = 6, Title = "Frontend Development", ParentID = 4, OrderId = 1, Start = new DateTime(2024, 7, 29), End = new DateTime(2024, 8, 16), PercentComplete = 0.45m, Summary = false, Expanded = true },
new TaskViewModel { TaskID = 7, Title = "Testing & QA", ParentID = 1, OrderId = 3, Start = new DateTime(2024, 8, 7), End = new DateTime(2024, 8, 17), PercentComplete = 0.2m, Summary = false, Expanded = true },
new TaskViewModel { TaskID = 8, Title = "Deployment & Launch", ParentID = 1, OrderId = 4, Start = new DateTime(2024, 8, 16), End = new DateTime(2024, 8, 24), PercentComplete = 0m, Summary = false, Expanded = true }
};
}
private IList<DependencyViewModel> GetViewsDependencies()
{
return new List<DependencyViewModel>
{
new DependencyViewModel { DependencyID = 1, PredecessorID = 2, SuccessorID = 3, Type = DependencyType.FinishStart },
new DependencyViewModel { DependencyID = 2, PredecessorID = 3, SuccessorID = 4, Type = DependencyType.FinishStart },
new DependencyViewModel { DependencyID = 3, PredecessorID = 5, SuccessorID = 6, Type = DependencyType.FinishFinish },
new DependencyViewModel { DependencyID = 4, PredecessorID = 6, SuccessorID = 7, Type = DependencyType.FinishStart },
new DependencyViewModel { DependencyID = 5, PredecessorID = 7, SuccessorID = 8, Type = DependencyType.FinishStart }
};
}
}For a runnable example, refer to the Gantt Views demo.