[Solved] I would like to change the color of the row in a telerik grid when I mouse over the row.

[Mahendran]

Hi There,

I am new to Telerik. I developed a telerik grid which has a few rows.. when I mouseover any of the rows in the grid, i see the row color changes to white. I am supposed to highlight that row with color of the text in black. Could you please tell where exactly I need to look in to make this change.

@(Html.Telerik().Grid(Model).Name("Browse").DataKeys(keys => keys.Add(m => m.abc))
                                .Columns(columns =>
                                    {

                                        columns.Bound(m => m.abc)
                                            .Title("abc #");
                                        columns.Bound(m => m.de).Title("de");
                                        columns.Bound(m => m.fg).Title("fg");
                                        columns.Bound(m => m.h).Title("h");
                                        columns.Bound(m => m.Comments).Title("Comments");
                                    }).Sortable().Selectable().ClientEvents(events => events.OnRowSelected("onRowSelected"))
                                    .Filterable()
                                    .Pageable(pag => pag.PageSize(50, new int[] { 10, 20, 50, 100 }).Style(GridPagerStyles.NextPreviousAndDropDown))
 )

[Dadv]

/*In the CSS : */
.hoverBackground 
{
    background-color: #FFCCCC;
    color : Black;
}

<!--In the Code :-->
<script type="text/javascript">
    function onHoverRow(r) {
        $(r.row).hover(
  function () {
      $(this).addClass("hoverBackground");
  },
  function () {
      $(this).removeClass("hoverBackground");
  }
);


@(Html.Telerik().Grid(Model).Name("Browse").DataKeys(keys => keys.Add(m => m.abc))

                                .Columns(columns =>

                                    {

   

                                        columns.Bound(m => m.abc)

                                            .Title("abc #");

                                        columns.Bound(m => m.de).Title("de");

                                        columns.Bound(m => m.fg).Title("fg");

                                        columns.Bound(m => m.h).Title("h");

                                        columns.Bound(m => m.Comments).Title("Comments");

                                    }).Sortable().Selectable().ClientEvents(events => events.OnRowSelected("onRowSelected"))

                                    .Filterable()

 

        .ClientEvents(a => a.OnRowDataBound("onHoverRow"))

 

                                    .Pageable(pag => pag.PageSize(50, new int[] { 10, 20, 50, 100 }).Style(GridPagerStyles.NextPreviousAndDropDown))

 )





[Jon]

How would I go about accomplishing the same exact scenario in Kendo UI grid?  There is not a ClientEvents property or method for that grid?