New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Highlight the hovered row in Gantt


Product Version 2023.2.829
Product Gantt for Progress® Telerik® UI for ASP.NET MVC


How can I change the color of the hovered row in the Telerik UI for UI for ASP.NET MVC Gantt ?


The example below relies on the following key steps:

  1. Handle the "mouseenter" Event of a cell in the Grid.
  2. Remove previously assigned "custom" class.
  3. Get the index of the hovered row.
  4. Add the "custom" class to the current target.
  5. Add the "custom" class to the corresponding row(using the index from step 3) in the right calendar part of the Gantt.
  6. Add color to the "custom" class.
  7. Here is an example of the code:

       @using Kendo.Mvc.Examples.Models.Gantt;
       @(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
           .Columns(columns =>
               columns.Bound(c => c.TaskID).Title("ID").Width(50);
               columns.Bound(c => c.Title).Editable(true).Sortable(true);
               columns.Group(g =>
                   g.Bound(c => c.Start).Width(100).Editable(true).Sortable(true);
                   g.Bound(c => c.End).Width(100).Editable(true).Sortable(true);
           .Views(views =>
               views.WeekView(weekView => weekView.Selected(true));
           .DataSource(d => d
               .Model(m =>
                   m.Id(f => f.TaskID);
                   m.ParentId(f => f.ParentID);
                   m.Field(f => f.Expanded).DefaultValue(true);
               .Read("Basic_Usage_ReadTasks", "Gantt")
               .Destroy("Basic_Usage_DestroyTask", "Gantt")
               .Update(update => update.Action("Basic_Usage_UpdateTask", "Gantt").Data("onUpdateCreate"))
               .Create(create => create.Action("Basic_Usage_CreateTask", "Gantt").Data("onUpdateCreate"))
           .DependenciesDataSource(d => d
               .Model(m =>
                   m.Id(f => f.DependencyID);
                   m.PredecessorId(f => f.PredecessorID);
                   m.SuccessorId(f => f.SuccessorID);
               .Read("Basic_Usage_ReadDependencies", "Gantt")
               .Create("Basic_Usage_CreateDependency", "Gantt")
               .Destroy("Basic_Usage_DestroyDependency", "Gantt")
            var gantt = $("#gantt").data("kendoGantt");
            gantt.wrapper.on("mouseenter", "[role='gridcell']", function(e) {       
              var index = $(;
              $('.k-gantt-tasks tr').eq(index).addClass('custom');
          background-color: yellow !important

For a runnable example based on the code above, refer to the:

More ASP.NET MVC Gantt Resources

See Also

In this article