Sometimes you want to do something a little different from the normal filtering, like applying advanced filters to one of the Portal Connector widgets that don't exactly have the capabilities to accomplish the kind of filtering you need from the designers. Luckily, with our JavaScript APIs, you have the power to do exactly that and more.
In this example I'm going to show you how to apply filters from one picklist value to another, using only JavaScript. These techniques can be copied and applied to any other Portal Connector Kendo based widget that has a data source.
The commented code is below that explains exactly how to use this in action:
// Document ready to setup the events after the API has loaded
$(function () {
/* Find the appropriate fields that you wish to filter, in our case we are
filtering the shipping method based on the country selected.
*/
var country = tpc.find("event_country");
var shippingMethod = tpc.find("address1_shippingmethodcode");
/* Add a change event to the country picklist so we can apply our custom filters
to the shipping method picklist
*/
country.get_kendoInput().bind("change", function (e) {
var filter = {};
// If the selected country's picklist text is Canada, apply different filters
if (e.sender.text() === "Canada") {
filter.logic = "and";
filter.filters = [
/* This filter ensures that no items with the Label "Will Call", "Airborne" and with the
Value "6" will be included in our data set.
*/
{ field: "Label", operator: "notequals", value: "Will Call" },
{ field: "Label", operator: "notequals", value: "Airborne" },
{ field: "Value", operator: "notequals", value: 6 }, // Full Load, Value filter instead of Label
];
// Otherwise, for all other countries, only filter out the following
} else {
filter.logic = "and";
filter.filters = [
{ field: "Label", operator: "notequals", value: "Will Call" },
{ field: "Label", operator: "notequals", value: "DHL" }
]
}
// Apply the filter on the shipping method data source.
shippingMethod.get_kendoInput().dataSource.filter(filter);
});
// Trigger the change event for the first load
country.get_kendoInput().trigger("change");
});
Come back to our blog section to find more handy developer tips like this!