Filter on Composite column?

[Tim]

I have a grid with a custom column:

<kendo-grid-column field="Category" title="Category" width="200">
      <ng-template kendoGridCellTemplate let-dataItem>
        {{ dataItem.Category.CategoryName }}
      </ng-template>
</kendo-grid-column>

When using the default filtering, I get a type error ((a || "").indexOf is not a function).  I am assuming it is due to trying to filter on the Category object and not the Category.CategoryName string value.

How can I setup a kendoGridFilterMenuTemplate template so that it will just filter on the string value that ends up in the column?  Do I have to have a custom filter?

Thanks,

Tim

[Dimitar]

Hello Tim,

The requested functionality could indeed be implemented with a custom filter, however, there's a much simpler solution out-of-the-box. The Grid supports setting nested fields as column source. Instead of using a template to extract the CategoryName value from the Category field, you can directly specify as field Category.CategoryName. Refer to this example.

Let me know if further assistance on the topic is required.

Regards,
Dimitar
Progress Telerik

[Tim]

Thanks Dimitar,

What if the field ends up being a concatenation of a couple of properties in the object.  Using your example, what if the column was something like below, where both the CategoryName and Description are displayed in the column, and we want to filter on anything in either field (CategoryName or Description).  Basically, allow filtering on anything that is displayed in the column.

<kendo-grid-column field="Category" title="Category" width="200">
      <ng-template kendoGridCellTemplate let-dataItem>
        {{ dataItem.Category.CategoryName }} ({{ dataItem.Category.Description }})
      </ng-template>
</kendo-grid-column>

 

Thanks,

Tim

 

[Dimitar]

Hello Tim,

Filtering of the column template content is not possible out-of-the-box. You can put there strings, images, links, etc. and naturally the Grid doesn't know how to process content of unknown form. 

You can create a custom filter for such scenarios that looks up multiple fields. Here's a simplified example of what I have in mind. The custom filter can be extracted into a standalone component and the fields that it looks-up can be passed to it as an input prop, so that you can reuse the filter.

Make sure to write back, if further information is needed.

Regards,
Dimitar
Progress Telerik

[Tim]

Perfect.  I think this is exactly what I was trying to achieve.

Thanks,

Tim