[Solved] Error when trying to filter data on grid

[Perrin]

I'm getting an error when trying to search for data on my grid.. The error I am receiving is this: "Uncaught TypeError: (d.ComponentId || "").toLowerCase is not a function". Thank you in advance for your help. 

 

my grid definition looks like this:

$("#grid").kendoGrid({

  toolbar: [

    { template: kendo.template($("#template").html())}

  ],

  dataSource: {

    data: filteredData

  },

   

  schema: {

    model: {

        fields: {

            ComponentId: { type: "string", filterable:true },

            Description: { type: "string", filterable:true }

        }

      }

    },

  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");

 

 

And my code to filter looks like this.. 

  $("#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 });
});

Also, this is the code for my toolbar template: 

 

<script id="template" type="text/x-kendo-template">
           <label class="search-label" for="searchBox">Search Grid:</label>
            <input type="search" id="searchBox" class="k-textbox" style="width: 250px"/>
           <input type="button" id="btnSearch" class="k-button" value="Search"/>
           <input type="button" id="btnReset" class="k-button" value="Reset"/>
        </script>

 

 

 

[Stefan]

Hello, Perrin,

Thank you for the details and the code.

The issue occurs because the schema configuration is placed outside of the dataSource configuration.

Once I placed it inside the dataSource, the example was working as expected:

https://dojo.telerik.com/uxALixoY

I hope this is helpful.

Regards,
Stefan
Progress Telerik