0

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.

4

3 回答 3

2

您需要将 option.field 设置为输入名称，它将自动绑定。

顺便说一句，您也必须启用 serverFiltering。远程建议需要它。

试试这个：

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

...     
dataSource: new kendo.data.DataSource({
                serverFiltering: true,
                transport: {
...
于 2015-03-03T15:26:22.163 回答
0

我很确定data-bind="value:..在这种情况下你的元素中的元素不会做任何事情，因为你的元素不受 MVVM 约束。

程序化小部件初始化.kendoAutoComplete和 MVVM 声明式初始化在 Kendo 中是非常不同的东西，并且不会像这样混合在一起。

您可能希望使用change自动完成上的事件来获取用户输入的值。

你可以尝试这样的事情：

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

或者你可以做整个 MVVM 的事情，而不是像这样：

$('<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);

除非kendo.bind()您的代码中的其他地方有未显示的调用，否则data-*不会使用 HTML 元素上的属性。这意味着您data-bind="value: ..."没有被使用，这就是您的价值没有更新的原因。

如果没有 MVVM 绑定（通过调用来启用kendo.bind()），您需要在自己周围移动值，这就是为什么我.value()在第一个代码示例中使用调用来获取和设置值的原因。

于 2014-10-30T23:07:47.480 回答
0

鉴于您的数据位于名为DATA（大写）的元素中，您的schema.data函数应为：

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

或者简单地说：

data: "DATA"

您还应该注意，由于您已设置minLength为3, 在您键入3字符之前，它不会将请求发送到服务器以获取数据。

于 2014-10-30T21:52:23.933 回答