Error when trying to filter data on grid

2 posts, 0 answers
  1. Perrin
    Perrin avatar
    7 posts
    Member since:
    Jun 2018

    Posted 13 Jun 2018 Link to this post

    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>

     

     

     

  2. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 15 Jun 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top