Remote Kendo Auto Complete not working

Question

I am new to kendo and was trying to implement a custom editor for a Kendo grid column, which is a kendoAutoComplete.

I was successfully able to get the data from the backend, having enabled serverFiltering to true, but ultimately the data is not getting binded.

Here is the code:

Custom Editor Implementation:

$('<input class="auto-mat" data-value-field="MAT" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoAutoComplete({
                autobind: true,
                suggest: true,
                filter: "contains",
                minLength: 3,
                dataTextField: "DES",
                dataValueField: "MAT",
                dataSource: new kendo.data.DataSource({
                    //serverFiltering: true,
                    transport: {
                        read: {
                            dataType: "odata",
                            url: utils.serverURL() + '&event=SEARCH&field=' + options.field,
                            data: {
                                value: function(){
                                    return $('.auto-mat .k-input').data('kendoAutoComplete').value();
                                }
                            }                                
                        }                           

                    },
                    schema: {
                        data: function (response) {                                
                            return response.data;
                        }
                    }
                })
            });

And the data from the backend comes in this manner:

{"DATA":[{"MAT":"111","DES":"COAL"},{"MAT":"222","DES":"TEXT1"}]}

Please tell me where I am going wrong.

Answer 1

You need to set option.field as input name and it will be automatically binded.

Btw, you must to enable serverFiltering too. it's required for remote suggestions.

Try this one:

$('<input class="auto-mat" data-value-field="MAT" name="'+ options.field + '"/>...

...     
dataSource: new kendo.data.DataSource({
                serverFiltering: true,
                transport: {
...

Answer 2

I'm pretty sure that the data-bind="value:.. in your element will do nothing in this case because your element is not MVVM bound.

Programatic widget initialization with .kendoAutoComplete and MVVM declarative initialization are very different things in Kendo, and don't really mix like this.

You probably want to use the change event on the autocomplete to get the value a user entered.

---

You could try something like this:

var _value = "Some Value";

var _autoCompleteWidget = $('<input class="auto-mat" />')
        .appendTo(container)
        .kendoAutoComplete({
            autobind: true,
            suggest: true,
            filter: "contains",
            minLength: 3,
            dataTextField: "DES",
            dataValueField: "MAT",
            dataSource: new kendo.data.DataSource({
                //serverFiltering: true,
                transport: {
                    read: {
                        dataType: "odata",
                        url: utils.serverURL() + '&event=SEARCH&field=' + options.field,
                        data: {
                            value: function(){
                                return $('.auto-mat .k-input').data('kendoAutoComplete').value();
                            }
                        }                                
                    }                           

                },
                schema: {
                    data: function (response) {                                
                        return response.data;
                    }
                }
            }),
            change: function (changeEvent) {
                _value = this.value(); // get new value from autocomplete
            }
        }).data("kendoAutoComplete");

_autoCompleteWidget.value(_value); // set initial value

or you could do the entire thing MVVM, which would instead be something like:

$('<input class="auto-mat" data-role="autocomplete" data-suggest="true" data-filter="contains" data-min-length="3" data-text-field="DES" data-value-field="MAT" data-bind="source: dataSource, value: value" />')
    .appendTo(container);

var viewModel = kendo.observable({
    value: "Some Value",
    dataSource: new kendo.data.DataSource({
                //serverFiltering: true,
                transport: {
                    read: {
                        dataType: "odata",
                        url: utils.serverURL() + '&event=SEARCH&field=' + options.field,
                        data: {
                            value: function(){
                                return $('.auto-mat .k-input').data('kendoAutoComplete').value();
                            }
                        }                                
                    }                           

                },
                schema: {
                    data: function (response) {                                
                        return response.data;
                    }
                }
            })
});

kendo.bind(container, viewModel);

---

Unless there was a kendo.bind() call somewhere else in your code that wasn't shown, then the data-* attributes on the HTML element aren't used. That means that your data-bind="value: ..." was not being used, which would be why your value was not updating.

Without the MVVM binding (enabled by the call to kendo.bind()) you need to move values around yourself, which is why I use the calls to .value() to get and set the values in the first code example.

Answer 3

Given that your data is in an element called DATA (uppercase), your schema.data function should be:

data: function (response) {                                
    return response.data;
}

or simply:

data: "DATA"

You should also note that since you have set minLength to 3, until you type 3 characters it will not send the request to the server for bringing the data.