Highlight the hovered row in Gantt

Environment

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

Description

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

Solution

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:

   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.Group(g =>
              {
                  g.Bound(c => c.Start).Width(100).Editable(true).Sortable(true);
                  g.Bound(c => c.End).Width(100).Editable(true).Sortable(true);
              }).Title("Timings");
          })
          .Views(views =>
          {
              views.DayView();
              views.WeekView(weekView => weekView.Selected(true));
              views.MonthView();
          })
          .Height(700)
          .ShowWorkHours(false)
          .ShowWorkDays(false)
          .Snap(false)
          .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")
          )
      )

   JavaScript

     $(document).ready(function(){
           var gantt = $("#gantt").data("kendoGantt");
           gantt.wrapper.on("mouseenter", "[role='gridcell']", function(e) {       
            
             $('.custom').removeClass('custom')
             var index = $(e.target).parent().index();
             $($(e.target)[0].parentElement).addClass('custom');
             $('.k-gantt-tasks tr').eq(index).addClass('custom');
           })
     })

   CSS

     <style>
       .custom{
         background-color: yellow !important
       }
     </style>

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

• REPL example on coloring the hovered row in Gantt

• Dojo example on coloring the hovered row in Gantt.

More ASP.NET MVC Gantt Resources

• ASP.NET MVC Gantt Documentation

• ASP.NET MVC Gantt Server API

• ASP.NET MVC Gantt Demos

• ASP.NET MVC Gantt Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET MVC Forums

See Also

• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base