Cascading Picklists

Cascading Picklists or other Widgets using Kendo Filters

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.
    // Trigger the change event for the first load

Come back to our blog section to find more handy developer tips like this!


Stay informed of Web Portal Tips & Tricks from Portal Hero!

Sign up for our newsletter!

loading image
Become a Portal Hero!