title: KendoGrid: weird scrolling while detail item is open
body: <p>I have some weirds graphical issues scrolling the grid while having some detail items open.
  Template:</p>
  
  <pre><code>&lt;kendo-grid
            [data]="gridView"
            [skip]="skip"
            [pageSize]="pageSize"
            [scrollable]="'virtual'"
            [rowHeight]="41"
            [height]="700"
            [detailRowHeight]="414"
            (pageChange)="pageChange($event)"
          &gt;
          &lt;template kendoDetailTemplate let-dataItem&gt;
              &lt;customKendoChart [chartTitle]="'A chart about '+dataItem.firstName"
                                [pollingTime]="1000"
                                [dataLength]="20"&gt;&lt;/customKendoChart&gt;
          &lt;/template&gt;
          &lt;kendo-grid-column field="id" [width]="40" title="ID"&gt;&lt;/kendo-grid-column&gt;
          &lt;kendo-grid-column field="firstName" title="First Name" [width]="120"&gt;&lt;/kendo-grid-column&gt;
          &lt;kendo-grid-column field="lastName" title="Last Name" [width]="120"&gt;&lt;/kendo-grid-column&gt;
          &lt;kendo-grid-column field="city" title="City" [width]="120"&gt;&lt;/kendo-grid-column&gt;
          &lt;kendo-grid-column field="title" title="Title" [width]="120"&gt;&lt;/kendo-grid-column&gt;
        &lt;/kendo-grid&gt;
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>export class KendoGridComponent {
      private gridView: GridDataResult;
      private gridData: any[];
      private skip: number = 0;
      private pageSize: number = 30;
  
      constructor() {
          this.gridData = this.createRandomData(800000);
          this.loadGridItems();
      }
  
      private loadGridItems() {
          this.gridView = {
              data: this.gridData.slice(this.skip, this.skip + this.pageSize),
              total: this.gridData.length
          }
      }
  
      protected pageChange(event: PageChangeEvent): void {
          this.skip = event.skip;
          this.loadGridItems();
      }
  
      private createRandomData(count: number) {
          const firstNames = ["Riccardo", "Diego","Cristiano", "Gilberto", "Marco", "Angelo"],
              lastNames = ["Brazorf", "Fanfoni", "Pravettoni", "Maramotti"],
              cities = ["Ancona", "Topolinia", "Firenze", "Roma", "Jesi"],
              titles = ["Engineer", "Manager", "CEO", "Esterno"];
  
          return Array(count).fill({}).map((_, idx) =&gt; ({
                  id: idx + 1,
                  firstName: firstNames[Math.floor(Math.random() * firstNames.length)],
                  lastName: lastNames[Math.floor(Math.random() * lastNames.length)],
                  city: cities[Math.floor(Math.random() * cities.length)],
                  title: titles[Math.floor(Math.random() * titles.length)]
              })
          );
      }
  }
  </code></pre>
  
  <p>It looks like, whenever i scroll up or down, there's this weird refresh, in which i see for a sec the old detail item opened, replaced right after with the new items.
  Is it like that by design?
  <a href="http://plnkr.co/edit/83IijeVTardvh4lDnmOC?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/83IijeVTardvh4lDnmOC?p=preview</a></p>