Kendo Grid Server side filtering with a array type column - filter

Question

I have this kendo grid blinded to my web service. One of the columns has a custom filter with a kendo multiselector array so the client can choose multiple ItemTypes. The grid is displaying data correctly but my costume filters are not working for this particular column. I got this error from the service: "A binary operator with incompatible types was detected. Found operand types 'Telerik.Sitefinity.DynamicTypes.Model.ClinicFinder.Clinic.ItemType.ItemType' and 'Edm.Int32' for operator kind 'Equal'."
My grid definition
$("#grid").kendoGrid({
dataSource: {
type: "odata-v4",
transport: {
read: {
url: function () {
return "//myservice/api/clinics?$select=Id,Title,Address,ItemType,productsystems&top=20";
}
}
},
schema: {
model: {
fields: {
Title: { type: "string" },
CountryCode: { type: "string" },
Street: { type: "string" },
City: { type: "string" },
Zip: { type: "string" },
ItemType: { type: "" }
}
}
},
serverPaging: true,
serverFiltering: true,
serverSorting: false,
pageSize: 20
},
pageable: true,
filterable: {
mode: "row",
extra: false,
showOperators: false,
operators: {
string: {
contains: "contains"
}
}
},
sortable: false,
columns: [
{ field: "Title", title: "Clinic" },
{ field: "CountryCode", title: "Country" },
{ field: "Street", title: "Address" },
{ field: "City", title: "City" },
{ field: "Zip", title: "Zip", filterable: false },
{ field: "ItemType", title: "Clinic Type", filterable: { multi: true } }
],
rowTemplate: kendo.template($("#template").html())
});
My Filter function
function filterByclinicCategory() {
var filter = { logic: "or", filters: [] };
var grid = $('#grid').data('kendoGrid');
var filterValue = $("#clinicTypeFilter").data("kendoMultiSelect").value();
var clinicCode = [];
if (filterValue.length > 0) {
$.each(filterValue, function (i, v) {
clinicCode.push(convertClinicTypesInCodes(v));
filter.filters.push({
field: "ItemType", operator: "eq", value: clinicCode, logic: "or"
});
grid.dataSource.filter(filter);
});
} else {
$("#grid").data("kendoGrid").dataSource.filter({});
}
}
ItemType is the column I can´t filter.
My webservice data
{
"#odata.context": "https://sf-admin-local.medel.com/api/wstest/$metadata#clinics(*)",
"value": [
{
"Id": "896aa08b-2f17-64e6-80bd-ff09000c6e28",
"LastModified": "2019-05-13T09:28:04Z",
"PublicationDate": "2018-06-19T14:19:13Z",
"DateCreated": "2018-06-19T14:19:13Z",
"UrlName": "??",
"Email": "",
"URL": "",
"Telephone": "",
"Title": "????????",
"officeregions": [],
"salespartnerregions": [],
"productsystems": [
"b8ec2a8b-2f17-64e6-80bd-ff09000c6e28",
"1878cb61-ac79-69d9-867b-ff01007297b6",
"1b78cb61-ac79-69d9-867b-ff01007297b6",
"36d8938b-2f17-64e6-80bd-ff09000c6e28"
],
"Area": "",
"Order": 0,
"Tags": [],
"AdditionalInformation": "",
"ImportID": 1,
"Featured": false,
"ItemType": "2",
"Address": {
"Id": "d76aa08b-2f17-64e6-80bd-ff09000c6e28",
"CountryCode": "AT",
"StateCode": "",
"City": "????",
"Zip": "6800",
"Street": "Carinagasse ?????",
"Latitude": 47.2311043,
"Longitude": 9.580079999999953,
"MapZoomLevel": 8
}
}
]
}

Answer 1

I manage to fix it using parameterMap https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.parametermap.
I add a parameterMap: functiondata, type) function, with that I was able to intercept and change the call made by the filters.
parameterMap: function (data, type) {
var c = kendo.data.transports["odata-v4"].parameterMap(data, type);
if (c.$filter) {
//my transformation
c = myTransformation;
return c;
} else{
return c; //not apply transformation loading the data
}
}