Morning,

I've been using the Kendo Grid for years and absolutely love it for what I can do with it, but every so often I get asked to stretch the functionality of what it can do,  I haven't found much documentation on this, but i'll try my best to give an example of what I've done, and to see if there is a better way of doing it..

I have a field in my Grid that is a string, with multiple "Tags" explicitly given in the dataSource in filterable.

    {
        "columnMenu": {
            "componentType": "modern"
        },
        "stickable": true,
        "field": "conditions",
        "filterable": {
            "enabled": true,
            "multi": true,
            "search": true,
            "dataSource": [
                {
                    "conditions": "TEST123"
                },
                {
                    "conditions": "TEST"
                },
                {
                    "conditions": "ABC"
                },
                {
                    "conditions": "DEF"
                }
            ]
        },
        "groupable": true,
        "aggregates": "count",
        "groupHeaderTemplate": "Conditions: #= value # (Count: #= count#)",
        "sortable": true,
        "title": "Conditions",
       

The data in the field is a string of comma separated tags, i.e.

TEST, ABC, DEF

I've updated the filter method on the Grid so that I can select multiple options in the filter menu, and it does a "contains" look up to match multiple hits.

filter: function(e){
	this.columns.forEach(function(f){
		if(e.field === f.field){
			if(f.filterable.hasOwnProperty('dataSource')){
				e.filter.filters.forEach(function(f){
					f.operator = "contains";
					e.filter.logic = "and";
				})
			}
		}
	})
},

I have two issues here.

1. I'm using contains, so if the tags are similar (TEST, TEST123), selecting TEST will show both TEST and TEST123 - which isn't ideal.

2. If I select an option from the filter menu, it doesn't remain checked if you were to go back into the filter menu again.

I've asked this question before and had some great help to get it to this point using: https://docs.telerik.com/kendo-ui/knowledge-base/grid-how-to-change-multi-checkbox-filter-to-contains but I'm wondering if there is a better way of achieving the functionality I'm looking for here with the grid.  I added square brackets to the tags to distinguish them ([TEST], [TEST123]) , but my users didn't like this change.

Is there a way to do this without using contains?

I'd also like to be able to see the selected option in the filter menu - I can find the checkbox through jQuery, but I cannot toggle it's state..

e.filter.filters.forEach(function(f){
	var checkbox = $(".k-filter-menu").find("input[value='"+f.value+"']");

	console.log(checkbox);												 
        checkbox.prop("checked", true).trigger("change");
	checkbox.attr("checked", true).trigger("change");

	f.operator = "contains";
	e.filter.logic = "and";
})

Thanks for your help,

Matt

I have a kendo grid in JSTL format where I'm trying to override a filter choice for date (making the filter look for the span of an entire day like in this example. But setting a simple hardcoded filtergives no results in the kendo grid, even when there are results matching the filter:

let startOfFilterDate = new Date(2000,1,1,0,0,0) 
let endOfFilterDate = new Date(2000,1,1,23,59,59) 
var filter = { 
  logic: "and", 
  filters: [ 
    { field: "date", operator: "gte", value: startOfFilterDate }, 
    { field: "date", operator: "lte", value: endOfFilterDate } 
  ] 
}; 
e.sender.dataSource.filter(filter);

I've tried putting in various places...

1) <kendo:dataSource-change></kendo:dataSource-change

2) <kendo:grid name="search-result-grid" ... filterable="true" columnMenu="true" columnMenuInit="doFilter">

And then my "doFilter" method is pretty much the same as the given example linked to above.

If I console.log the dataSource.filter, it shows that the filters are there. But the datasource is not being updated/refreshed with the filter for whatever reason.

I am looking for a help where I need to recreate the options for column filter values when the data on left hand side filter changes?

I have a drop down list country on left hand side and when ever user select the country the column(region), filter (custom filter, based on column on the grid) all the checkboxes for the custom filter should reflect the region as per the country selected.

Hello there!

I have a question regarding the use of multiple fields in one KendoGrid column.

I managed to display multiple fields in one column by using this code (data source is set dynamically using a buttongroup):

$("#users-grid").kendoGrid({
                groupable: false,
                filterable: { mode: "menu" },
                sortable: true,
                resizable: true,
                pageable: true,
                columns: [{
                    title: "OrderNumber",
                    field: "OrderNumber",
                    width: "10%",
                    resizable: true,
                    template: '#=OrderNumber#',
                    filterable: true
                },
                    {
                        title: "Address",
                        field: "AddressDelivery.ZipCode",
                        width: "35%",
                        resizable: true,
                        template: '#=AddressDelivery.ZipCode#  #=AddressDelivery.City# - #=AddressDelivery.Street#  #=AddressDelivery.StreetNumber# - #=AddressDelivery.Iso3166Alpha2#'
                    },
                {
                    title: "Creation Date",
                    field: "CreationDate",
                    width: "8%",
                    resizable: true,
                    template: '#=isNull(CreationDate)?\'\':kendo.toString(CreationDate, \'dd.MM.yy\')#'
                },
                {
                    title: "Complete Date",
                    field: "CompleteDate",
                    width: "8%",
                    resizable: true,
                    template: '#=isNull(CompleteDate)?\'\':kendo.toString(CompleteDate, \'dd.MM.yy\')#'
                },
                {
                    title: "Company / Last Name",
                    field: "AddressDelivery.Company",
                    width: "25%",
                    resizable: true,
                    template: '#=AddressDelivery.Company?AddressDelivery.Company:\'\'# / #=AddressDelivery. LastName#'
                }]
               
            });

However, I want to make it possible, that my Users can filter the column "Address" regarding every field that is displayed. At the moment I can only filter by AddressDelivery.ZipCode.

How would I manage that?

Best regards

When I select a filter dropdown value, it gets populated into other filter fields as well.

I have checked my grid configurations, but couldn't figure our what issue is there.

PS: The attachment is an GIF screen recording of the issue.

Hi,

I encoutered a problem where I'm trying to have 2 different filter options for a Kendo Grid column and I can't manage to find the answer on how to combine filters like Operators (equal to, is greater than, etc.) and filter multi checkboxes listing all results for that column.

I have a working copy of filter multi checkboxes, but when I try to add a second option on one of my columns.filterable it's not taken into account and I didn't manage to find any answers on a possible how to.

filterable: {
   multi: true,
   operators: {
            string: {
              eq: "Equal to",
              neq: "Not Equal to"
            }
     },
}

We are facing filter issue on Kendo Grid when filter value is mapped to 0, below is the piece of code.

(We are applying existing filters to the new datasource to get the expected result)

Code:

BulkTaggingDataSource.read().then(function () {
  var filter = {};
  if ($("#FoodGrid").data("kendoGrid").dataSource.filter()) {
       filter.filter = $("#FoodGrid").data("kendoGrid").dataSource.filter();
  }

var query = kendo.data.Query.process(BulkTaggingDataSource.read.data(), filter);

 $.each(query.data, function (index, content) {
         $.each(query.data, function (index, content) {
                   if ($.inArray(content.id, checkedIds) < 0) {
                       checkedIds[content.id] = state;
                   }
         })
   })
});

Filter which we get from $("#FoodGrid").data("kendoGrid").dataSource.filter(): is 

In our case if the {field: 'TotalHours', operator: 'eq', value: '0'} if the filter value is '0'
we get the query.data as empty array and we wont get the expected result.

and filter will work if the {field: 'TotalHours', operator: 'eq', value: '5'}

we are facing issue only for '0' filter. and in schema we have declared 'TotalHours' as number.

Kindly let us know how to fix this issue.

Hi!

Can I also apply a filter string representation read from a filter transport.parameterMap?

let grid = $('#myGrid').data("kendoGrid");

// This works, apply filter from object
grid.dataSource.filter({ field: "amount", operator: "eq", value: 7 });

// read the grid' filter as string
let filterstring = grid.dataSource.transport.parameterMap({ filter: grid.dataSource.filter() }).filter;
// value is now "amount~eq~7"

// Q: can something like this be done in some way?
grid.dataSource.filter("amount~eq~1234567"); // bad code

Thanks!