How to show and hide Detail Row in Kendo Grid with Angular 2

Question

I have an angular 2 kendo grid component that looks like this

<kendo-grid [data]="gridView"
        [selectable]="true"
        [pageSize]="pageSize"
        [skip]="skip"
        [pageable]="true"
        [sortable]="{ mode: 'multiple' }"
        [sort]="sort"
        (pageChange)="pageChange($event)">
<kendo-grid-column Title="Select">
    <template kendoCellTemplate let-dataItem>
        <input type="checkbox" (change)="onContactsSelect(dataItem.accountId, $event)"/>            
    </template>        
</kendo-grid-column>

<kendo-grid-column field="accountId" title="{{result.accountColumn}}" ></kendo-grid-column>
<kendo-grid-column field="name" title="{{result.nameColumn}}"></kendo-grid-column>
<kendo-grid-column field="address" title="{{result.addesssColumn}}"></kendo-grid-column>
<kendo-grid-column field="state" title="{{result.statusColumn}}"></kendo-grid-column>
<kendo-grid-column field="customField1" title="{{result.customField1Column}}"></kendo-grid-column>
<kendo-grid-column field="customField2" title="{{result.customField2Column}}"></kendo-grid-column>
<kendo-grid-column field="timeStamp" title="{{result.timeStampColumn}}"></kendo-grid-column>   
<template kendoDetailTemplate let-dataItem>
        <section *ngIf="!dataItem.isValid">
            <article>{{dataItem.errorMessage}}</article>
        </section>
</template>

I do want to show the detail row (and the details k-plus and k-minus signs to toggle between open and closing the detailed row) only when there is an error message or only when the dataitem is invalid.

Right now the toggle buttons appear on all rows regardless of the dataitem is valid or not.

Any pointers would be helpful.

16Paws 16Paws · Accepted Answer · 2017-02-20T18:58:09

I know this is a slightly older thread, but I did manage to come up with the solution for how to do this:

First get rid of

<section *ngIf="!dataItem.isValid>
    ...
</section>

You want:

<template kendoDetailTemplate let-dataItem>
          [kendoGridDetailTemplateShowIf]="condition"
        ...whatever you want to show based on the condition...
</template>

The condition that is next to kendoGridDetailTemplateShowIf above is a function on the typescript file with the same name, it will take whatever the dataitem is as a parameter (note that you do not write it is a function with the parameter in HTML). The function in the TS file, should return a boolean where true will display the expand button and false will not and therefore either show or not show the detail template.

So in the typescript file:

condition(dataItem: any) : boolean {
    return !dataItem.isValid;
}

Hope this helps.

As a side note (not relevant to the answer, but a personal complaint so feel free to skip) this just one more example where Telerik is horrible at documentation and even though you can figure it out with the help of sites like this, development with their frameworks can be painful.

How to show and hide Detail Row in Kendo Grid with Angular 2

1 Answers