KendoGrid - Filtering on a property of object - filter

Question

here is my KendoGrid :
$scope.gridEltCompoOptions = {
dataSource: {
transport: {
...
},
schema: {
model: {
id: 'IdElement',
fields: {
GroupeActes: { defaultValue: { IdGroupeActes: null, Libelle: ' ' } }
}
}
}
},
sortable: true,
resizable: true,
filterable: {
mode: 'row'
},
columns: [{
field: 'GroupeActes',
title: "Groupe d'actes",
template: function (dataItem) {
return kendo.toString(dataItem.GroupeActes.Libelle);
}
}, ]
I want to filter my field 'GroupeActes' on the property Libelle (GroupeActes is an object), but actually the filter take the entire object.
When i try to filter, i have a Js Error
Uncaught TypeError: (d.GroupeActes || "").toLowerCase is not a function
The problem is clear, the filter is taking the entiere object, not the property Libelle.
i passed the last 4 hours to try all the solutions i found on google but nothing is working
my object GroupeActes is like this :
var GroupeActes = {
GroupeActes : {
Libelle : ""
}
}
there is two groupeActes level
I saw a post in 2015 of an Admin, saying this kind of filter isn't possible,
but i saw also this kind of solution :
https://docs.telerik.com/kendo-ui/knowledge-base/grid-filter-column-with-dropdownlist
(if(e.field == "Category" && e.filter !== null){) in the example
i tried to do something like : if field == "groupeActes" => so i want to filter on Libelle properties,
but i didn't success
Can someone help me please ?
thank you so much

Answer 1

Have you looked at this article: https://docs.telerik.com/kendo-ui/knowledge-base/enable-operations-for-object-column
I believe you can accomplish what you want by setting the column field to "GroupeActes.Libelle" instead of using a column template:
columns: [
{
field: 'GroupeActes.Libelle',
title: "Groupe d'actes",
},
],
See this DEMO: