Search code examples
filterkendo-uidatasourcekendo-grid

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.


Solution

  • 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"
                })
            }
        }
    },