Multiple Fields in one Grid Column - Multiple filters possible

[n/a]

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

[Georgi Denchev]

Hello,

The column templates are used only for visual representation, they do not modify the rest of the Grid functionalities in any manner. That is why the filter will still be applied only to the field to which the column is bound.

You could use the filter event to intercept the filters before they are applied to the Grid and modify them, something similar to this:

filter: function(e) {
 e.preventDefault();

 if(e.filter && e.filter.filters && e.field === "field name") {
   // Get the current filter for the "AddressDelivery.ZipCode" column.
   let currentFieldNameFilter = e.filter.filters.find(f => f.field === "field name"); // Change 'field name' to the correct value.

   // Push additional filters to the the filter array that have the same value and operator but for another column (AddressDelivery.City for example).
   e.filter.filters.push({ field: "another field", operator: currentFieldNameFilter.operator, value: currentFieldNameFilter.value });
   e.filter.filters.push({ field: "a third field", operator: currentFieldNameFilter.operator, value: currentFieldNameFilter.value });
 }

 // Apply the newly modified filter to the dataSource.
 e.sender.dataSource.filter(e.filter);
}

Best Regards,
Georgi Denchev
Progress Telerik