在Angular 2 Kendo網格中替代detailinit事件

在Angular 2 Kendo網格中，當用戶打開詳細模板時，我需要在每個單元格中顯示其他信息。在Kendo Grid for jQuery中，我可以使用detailinit（http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-detailInit）事件來完成我所需要的事情，但是，Angular2組件中沒有這樣的事件。在Angular 2 Kendo網格中替代detailinit事件

<kendo-grid-column> 
     <template kendoCellTemplate let-dataItem let-rowIndex="rowIndex"> 
      {{rowIndex}} 
      <div *ngIf="????"> 
       Need to show this text when detail template is visible 
       and hide when it's hidden 
      </div> 
     </template> 
    </kendo-grid-column> 
    <template kendoDetailTemplate let-dataItem> 
     <section *ngIf="dataItem.Category"> 
     <header>{{dataItem.Category?.CategoryName}}</header> 
     <article>{{dataItem.Category?.Description}}</article> 
     </section> 
    </template>

Here is an example我需要什麼（請在單元格中的文本）。

來源

2016-12-30 Pavel Kavalenka

歡迎來到Stack Overflow！要求我們推薦或查找書籍，工具，軟件庫，教程或其他非現場資源的問題與Stack Overflow無關，因爲它們傾向於吸引自以爲是的答案和垃圾郵件。相反，[描述問題]（http://meta.stackoverflow.com/questions/254393）以及迄今爲止已經做了什麼來解決它。 –

@JoeC這個問題不是關於建議，而是關於如何使用Kendo UI的Angular 2 –

此時，Angular 2網格不提供詳細模板是否展開的信息。請隨時致電suggest this as a feature request。

HACK：破解解決此限制，可以從HTML推斷擴張狀態。

請參閱this plunkr。

private icons(): any[] { 
    const selector = ".k-master-row > .k-hierarchy-cell > .k-icon"; 
    const icons = this.element.nativeElement.querySelectorAll(selector); 

    return Array.from(icons); 
} 

private saveStates(): void { 
    this.states = this.icons().map(
    (icon) => icon.classList.contains("k-minus") 
); 
} 

private isExpanded(index): bool { 
    return this.states[index] || false; 
}

儘管這樣做有效，但它遠非理想，並且違背了Angular哲學，並可能在渲染更改時斷裂。

來源

2017-01-02 09:38:26

Alex的網格組件獲得特定結果，感謝您的回答。我剛剛創建了自己的展開式行功能實施並提交了功能請求。現在我將等待kendo發佈詳細模板事件實現，以重構我的代碼並使用本地kendo功能。 –

功能請求[鏈接]（http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-2-feedback/suggestions/17602957-detail-row-events-in-grid） –

在Angular 2 Kendo網格中替代detailinit事件

回答

相關問題