2016-11-24 3 views
1

세부 템플릿 기능이있는 격자가 있습니다. 내가 확장 +/-하지 않으려 고 하고이 템플릿을 열 중 하나를 선택하거나 내 눈금에있는 열 중 하나에 링크를 엽니 다.kendoDetailTemplate 프로그래밍 방식으로 열기

이 방법이 있습니까? 검도를 사용하여이 템플릿을 직접 열어 볼 수 있습니까? 이 같은?

<kendo-grid 
    [data]="gridView | async" 
    [skip]="skip" 
    [scrollable]="'virtual'" 
    [selectable]="true" 
    [pageSize]="pageSize" 
    [height]="600" 
    [rowHeight]="36" 
    [detailRowHeight]="36" 
    (pageChange)="pageChange($event)"> 
    <kendo-grid-column field="clientID" title="ID" width="80"> 
     <template kendoCellTemplate let-dataItem> 
      <button class="btn btn-link" (click)="expandDetail()">{{dataItem.clientID}}</button> 
     </template> 
    </kendo-grid-column> 
<template kendoDetailTemplate let-dataItem> 
     My Very interesting details go here ... 
</template> 
</kendo-grid> 

답변

1

현재 그리드 구성 요소는 이러한 API를 지원하지 않습니다. 이것은 구현을 위해 기록되며 can be tracked in this GitHub issue입니다.

+0

gird [link] (http://www.telerik.com/kendo-angular-ui/components/grid/changelog/)의 변경 로그에 조건부로 세부 행 표시 및 확장/축소 기능 지원에 대한 설명이 있습니다 ( ). 버튼 API를 통해 상세 행 확장/축소 사용 방법에 대한 샘플이 있습니까?이 방법으로 문제가 해결됩니까? [1] : http://www.telerik.com/kendo-angular-ui/components/grid/changelog/ – Vish

0

OnDataBoundEvent를 처리하여 프로그램 적으로 모든 행을 확장 할 수 있습니다. 경우

this.expandRow(this.tbody.find("tr.k-master-row")); 

당신은,

this.collapseRow(this.tbody.find("tr.k-master-row")); 

을 사용하시기 바랍니다 다시 축소 할 그리고 당신은 단지 상세 템플릿을 초기화 할 경우, 당신은 확장과 동시에 축소 할 수 있습니다.

+0

이 문제는 jQuery 제품군의 검도 UI에 해당됩니다. 질문은 jQuery를 기반으로하지 않는 Angular suite 용 Kendo UI입니다. –

+0

그래, 아직 각도를 시도하고 있습니다. – Agni

0

이 할 수있는 (지금은 - 그것이 가능 - 단 몇 일 동안 검도 각 그리드와 협력하고 얼마나 오래 확실하지?) jQuery를 사용하여 주어진 첫 번째 대답으로 비슷한 방법으로 progromatically 수행 할 수 :

// using cell click event in template 
cellClickHandler({ sender, rowIndex, columnIndex, dataItem, column }) { 

    sender.collapseRow(rowIndex); // close 

    // OR 

    sender.expandRow(rowIndex); // open 
}