替代 Angular 2 Kendo 网格中的 detailinit 事件

Question

在 Angular 2 Kendo 网格中，当用户打开详细信息模板时，我需要在每个单元格中显示附加信息。在 jQuery 的 Kendo 网格中，我可以使用 detailinit (http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-detailInit) 事件来完成我需要的，但是，在 Angular2 组件中没有这样的事件。

    <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 我需要什么（请查看单元格中的文字）。

Answer 1

此时Angular2格不提供详情模板是否展开的信息。随意 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 理念，并且可能会因渲染更改而中断。

替代 Angular 2 Kendo 网格中的 detailinit 事件

Alternative to detailinit event in Angular 2 Kendo grid

kendo-ui-angular2