Kendo Grid Custom Flter Set Filter Value Programmatically

Question

I am trying to programmatically set the filter value of a Kendo Grid Custom Filter. I'm applying my new filter values like:

gridOptions.dataSource.filter = [
    {
      field: 'MyField',
      operator: 'eq',
      value: newTextValue
    }
];

My field definition in the grid options look like:

{
     width: '140px',
     title: 'MyFieldTitle',
     field: 'MyField',
     filterable: getFieldFilter()
}

With the following filter:

function getFieldFilter() {
  return {
    cell: {
      template: function (args) {
        var element = args.element;

        element.kendoComboBox({
          dataSource: {
            transport: {
              read: 'api/Items'
            }
          },
          valuePrimitive: true,
          dataTextField: 'Description',
          dataValueField: 'Code'
        });
      },
      showOperators: false
    }
  };
}

If I apply the filter as shown above, it only works after I click the kendoComboBox in the column and click outside of it again. My initial thought was that kendo grid would not apply the dataValueField and just set the dataTextField. When I was checking the requests kendo grid is sending to the server, I saw that it was sending to value stored in the kendoComboBox itself (text) and not the value behind it.

If I select something in the kendoComboBox from the UI, everything works just fine. But if I set it programmatically like above, it doesn't.

Do I need to refresh some kind of state to make the kendoComboBox refresh its internal value or how do I solve this issue?

EDIT: What I'm trying to do, is getting the value of the kendoCombobox from the grid.

var currentlyAppliedFilters = grid.dataSource.filter().filters;
for (var filter of currentlyAppliedFilters) {
    if (filter.field === 'MyField') {
      var currentlyApplied = filter.value;
    }
}

So the code above, would give me the Description property of the items in the kendoCombobox, but what I actually want to get it the Code property.

score 0 · Answer 1 · answered Dec 05 '17 at 08:19

Initially when the dataSource do not have a filter, the cell filter need a option label. so that the 1st value does not appear as selected.

eg : dojo example with optionLabel

 args.element.kendoDropDownList({
                                dataSource: args.dataSource,
                                optionLabel: "Select a color...",
                                dataTextField: "color",
                                dataValueField: "color",
                                valuePrimitive: true
                            });

if you you need the grid to filter when binding, a default filter should be added to the dataSource

eg: dojo example with DataSource Filter

 dataSource: { 
          data:[ { color: "#ff0000", size: 30 }, { color: "#000000", size: 33 }] ,
          filter: { field: "color", operator: "eq", value: "#ff0000" }
                    }

Hope this helps.

In my case it seems to be different, either because I'm using a different `dataTextField` and `dataValueField` or because I'm having a `kendoDropDownList` with text input. — Thomas Gassmann, Dec 07 '17 at 09:09

Kendo Grid Custom Flter Set Filter Value Programmatically

1 Answers1