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

Change the color of the currently hovered cell's row and colum


Sometimes one might want to highlight the row and column of the currently hovered Grid cell.

"Example row and column highlight"


Create the custom hovered CSS class.

    .hovered td {
        background-color: #C7C7C7;

Add the class to the currently hovered cell's row and column with the mouseover event.

    $(document).on('mouseover', '.RadGrid .rgMasterTable > tbody > tr > td', function (e) {
        var targetCell =;
        var cellIndex = targetCell.cellIndex;


        $('tbody').find('> tr').each(function () {
            var targetCell = this.cells[cellIndex];

    }).on('mouseout', '.RadGrid .rgMasterTable > tbody > tr > td', function (e) {
        $(this).closest('tbody').find('td.hovered, tr.hovered').removeClass('hovered');
In this article