kendoFilter with multiple filter values

Question

kendoFilter with multiple filter values

330 Views Asked by The_Black_Smurf At 25 October 2022 at 15:21

In the kendoGrid, you can implement the Filter Multi Checkboxes in order of specify multiple values for a single column filter.

I would like to replicate the same feature inside the kendoFilter widget. I've tried to use a kendoMultiSelect as an editorTemplate (see this Dojo example)

$(document).ready(function () {
    var dataSource = new kendo.data.DataSource({
        pageSize: 20,
        data: products,
        autoSync: true,
        schema: {
            model: {
                id: "ProductID",
                fields: {
                    ProductID: { editable: false, nullable: true },
                    ProductName: { validation: { required: true } }
                }
            }
        }
    });

    $("#filter").kendoFilter({
        dataSource: dataSource,
        applyButton: true,
        fields: [
            { name: "ProductName", label: "Product Name", editorTemplate: productDropDownEditor },
        ],
        expression: {
            logic: "and",
            filters: [
                { field: "ProductName", value: "", operator: "eq" }
            ]
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 550,
        columns: [
            { field: "ProductName", title: "Product Name" },
            { field: "UnitsInStock", title: "Units In Stock", width: "130px" }
        ]
    });
});

function productDropDownEditor(container, options) {
    $('<input data-bind="value: value" name="' + options.field + '"/>')
        .appendTo(container)
        //.kendoDropDownList({
        .kendoMultiSelect({
            dataTextField: "ProductName",
            dataValueField: "ProductName",
            autoclose: false,
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                }
            }
        });
}

Unfortunately, I think it doesn't work because the filter.value doesn't expect an array as a parameter. Is there a standard way to use the tell the kendoFilter how to create a filter based on multiple values?

Original Q&A

There are 1 best solutions below

**jpllosa** · Answer 1 · 2022-11-02T15:26:55.290000

I think I see what you are trying to do. Unfortunately, you can't use it that way because kendoFilter does it one by one (i.e. you'll need to click on the "+" icon in order to add another filter). Here is another alternative of what I think you are trying to do.

First off, I'd hide kendoFilter. Then based on the multiselected product name I'd redo the expression of the filter. This still accomplishes what you are trying to do (filtering through multiselect). Try the code below in the DOJO.

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/filter/custom-editors">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.default-ocean-blue.min.css" />

    <script src="https://kendo.cdn.telerik.com/2022.3.913/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js"></script>

</head>
<body>
    <script src="../content/shared/js/products.js"></script>
    <div id="example">
        <div id="filter"></div>
        <div id="multiselect"></div>
        <br />
        <br />
        <br />
        <div id="grid"></div>

        <script>

            $(document).ready(function () {
                var dataSource = new kendo.data.DataSource({
                    pageSize: 20,
                    data: products,
                    autoSync: true,
                    schema: {
                        model: {
                            id: "ProductID",
                            fields: {
                                ProductID: { editable: false, nullable: true },
                                ProductName: { validation: { required: true } }
                            }
                        }
                    },
                });

                var filter = $("#filter").kendoFilter({
                    dataSource: dataSource,
                    expression: {
                        logic: "or",
                        filters: [],
                    }
                }).data("kendoFilter");

                $("#multiselect").kendoMultiSelect({
                    dataTextField: "ProductName",
                    dataValueField: "ProductName",
                    autoclose: false,
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                        }
                    },
                    change: function(e) {
                        var dataItems = e.sender.dataItems();
                        var options = filter.getOptions();
                        options.expression.filters = [];
                        for (let dataItem of dataItems) {
                            options.expression.filters.push({
                                field: "ProductName",
                                value: dataItem.ProductName,
                                operator: "eq"
                            });
                        }

                        filter.setOptions(options);
                        filter.applyFilter();
                    }
                });

                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    pageable: true,
                    height: 550,
                    columns: [
                        { field: "ProductName", title: "Product Name" },
                        { field: "UnitsInStock", title: "Units In Stock", width: "130px" }
                    ]
                });
            });
        </script>
        <style>
            #filter {
                display: none;
            }
        </style>
    </div>
</body>
</html>

kendoFilter with multiple filter values

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in KENDO-UI

Related Questions in KENDO-DATASOURCE

Related Questions in KENDO-MULTISELECT

Trending Questions

Popular # Hahtags

Popular Questions