Alternative to detailinit event in Angular 2 Kendo grid

Question

In the Angular 2 Kendo grid, I need to show additional info in each cell when the user opens the detail template. In the Kendo Grid for jQuery I could use the detailinit (http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-detailInit) event to accomplish what I need, however, there is no such event in the Angular2 component.

    <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 what I need (please see the text in the cells).

Answer 1

At this time, the Angular 2 grid does not provide information whether the detail template is expanded or not. Feel free to suggest this as a feature request.

---

HACK: To hack around this limitation, you can infer the expanded state from the HTML.

See 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;
}

While this works, it is far from ideal, and goes against the Angular philosophy, and may break upon rendering changes.