가상화를 사용하는 경우 검도 그리드에서 행 선택

Question

데이터 세트를 표시하기 위해 kendoUI 그리드 위젯을 사용하고 있습니다. 데이터 세트의 크기가 상당히 크기 때문에 (200-400k) 성능과 유용성을 향상시키기 위해 가상화 기능을 사용하고 있습니다. 그리드를 설정할 때 다음과 같은 문제에 직면했습니다. 가상화가 활성화되어 있기 때문에 페이지가 변경 될 때마다 그리드 DOM 객체 (여기서 테이블 행을 의미 함)가 새로 고쳐집니다. 그리드를 구현하면 다음과 같은 동작이 발생합니다. 행을 선택할 수는 있지만 다음 페이지로 스크롤 한 다음 뒤로 선택을 스크롤하면 사라집니다. 이 문제를 재현 할 수있는 예는 다음과 같습니다. http://trykendoui.telerik.com/OkOg

누군가 비슷한 문제가있을 수 있으며 몇 가지 해결 방법을 제시 할 수 있습니다.

Answer 1

그리드의 dataBound 이벤트에서 선택 사항을 복원 할 수 있습니다. 이 옵션은 단일 행 선택에만 적용되므로 다른 모드에 적응해야 할 수도 있습니다. 따라서

$("#grid").kendoGrid({ 
    dataSource: dataSource, 
    change: function() { 
     this._lastSelectedItem = this.dataItem(this.select()); 
    }, 
    dataBound: function() { 
     var row; 
     if (this._lastSelectedItem) { 
      row = $(this.tbody).find("tr[data-uid='" + this._lastSelectedItem.uid + "']") 
      if ($(row).length > 0) { 
       // or this.select(row); if you don't mind the 
       // change event getting triggered again 
       $(row).addClass("k-state-selected");  
      } 
     } 
    }, 
    height: 430, 
    scrollable: { 
     virtual: true 
    }, 
    selectable: true, 
    columns: columns 
});