2016-12-28 7 views
1

У меня есть некоторые странные графические проблемы, прокручивающие сетку при открытии некоторых деталей. Шаблон:KendoGrid: странная прокрутка, когда деталь деталь открыт

<kendo-grid 
      [data]="gridView" 
      [skip]="skip" 
      [pageSize]="pageSize" 
      [scrollable]="'virtual'" 
      [rowHeight]="41" 
      [height]="700" 
      [detailRowHeight]="414" 
      (pageChange)="pageChange($event)" 
     > 
     <template kendoDetailTemplate let-dataItem> 
      <customKendoChart [chartTitle]="'A chart about '+dataItem.firstName" 
           [pollingTime]="1000" 
           [dataLength]="20"></customKendoChart> 
     </template> 
     <kendo-grid-column field="id" [width]="40" title="ID"></kendo-grid-column> 
     <kendo-grid-column field="firstName" title="First Name" [width]="120"></kendo-grid-column> 
     <kendo-grid-column field="lastName" title="Last Name" [width]="120"></kendo-grid-column> 
     <kendo-grid-column field="city" title="City" [width]="120"></kendo-grid-column> 
     <kendo-grid-column field="title" title="Title" [width]="120"></kendo-grid-column> 
     </kendo-grid> 

Компонент:

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) => ({ 
       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)] 
      }) 
     ); 
    } 
} 

Похоже, каждый раз, когда я прокрутки вверх или вниз, есть это странное обновление, в котором я вижу на секунду старая деталь деталь открылась, замененный право после с новыми деталями. Разве это по дизайну? http://plnkr.co/edit/83IijeVTardvh4lDnmOC?p=preview

ответ

2

Действительно previous содержание становится видимым при прокрутке. Это происходит из-за того, что позиция прокрутки таблицы сбрасывается, но контент показывается. Возможно, мы можем улучшить опыт, показывая какую-либо панель загрузки во время прокрутки. Как вы думаете?

Я зарегистрировал этот сценарий в kendo-angular2 репо. Вы можете прокомментировать там, если хотите.

+0

Может быть хорошей идеей;) Спасибо за открытие проблемы. – Dyd666

+0

loading панель будет большой. Лучше plnkr (imo) здесь, я разблокировал plnkr из официального документа и добавил таймаут, чтобы имитировать медленный веб-сервис: http://plnkr.co/edit/KXRFimr9oSLwCLng7K3i?p=preview –

 Смежные вопросы

  • Нет связанных вопросов^_^