Cannot filter data on grid

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

    Posted 12 Jun 2018 Link to this post

    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. 

     

     

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 14 Jun 2018 Link to this post

    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:
    ComponentId:"SCH_225-03"

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

    Regards,
    Konstantin Dikov
    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.
  3. Perrin
    Perrin avatar
    7 posts
    Member since:
    Jun 2018

    Posted 14 Jun 2018 in reply to Konstantin Dikov Link to this post

    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!
  4. Perrin
    Perrin avatar
    7 posts
    Member since:
    Jun 2018

    Posted 14 Jun 2018 in reply to Perrin Link to this post

    Actually. It just wasn't working in chrome. I tried it in edge and it worked. . Sorry for the confusion
  5. Perrin
    Perrin avatar
    7 posts
    Member since:
    Jun 2018

    Posted 14 Jun 2018 Link to this post

    Is there some way to define the schema using a template function? The same way I used a template to format the table? 
  6. Georgi
    Admin
    Georgi avatar
    685 posts

    Posted 18 Jun 2018 Link to this post

    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.
    function buildSchema(model){
      var result = {
        id: "id",
        fields: {
        }};
     
      for(prop in model){
                  result.fields[prop] = {type: typeof model[prop]}
      }
       
      return result;
    }

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



    Regards,
    Georgi
    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