Question

我是剑道新手并且正在尝试为Kendo网格列实现自定义编辑器，这是一个kendoAutoComplete。

我已成功地从后端获取数据，已将serverFiltering设置为true，但最终数据未被绑定。

以下是代码：

自定义编辑器实施：

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

来自后端的数据以这种方式出现：

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

请告诉我哪里出错了。

Answer 1

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

顺便说一下，你也必须启用serverFiltering。它是远程建议所必需的。

试试这个：

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

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

Answer 2

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

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

或简单地说：

data: "DATA"

您还应注意，由于您已将minLength设置为3，因此在您输入3个字符之前，它不会将请求发送到服务器以提供数据。

Answer 3

我很确定你的元素中的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()调用未显示，否则不会使用HTML元素上的data-*属性。这意味着您的data-bind="value: ..."未被使用，这就是您的价值未更新的原因。

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

遥控剑道自动完成不起作用

3 个答案: