Reputation: 4349

kendo ui grid filter autocomplete

i have this code:

$("#grid_detail").kendoGrid({
    dataSource: {
        data: orders
    },
    filterable: {
        extra: false,
        operators: {
            string: {
                contains: "Contains",
            }
        }
    },
    sortable: true,
    columns: [
        {
            field: "Buyer",
            title: "buyer",
            width: "40"
        },
        {
            field: "name",
            title: "Article name",
            width: "40"
        },
        {
            field: "paid",
            title: "Paid",
            width: "20",
            filterable: false
        }
    ]
});

now, how can i filter on field buyer, but to use autocomplete, and to show all buyers that are in dataSource ?

I tried with this, on buyer filed, but still nothing.

filterable: function(element){
    element.kendoAutoComplete({
        dataSource: orders,
        dataTextField: "buyer",
    })
}

Thanks.

Upvotes: 1

Answers (3)

BLoB

Reputation: 9725

Updated alternative solution providing enhanced functionality: Use the new Multi Checkbox filter (using 2023.X.X.X).

It gives an autocomplete with search option, and also checkboxes for multi selection.

I've included some sample code which will sort the autocomplete list asc, and also remove the 'Select All' option at the top of the checkbox list.

To sort a filter menu multi checkbox (just remove the if statement to apply it to the filter menu on all fields):

P.S. The e.Field is the field name assigned in the schema.

columns: [
{
    field: "Shipment",
    title: "Shipment Id.",
    filterable: {
        multi: true,
        search: true
    }
}]


filterMenuInit: function(e) {
    // This will apply sort: asc to the filter multi checkbox filter.
    var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck")
    filterMultiCheck.container.empty();
    filterMultiCheck.checkSource.sort({field: e.field, dir: "asc"});
    filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
    filterMultiCheck.createCheckBoxes();

    // Remove the Select All option from the multi checkbox filter.
    var container = e.container;
    var checkAll = container.find(".k-check-all-wrap");

    checkAll.hide();
}

For more information see here

Upvotes: 0

Abdo-Host

Reputation: 4193

First we specify a single filter criterion using the filterable->extra=false setting, and limit the filter operators for string columns to starts with, equal and not equal only. Then we define built-in date picker UI to filter the datetime column in the grid, and instantiate Kendo UI AutoComplete and DropDownList for the Title and City columns, respectively.

To create the dropdown filters, we assign javascript functions to the filterable->ui attributes of the corresponding columns.

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

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

</head>
<body>
        <script src="../content/shared/js/people.js"></script>

        <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: createRandomData(50),
                            schema: {
                                model: {
                                    fields: {
                                        City: { type: "string" },
                                        Title: { type: "string" },
                                        BirthDate: { type: "date" }
                                    }
                                }
                            },
                            pageSize: 15
                        },
                        height: 550,
                        scrollable: true,
                        filterable: {
                            extra: false,
                            operators: {
                                string: {
                                    startswith: "Starts with",
                                    eq: "Is equal to",
                                    neq: "Is not equal to"
                                }
                            }
                        },
                        pageable: true,
                        columns: [
                            {
                                title: "Name",
                                width: 160,
                                filterable: false,
                                template: "#=FirstName# #=LastName#"
                            },
                            {
                                field: "City",
                                width: 130,
                                filterable: {
                                    ui: cityFilter
                               }
                            },
                            {
                                field: "Title",
                                filterable: {
                                    ui: titleFilter
                                }
                            },
                            {
                                field: "BirthDate",
                                title: "Birth Date",
                                format: "{0:MM/dd/yyyy HH:mm tt}",
                                filterable: {
                                    ui: "datetimepicker"
                                }
                            }
                       ]
                    });
                });

                function titleFilter(element) {
                    element.kendoAutoComplete({
                        dataSource: titles
                    });
                }

                function cityFilter(element) {
                    element.kendoDropDownList({
                        dataSource: cities,
                        optionLabel: "--Select Value--"
                    });
                }

            </script>
        </div>


</body>
</html>

Upvotes: 0

OnaBai

Reputation: 40917

First, in the columns you say that the column name is Buyer but in that autocomplete you use buyer.

Said that, what you should do is generating the autocomplete in filterable.ui. So the column definition for buyer is:

{
    field     : "buyer",
    title     : "Buyer",
    width     : "40",
    filterable: {
        ui: function (element) {
            element.kendoAutoComplete({
                dataSource   : orders,
                dataTextField: "buyer"
            })
        }
    }
},

Upvotes: 2

kendo ui grid filter autocomplete

Answers (3)

Related Questions