Grid - Custom filtering function for a particular column

[George]

Hi,

Currently we are using Angular 7. We have a standard kendo-grid with sorting, filtering and so on. We use "translate" pipe for the shown text of one of the columns.

<kendo-grid-column [field]="Type" [title]="{{'Document Type' | translate}}" [filterable]="true">
     <ng-template kendoGridCellTemplate let-row="row">
         {{row.Type | translate}}
     </ng-template>
 </kendo-grid-column>

The issue is that when "German" language is selected, the filter doesn't work properly.

Example: The original value (not translated) is "Contract" and the translated one is "Vertrag". I would like to filter that column by ""Vertrag"" and see all results which contains that value. The result is empty, because it filters by the original value (Contract). I know that I can create a custom filter component, but I want to use out-of-the-box functionalities for filtering (contains, does not contain, is equal to etc.) and just change the filter function. Is that possible?

[Svet]

Hi George,

Thank you for the provided sample code.

The built-in data operations of the Grid (sorting, filtering, etc) are based on the value passed to the field property of the Column component. If the title is changed, but the field remains the same, the sorting and filtering for the particular column will remain unchanged. Just the column title will be changed.

I also see that a kendoGridCellTemplate is used to show the translated content of each cell for the demonstrated column. Despite that the column is still bound to the value of the Type component property and the data operations would depend on it. (If there wasn't such template then the default value of the underlying item property corresponding to the column field would be used). In order to perform the filtering based on the translated German content of the cells, then there should be a property that holds the Type information for each data item within another property in German. Such property could be "Vertrag". If it exists, for each data item, then passing "Vertrag" to the column field will make sure that the data operations for this column will be based on its content:

<kendo-grid-column [field]="'Vertrag'" [title]="{{'Document Type' | translate}}" [filterable]="true">
 </kendo-grid-column>

Please let me know in case there is something unclear or if any additional details or further assistance is required for this case. Thank you.

Regards,
Svetlin
Progress Telerik

[George]

Hi, Svetlin,

Thank you for your response. As far as I can understand you, the idea is to have it translated before assigning it to the field? Is there any other chance to use custom filtering and still have the view of the filtering, right below the column name, looking the same as the default one? 

Regards

[Svet]

Hi George,

I will provide a bit mode details on this case.

About the first question, the value passed to the [field] input property can be evaluated using the "translate" pipe like it is used to pass the value for the [title] input property:

<kendo-grid-column [field]="{{'Type' | translate}}" [title]="{{'Document Type' | translate}}" [filterable]="true">

If "{{'Type' | translate}}" evaluates to "Vertrag", then you need to ensure that each item of the data passed to the Grid has a property "Vertrag" as well.

About the second question, there are two types of custom filters available for the Kendo UI for Angular Grid. One is filter row and the other is a filter menu. The filter row can be used to create a custom filter and place it below the column name. However, when using a custom filter, the developer has the control over using the required HTML and/or css to achieve the use-case requirement.

I hope the provided information helps. Please let me know in case there is something unclear or if any additional details are required for this case. Thank you.

Regards,
Svetlin
Progress Telerik