設置值后如何從 Kendo UI MultiColumnComboBox 中獲取選定的數據項？

Question

我有一個多列 combobox ，我正在以編程方式設置其值，然后嘗試獲取其選定的 ID 但無濟於事，不斷返回未定義。 我嘗試在設置值時觸發更改事件，然后嘗試獲取 ID，但也沒有用。

如果我手動 select 值並單擊獲取按鈕，則返回 dataItem。

 var CustomersList = [{ CustomerID: 1, Company: "ABC", FirstName: "Abe", LastName: "123" }, { CustomerID: 2, Company: "DEF", FirstName: "Bill", LastName: "456" }, { CustomerID: 3, Company: "GHI", FirstName: "Clint", LastName: "789" }, { CustomerID: 4, Company: "JKL", FirstName: "Donna", LastName: "012" }, { CustomerID: 5, Company: "MNO", FirstName: "Edith", LastName: "345" } ]; $(document).ready(function() { LoadDropDown(); }); $('#btnSet').on('click', function() { let customerMultiColumn = $('#CustomerDropDown').data("kendoMultiColumnComboBox"); customerMultiColumn.value('ABC'); }); $('#btnGet').on('click', function() { let customerMultiColumn = $('#CustomerDropDown').data("kendoMultiColumnComboBox"); console.log(customerMultiColumn.dataItem()); }); function LoadDropDown() { $("#CustomerDropDown").empty(); $("#CustomerDropDown").kendoMultiColumnComboBox({ placeholder: "Select Customer...", dataTextField: "Company", dataValueField: "CustomerID", height: 300, columns: [{ field: "CustomerID", title: "CustomerID", hidden: true }, { field: "Company", title: "Company", width: 200 }, { field: "FirstName", title: "First", width: 200 }, { field: "LastName", title: "Last", width: 200 } ], footerTemplate: "#: instance.dataSource.total() # Customers Found", filter: "contains", filterFields: ["Company", "FirstName", "LastName"], dataSource: { data: CustomersList }, change: function() { }, select: function(e) { } }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css" /> <script src="https://kendo.cdn.telerik.com/2020.1.406/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script> <div id="CustomerDropDown"></div> <button id="btnSet">Set</button> <button id="btnGet">Get</button>

Answer 1

事實上，這是一種奇怪的行為。 我嘗試了您的示例，如果您使用.select()而不是.dataItem() ，它將返回-1 。 就像根本沒有在內部選擇任何項目一樣。 但是.value()返回之前由.value('ABC')選擇的值。 非常混亂。

但是，我設法讓它與.select方法一起使用，與您使用字符串非常相似：

 var CustomersList = [{ CustomerID: 1, Company: "ABC", FirstName: "Abe", LastName: "123" }, { CustomerID: 2, Company: "DEF", FirstName: "Bill", LastName: "456" }, { CustomerID: 3, Company: "GHI", FirstName: "Clint", LastName: "789" }, { CustomerID: 4, Company: "JKL", FirstName: "Donna", LastName: "012" }, { CustomerID: 5, Company: "MNO", FirstName: "Edith", LastName: "345" } ]; $(document).ready(function() { LoadDropDown(); }); $('#btnSet').on('click', function() { let customerMultiColumn = $('#CustomerDropDown').data("kendoMultiColumnComboBox"); customerMultiColumn.select(function(dataItem) { return dataItem.Company === "ABC"; }); }); $('#btnGet').on('click', function() { let customerMultiColumn = $('#CustomerDropDown').data("kendoMultiColumnComboBox"); console.log(customerMultiColumn.dataItem()); }); function LoadDropDown() { $("#CustomerDropDown").empty(); $("#CustomerDropDown").kendoMultiColumnComboBox({ placeholder: "Select Customer...", dataTextField: "Company", dataValueField: "CustomerID", height: 300, columns: [{ field: "CustomerID", title: "CustomerID", hidden: true }, { field: "Company", title: "Company", width: 200 }, { field: "FirstName", title: "First", width: 200 }, { field: "LastName", title: "Last", width: 200 } ], footerTemplate: "#: instance.dataSource.total() # Customers Found", filter: "contains", filterFields: ["Company", "FirstName", "LastName"], dataSource: { data: CustomersList }, change: function() { }, select: function(e) { } }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css" /> <script src="https://kendo.cdn.telerik.com/2020.1.406/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script> <div id="CustomerDropDown"></div> <button id="btnSet">Set</button> <button id="btnGet">Get</button>

我知道，它不像您那樣使用.value("ABC")那樣優雅，我同意您的觀點，它應該可以工作。 但誰知道為什么沒有。 獲得答案的一種方法是在 Kendo 論壇上發布此問題。