검도 디테일 그리드에서 자동으로 변경 이벤트 트리거

Question

나는 telerik demo과 유사한 각도의 검도 그리드를 가지고 있습니다.

홈페이지 그리드 :

$scope.mainGridOptions = { 
     dataSource: { 
      transport: { 
       read: queryurl 
      }, 
      pageSize: 5, 
     }, 
     sortable: true, 
     pageable: true, 
     detailTemplate: kendo.template($("#template").html()), 
     dataBound: function() { 
      this.expandRow(this.tbody.find("tr.k-master-row").first());   
     } 
    } 

상세 그리드 :

사용자가 문서가 JQuery와 대화 상자에서 렌더링되는 세부 그리드에서 행을 클릭

$scope.detailGridOptions = function (item) { 
     return { 
      dataSource: { 
       transport: { 
        read: detailsUrl 
       }, 
      }, 
      change: $scope.showDocument, 
      selectable: "row", 
      dataBound: function (e) { 
       var row = e.sender.tbody.find("tr:first"); 
       row.addClass("k-state-selected"); 
       row.trigger("change") //doesnt work! 
      } 
     } 
    } 

. 이것은 모두 예상대로 작동합니다. 그리드가로드되면 첫 번째 마스터 행이 확장됩니다. 이제 앱이로드 될 때 첫 번째 항목의 첫 번째 문서가 자동으로 표시되도록 자동으로 실행되는 detailsgrid의 첫 번째 행에 대한 change 이벤트가 필요합니다.

첫 번째 상세 정보를 강조 표시 할 수있어서 다음과 같은 변경 이벤트가 발생할 수 있다고 생각했습니다.

row.trigger("change")

하지만 작동하지 않는 것 같습니다.

모든 아이디어를 높이 평가합니다!

Answer 1

수동으로 "k-state-selected" 클래스를 추가하는 대신 표의 select 방법을 사용하여 행을 선택해보십시오. 그러면 자동으로 change 이벤트가 트리거됩니다. JsBin example.

(function() { 
    'use strict'; 
    var grid = $('#grid').kendoGrid({ 
    dataSource: [ 
     { name: 'Brett', age: 37 }, 
     { name: 'Susan', age: 38 } 
    ], 
    selectable: 'row', 
    change: function (e) { 
     console.log('change triggered'); 
    }, 
    dataBound: function (e) { 
     var row = this.tbody.find('tr:first'); 
     this.select(row); 
    } 
    }).data('kendoGrid'); 
})();