I'm currently trying to add a search bar at the top of my gridview. My data is displaying properly in the grid but when I try to search, I am met with this error: Uncaught TypeError: (d.ComponentId || "").toLowerCase is not a function. I have tried updating the schema and trying all of the examples I've found online but I cannot seem to get it to work properly. I will include my grid definition and sample of the JSON Data I'm passing into the table. I am using a template to properly populate the grid so I'm not sure if that is the problem. 

grid definition

$("#grid").kendoGrid({
toolbar: [
{ template: kendo.template($("#template").html())}
],
dataSource: {
data: filteredData
},

schema: {
model: {
fields: {
ComponentId: { type: "string" },
Description: { type: "string" }
}
}
},
selectable: true,
allowCopy: true,
height: 430,
sortable: true,
refresh: true,
filterable: {
mode: "row"
},
columns: [
{ field: "ComponentId",title: "Component Id", template: "#=test(data)#",filterable:true},
{ field: "Description",title: "Description", template: "#=description(data)#",filterable:true }
],
}).data("kendoGrid");

 

$("#btnSearch").on("click", function () {
alert("clicked");
var filter = { logic: "or", filters: [] };
$searchValue = $('#searchBox').val();
if ($searchValue) {
$.each($("#grid").data("kendoGrid").columns, function( key, column ) {
if(column.filterable) {
filter.filters.push({ field: column.field, operator:"contains", value:$searchValue});
}

});
}
$("#grid").data("kendoGrid").dataSource.query({ filter: filter });
});

 

Here is a small data sample. I am pulling these from a larger JSON file. 

Article:{#text: Array(6), InventoryOnReceipt: {…}, HasOwnIdentification: {…}, ComponentList: {…}, AccessoryList: {…}, …}
Characteristic:{@attributes: {…}, #text: Array(15), CCTMS: {…}, CCFMS: {…}, CZCMS: {…}, …}
ComponentGroup:{#text: Array(2), GroupId: {…}}
ComponentGroupTree:{#text: Array(4), GroupId: {…}, Description: {…}, ComponentGroupTree: {…}}
ComponentId:{#text: "SCH_225-03"}
CouplingUseCharacteristic:{#text: "True"}
DatasetState:{#text: "1"}
Description:{#text: "Fräseranzugsschraube 16/M8"}
Description_en:{#text: "Clamping srew for combi shell mill holder 16/M8"}

also here are my two template functions which just returning the correct data for the two fields I'm populating on the grid. 

function description(data)
{
return data.Description["#text"];
}

 

Sorry if this is too much information at once. Thank you. 

 

 

 

Hello Perrin,

The issue is due to the complex object that you are binding to the columns and when you initiate the filtering, the component will try to apply the filtering over that complex object, which is not supported. The Grid is designed to be used with flat data and with the current configuration that you have, in order to filter the ComponentId for example (the same applies for all fields), the data in the JSON must be the following:

For binding the column to the nested field you could define a property in the schema of the dataSource using "from":

• https://dojo.telerik.com/aHusUMep

Hope this helps.
 

Regards,
Konstantin Dikov
Progress Telerik

Hey Konstantin. Thanks for your reply! Unfortunately the dojo link you posted will not work and tells me that the host cannot be resolved. I'm not sure if all kendo dojo links maybe are currently down or if it's just that one in particular.. Thanks!

Actually. It just wasn't working in chrome. I tried it in edge and it worked. . Sorry for the confusion

Is there some way to define the schema using a template function? The same way I used a template to format the table? 

Hi Perrin,

The dataSource.schema property accepts only object as a value. However, your could create a function which creates the schema object dynamically,

e.g.

Below you will find a small sample which demonstrates the above approach:

• http://dojo.telerik.com/eRuYUnet

Regards,
Georgi
Progress Telerik