title: Kendo.UI Grid Change row color on hover
body: <p>I have a Kendo Grid declared inside of a Kendo Splitter like this in my partial view.</p>
  
  <pre><code>@(Html.Kendo().Splitter()
    .Name("adminSplitter")
    .Orientation(SplitterOrientation.Horizontal)
  
    .Panes(p =&gt;
               {
                   p.Add()
                      .HtmlAttributes(new
                                              {
                                                  id = "adminLeftHandPane"
                                              })
                      .Resizable(false)
                      .Size("150px")
                      .Content(@&lt;text&gt;
                                  @(Html.Kendo().Grid&lt;AdministrativeTask&gt;()
                                      .Name("grdAdminTasks")
                                      .ClientRowTemplate("&lt;tr class=\"gridRow\"&gt;&lt;td style=\"cursor:pointer\"&gt;&lt;img src=\"#=ImageUrl#\" style=\"height: 16px; width: 16px;\" /&gt;&amp;nbsp;#=Title#&lt;/td&gt;&lt;/tr&gt;")
  
                                      .Columns(c =&gt; c.Bound(i =&gt; i.Action)
                                                     .Title("Administrative Tasks"))
                                      .Selectable(s =&gt; s.Mode(GridSelectionMode.Single))
                                      .DataSource(ds =&gt; ds.Ajax().Read("LoadAdministrativeTasks", "Admin").ServerOperation(false))
                                      .Events(e =&gt; e.Change("change"))
                                  )
                              &lt;/text&gt;);
                   p.Add()
  
                      .HtmlAttributes(new
                                              {
                                                  id = "adminRightHandPane"
                                              })
                      .Content(@&lt;text&gt;
                                    &lt;div id="adminRightHandPaneContent"&gt;&lt;/div&gt;
                                &lt;/text&gt;)
                                              ;
               }
    )
  
    )
  </code></pre>
  
  <p>and in this same partial view my script looks like this</p>
  
  <pre><code>&lt;script&gt;
  function change() {
      var row = this.select();
      var item = this.dataItem(row);
  
      $.ajax({
          url: '/' + item.Controller + '/' + item.Action,
          contentType: 'application/html; charset=utf-8',
          type: 'GET',
          dataType: 'html',
          cache: false,
      })
                  .success(function (result) {
                      // Display the section contents.
                      $('#adminRightHandPaneContent').html(result);
                  })
                  .error(function (xhr) {
                      $('#adminRightHandPaneContent').html("ERROR: &lt;br&gt;&lt;br&gt;" + xhr.responseText);
                      //alert(xhr.responseText);
                  });
  
  }
  
  
  $(document).ready(function () {
      alert($('.gridRow'));
      $(".gridRow").hover(
  
     function () {
         alert("hit");
         $(this).addClass("highlightRow");
     },
          function() {
              $(this).removeClass("highlightRow");
          }
  
   );
  });
  </code></pre>
  
  <p></p>
  
  <p>When the partial view loads I get the alert "[object Object]" which tells me that Jquery found the row. However, when I hover over the row in question I do not get the "hit" alert message so at this point I am at a loss on how to proceed.</p>
  
  <p>I am trying to get the row highlighted when the user hovers over the row. What am I doing wrong?</p>