title: Kendo Grid scroll to selected row
body: <p>I want to be able to call a function that scrolls the Kendo grid to the selected row.  I´ve already tried some methods but none of them worked, </p>
  
  <p><strong>for instance I tried this:</strong></p>
  
  <pre><code>var grid = $("#Grid").data("kendoGrid"),
      content = $(".k-grid-content");
  content.scrollTop(grid.select());
  </code></pre>
  
  <p><strong>I´ve also tried this:</strong></p>
  
  <pre><code>var gr = $("#Grid").data("kendoGrid");
  var dataItem = gr.dataSource.view()[gr.select().closest("tr").index()];
  var material = dataItem.id;
  var row = grid.tbody.find("&gt;tr:not(.k-grouping-row)").filter(function (i) {
      return (this.dataset.id == material);
  });
  content.scrollTop(row);
  </code></pre>
  
  <p>Can anyone point me in the right direction please?  :)</p>
  
  <p><strong>--- EDITED ---</strong></p>
  
  <p>For other reasons I can not bind to the change event so I have to be able to call a function the scrolls the list to the selected row.  This is what I tried with the answer @Antonis provided for me.</p>
  
  <pre><code>var grid = $("#Grid").data("kendoGrid")
  grid.element.find(".k-grid-content").animate({  
      scrollTop: this.select().offset().top  
   }, 400);
  </code></pre>
  
  <p>When I tried this it scrolled somewhat down the list but not to the selected row.  Am I use the grid object in a wrong way by calling scrollTop on it?</p>
  
  <p><strong>This too:</strong></p>
  
  <pre><code>var grid = $("#ItemGrid").data("kendoGrid");
  grid.scrollToSelectedRow = function () {
      var selectedRow = this.select();
      if (!selectedRow) {    
          return false;    
      }
      this.element.find(".k-grid-content").animate({
          scrollTop: selectedRow.offset().top  
      }, 400);
      return true;
      };
  
  grid.scrollToSelectedRow();
  </code></pre>