Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
I am trying to add the Kendo Search Toolbar to my grid.
I have added the following in my Kendo Grid
toolbar: ["search"],
search: {
fields: [
{ name: "BusinessArea", operator: "eq" }
Put this in my datasource
fields: {
BusinessArea: { type: "string" }
When I run the code and key a search value I am getting the following in the console:
2kendo.all.js:2112 Uncaught TypeError: e.charAt is not a function
at Object.expr (kendo.all.js:2112:46)
at Function.r.filterExpr (kendo.all.js:5720:25)
at r.filter (kendo.all.js:5963:35)
at Function.r.process (kendo.all.js:6160:25)
at init._queryProcess (kendo.all.js:7753:34)
at init.query (kendo.all.js:7811:35)
at init._query (kendo.all.js:7841:29)
at init.filter (kendo.all.js:7910:22)
at kendo.all.js:64008:45
expr @ kendo.all.js:2112
r.filterExpr @ kendo.all.js:5720
filter @ kendo.all.js:5963
r.process @ kendo.all.js:6160
_queryProcess @ kendo.all.js:7753
query @ kendo.all.js:7811
_query @ kendo.all.js:7841
filter @ kendo.all.js:7910
(anonymous) @ kendo.all.js:64008
setTimeout (async)
(anonymous) @ kendo.all.js:63981
dispatch @ jquery.js?v=igUc00PXGT1YBL1_Kf7QYy9fPlLqZKcEGrCqDz3EFDI:5183
elemData.handle @ jquery.js?v=igUc00PXGT1YBL1_Kf7QYy9fPlLqZKcEGrCqDz3EFDI:4991
Below is the Full JS with the above statements added (Removed the grid works as expected without the search). Any suggestions would be helpful.
Thanks
$("#notificationGrid").kendoGrid({
filter: function (e) {
if (e.field === "BusinessArea" || e.field === "Roles") {
if (e.filter) {
e.filter.filters.forEach(function (f) {
f.operator = "contains";
filterMenuOpen: function (e) {
if (e.sender.dataSource.filter()) {
e.sender.dataSource.filter().filters.forEach(function (f) {
//handle nested filters
if (f.filters) {
f.filters.forEach(function (z) {
if (z.field === "BusinessArea" || z.field === "Roles") {
checkbox = e.container.find("input[value='" + z.value + "']");
if (checkbox[0] && !checkbox[0].checked) {
e.container.find("input[value='" + z.value + "']").click();
if (f.field === "BusinessArea" || f.field === "Roles") {
var checkbox = e.container.find("input[value='" + f.value + "']");
if (checkbox[0] && !checkbox[0].checked) {
e.container.find("input[value='" + f.value + "']").click();
columns: [
title: "#",
template: "#= ++record #",
width: 50
field: "BusinessArea",
title: "Business Area",
filterable: {
multi: true
field: "NoteType.NotificationID",
title: "Notification ID",
filterable: {
multi: true
width: 175
field: "NoteType.NotificationName",
title: "Notification Name",
template: '<a href="/notificationdetail/#: BusinessArea #/#: NoteSubscription.NotificationType #">#: NoteType.NotificationName #</a>',
filterable: {
multi: true
field: "NoteSubscription.NotificationType",
title: "Notification Type",
filterable: {
multi: true
field: "DefaultAddress",
title: "Default From Address",
filterable: {
multi: true
field: "IsSubscribed",
title: "Subscribed",
filterable: {
multi: true
attributes: { "class": "table-cell k-text-center" },
width: 100
toolbar: ["search"],
search: {
fields: [
{ name: "BusinessArea", operator: "eq" }
editable: "inline",
filterable: true,
sortable: true,
pageable: true,
dataBinding: function () {
record = (this.dataSource.page() - 1) * this.dataSource.pageSize();
var dataSource = new kendo.data.DataSource({
error: function (e) {
if (e.status === "error") {
this.cancelChanges();
showToast("Error Occurred", e.xhr.responseText, "exclamation-circle", "red");
var grid = $('#notificationGrid').data('kendoGrid');
grid.dataSource._data = self.formatData(grid.dataSource.data());
grid.refresh();
requestEnd: onRequestEnd,
transport: {
read: {
type: "GET",
dataType: "json",
url: '/notification/getall'
parameterMap: function (data, operation) {
return kendo.stringify(data);
schema: {
model: {
id: "RecordKey"
fields: {
BusinessArea: { type: "string" }
pageSize: 25
function onRequestEnd(e) {
if (e.type === undefined || e.type !== "read") {
showToast("Success", "Record " + e.sender._destroyed[0].RecordKey + " successfully deleted.", "check", "green");
e.sender._destroyed = [];
self.formatData = function (data) {
return data;
dataSource.fetch(function () {
var data = this.data();
data = self.formatData(data);
var kendoGrid;
kendoGrid = $("#notificationGrid").data("kendoGrid");
kendoGrid.setDataSource(dataSource);
self.loaded(true);
Folks Problem Solved. Turns out I am using version 2020.1 so the documentation doesn't mix with the actual code.
I changed the following:
toolbar: ["search"],
search: {
fields: [
{ name: "BusinessArea", operator: "eq" }
toolbar: ["search"],
search: {
fields: ["BusinessArea"]
This defaults to contains which is what I needed so I didn't dive any further to figure out how to use the operator function with my outdated version. May need to upgrade to latest version to leverage that code.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
