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
1 Answer, 1 is accepted
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
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.