New to Kendo UI for jQuery? Download free 30-day trial

Use AutoComplete as Custom Column Editor

Environment

Product Progress Kendo UI Grid for jQuery Progress Kendo UI AutoComplete for jQuery
Operating System Windows 10 64bit
Preferred Language JavaScript

Description

How can I use the Kendo UI AutoComplete as a custom column editor for the Kendo UI Grid for jQuery?

Solution

The following example demonstrates how to use the AutoComplete as a custom column editor of the Grid.

The AutoComplete works with a single data item field. This means that the selected value is directly set to the model field. If you want to work with <value,text> pairs, use the ComboBox, DropDownList, or MultiSelect.

<div id="grid"></div>
<h4>Change = <span id="grid-change"></span></h4>
<script>
$(document).ready(function () {

    var traderListDataSource = new kendo.data.DataSource({
        data: [{
            userName: "Fred",
            userUrl: "user.webapi.url/Fred"
        }, {
            userName: "Bert",
            userUrl: "user.webapi.url/Bert"
        }, {
            userName: "Frank",
            userUrl: "user.webapi.url/Frank"
        }, {
            userName: "Ginger",
            userUrl: "user.webapi.url/Ginger"
        }],
        schema: {
            model: {
                id: "url",
                fields: {
                    url: {
                        type: "string"
                    },
                    userName: {
                        type: "string"
                    }
                }
            }
        }
    });

    function userNameComboBoxEditor(container, options) {
        $('<input required data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoComboBox({
                dataSource: traderListDataSource,
                dataTextField: "userName",
                dataValueField: "userUrl"
            });
    }

    function userNameAutoCompleteEditor(container, options) {
        $('<input required data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoAutoComplete({
            dataSource: traderListDataSource,
            dataTextField: "userName",
            filter: "contains",
            minLength: 1
        });
    }

    var gridDataSource = new kendo.data.DataSource({
        data: [{
            user: {
                userName: "Fred",
                userUrl: "user.webapi.url/Fred"
            },
            productName: "ProductA",
            productUrl: "product.webapi.url/ProductA",
            amount: 123
        }, {
            user: {
                userName: "Bert",
                userUrl: "user.webapi.url/Bert"
            },
            productName: "ProductB",
            productUrl: "product.webapi.url/ProductB",
            amount: 456
        }, {
            user: {
                userName: "Bing",
                userUrl: "user.webapi.url/Bing"
            },
            productName: "ProductC",
            productUrl: "product.webapi.url/ProductC",
            amount: 456
        }],
        schema: {
            model: {
                fields: {
                    productName: {
                        type: "string"
                    },
                    amount: {
                        type: "number"
                    }
                }
            }
        },
        change: function (e) {
            var message = "userName " + e.items[0].user.userName + " userUrl " + e.items[0].user.userUrl;
            $("#grid-change").html(message);
        }
    });

    var grid = $("#grid").kendoGrid({
        editable: true,
        dataSource: gridDataSource,
        columns: [{
            field: "user",
            template: "#:user.userName#",
            title: "User Name",
            //editor: userNameComboBoxEditor
            editor: userNameAutoCompleteEditor
        }, {
            field: "productName",
            title: "Product Name"
        }, {
            field: "amount"
        }]
    }).data("kendoGrid");
});
</script>

See Also

In this article