Hover - C1 ASP.NET MVC

// This file locates: "Scripts/Lesson/C1FlexGrid/RowsStylingHover.js".
c1.documentReady(function () {
    var hoverCell = wijmo.Control.getControl('#hoverCell');
    var hoverRow = wijmo.Control.getControl('#hoverRow');
});

// This file locates: "Content/css/Lesson/C1FlexGrid/RowsStylingHover.css".
.wj-flexgrid {
  height: 150px; 
}
 
/* css for hovering on non-header cells */
#hoverCell .wj-cells .wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected):hover {
  background-color:rgb(200,255,200);
  transition: all 0.5s;
}
 
/* css for hovering on non-header rows */
#hoverRow .wj-cells .wj-row:hover .wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) {
  transition: all 0.5s;
  background: rgb(200,255,200);
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: RowsStylingHover
        public ActionResult RowsStylingHover()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.RowsStylingHover_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsStylingHover_Text1)
</p>
 
@Html.C1().CollectionViewService().Id("collectionView").Bind(Model)
 
<h2>
    @Html.Raw(Resources.C1FlexGrid.RowsStylingHover_Title1)
</h2>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsStylingHover_Text2)
</p>
@Html.C1().FlexGrid().Id("hoverCell").ItemsSourceId("collectionView")
 
<h2>
    @Html.Raw(Resources.C1FlexGrid.RowsStylingHover_Title2)
</h2>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsStylingHover_Text3)
</p>
@Html.C1().FlexGrid().Id("hoverRow").ItemsSourceId("collectionView")

Hover Styles

Hover on Cells

Hover on Rows