Grid DetailRow only if property exists

[jvanderbiest]

I would like to only show a detail template if a specific property (Category) exists. Currently it renders an expand icon if there is no detail template content. The problem is that I cannot use an *ngIf directive on the template element itself as I don't have access to the property.

Plunker: http://plnkr.co/edit/CKERCaoU4PEAi7Qya9VT?p=preview

Original stackoverflow question: http://stackoverflow.com/questions/40883426/grid-detailrow-only-if-property-exists/

[rusev]

We can introduce condition to the kendoDetailTemplate directive where based on dataItem and rowIndex (master row index) you can build your conditional logic. Here is how detail template definition might look in the consumer component:

     <div *kendoDetailTemplate="let dataItem, let rowIndex = rowIndex; condition: myCondition">
        <category-details [category]="dataItem"></category-details>
    </div>

with <template> element:

    <template kendoDetailTemplate let-dataItem let-rowIndex="rowIndex"
      [kendoDetailTemplateCondition]="myCondition">
        <category-details [category]="dataItem"></category-details>
    </template>

and here is how myCondition function looks like:

  myCondition(dataItem: any, rowIndex: number) { return dataItem.CategoryID % 2 == 0; }

However there is an open question - what do you expect to see in the expand/collapse column when there isn't detail template for that master row?

Here is a how all this might look with expand/collapse icon removed if myCondition function returns false:

[jvanderbiest]

@rusev If there isn't a detail row, there should be no expand icon. Looks good in your screenshot and +1 for the condition approach!

[rusev]

@jvanderbiest I'm logging this for implementation. We will update this issue once the Grid package is released with this functionality.

[bhoopaljanga]

can we show/hide this based on input, the condition works with only the current dataItem we want to enable with a flag across the app