kendo-ui - 绑定到 odata 的 Kendo 组合框不查找值集的文本

Question

我有一个绑定到 odata 数据源的标准剑道网络组合框。如果您输入它并获得正确的文本和值，它看起来很好。

但是，如果您绑定了它，并且在代码中设置了 .value() 属性，则不会在文本中查找设置的值。（如果您正在加载现有数据，这是非常标准的行为）

我会假设它会转到服务器并通过 dataValueField 属性查找确切值并专门返回项目并设置文本。

我该如何让它做到这一点？

Answer 1

让我们有以下内容ComboBox：

var combobox = $("#combobox").kendoComboBox({
    dataTextField : "ProductName",
    dataValueField: "ProductID",
    dataSource    : {
        type     : "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Products"
        }
    }
}).data("kendoComboBox");

（您可以自己使用它，因为它指的是 Kendo UI 服务器中可用的服务）。

然后您可以使用以下代码来设置value或text（无论您喜欢什么）。

// Set value of the ComboBox using dataValueField (ProductId)
combobox.value(4);
// Set value of the ComboBox using dataTextField (ProductName)
combobox.text("Chef Anton's Cajun Seasoning");

对于阅读，您应该使用：

alert("Current text/value: " + combobox.text() + "/" + combobox.value());

这两种方法都可以正常工作，因为您可以在此处查看http://jsfiddle.net/OnaBai/64gXE/。

Answer 2

你必须真的把这个东西踢到**才能让它工作。有一百万种配置，其中只有少数似乎有效

WebAPI OData implementation (4.5) 和 Telerik Datasource 真的不能很好地结合在一起。这是我工作的客户端 ComboBox 实现：

$("#dropdownlist").kendoComboBox({
                    optionLabel: " ",
                    dataTextField: "name",
                    dataValueField: "id",
                    dataSource: {
                        serverFiltering: true,
                        transport: {
                            read: {
                                url: "/odata/MyService",
                                'type': 'Get'
                            }
                        },
                        schema: {
                            parse: (response: any) => {
                                var results = response.value;
                                var items: any = [];
                                for (var i = 0; i < results.length; i++) {
                                    items.push(
                                        {
                                            id: results[i].id,
                                            name: results[i].name,
                                        });
                                }
                                return items;
                            },
                        }
                    }
                });

你会注意到我必须在模式对象的 parse 方法中劫持数据并对其进行按摩

我的 OData 响应供参考：

Answer 3

重新绑定剑道组合框时遇到了这个问题。基本上我不得不重新查询服务器，就好像用户输入了它一样。然后，一旦查询完成，我就使用先前选择的值选择正确的项目。

var comboBoxElem = $("#controlNameHere");

comboBoxElem.kendoComboBox(
    {
        placeholder: "Start typing...",
        dataTextField: "yourDataTextField",     // field used in the re-query due to 'contains' filter
        dataValueField: "yourDataValueField",
        filter: "contains",
        change: selectFunc,
        dataSource: {
            serverFiltering: true,
            pageSize: 20,
            transport: {
                read: {
                    url: "http://yourUrlHere"
                }
            }
        }
    });


// the following code is all about re-selecting the previous value

var comboBox = comboBoxElem.data('kendoComboBox');

var previousTextValue = 'text of the previous entry here';
var previousValue = '543';

comboBox.text(previousTextValue);   // to show the user text while re-query takes place

// reload previous item(s) from server, then re-select the desired item

comboBox.dataSource.query({
    filter: { operator: "contains", field: 'yourDataTextField', value: previousTextValue },
    complete: function () {
        setTimeout(function () {
            comboBox.select(function (dataItem) {
                return dataItem.yourDataValueField == previousValue;
            });
        }, 200);  //allow the observable collection to be updated (no event I know of helps here :(
    }
});

希望这足够清楚，我已经修改了内联代码以保护无辜，因此可能存在最轻微的语法错误。

请记住，为简单起见，您在控件的选项（设置）中使用的过滤器应该与您用于重新查询的过滤器相同，否则您将获得多个过滤器通过服务器。