How to conditionally disable grid master-detail expansion on a row-by-row basis

[Bill]

Using the Angular grid with a detail template for master-detail functionality, how can I disable the functionality and hide the plus sign on rows which have no child data to display?  I found a feature request from 2016 here: https://github.com/telerik/kendo-angular/issues/106 , but it does not appear to have been implemented as described given errors I get in the console.

[Hetali]

Hi Bill,

Thank you for reaching out.

We have a dedicated example for Conditional Display in the Master-Detail Grid. In order to hide the detail row and the expand/collapse button when there is no child data to display, use the kendoGridDetailTemplateShowIf property as seen below:

<kendo-grid [data]="data" [selectable]="true">
  <kendo-grid-column field="ProductName"></kendo-grid-column>
  <ng-template
    kendoGridDetailTemplate
    let-dataItem
    [kendoGridDetailTemplateShowIf]="showOnlyContinuedDetails"
  >
    <p>Discontinued: {{ dataItem.Discontinued}}</p>
  </ng-template>
</kendo-grid>

public showOnlyContinuedDetails(dataItem: Product): boolean {
  return !dataItem.Discontinued;
}

Output:

In this StackBlitz example, the detail row and the expand/collapse button are hidden based on the condition. This condition can be modified in a way where it can hide the detail row if no child data is available.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik