How to get selected dataItem from Kendo UI MultiColumnComboBox after setting its value?

Question

I have a multicolumn combobox that I am programmatically setting its value, then trying to get its selected ID but to no avail, keeps coming back as undefined. I have tried triggering the change event when setting the value and then trying to get the ID but didn't work either.

If I manually select the value and click the get button then the dataItem is returned.

 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

In fact, thats a strange behaviour. I tried your example and if you use .select() instead of .dataItem() , it returns -1 . Its like if no item is selected internally at all. But .value() returns the value previously selected by .value('ABC') . Very confusing.

However, I managed to get it to work with .select method, in a very similar way you did, using a string:

 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>

I know, its not as elegant as using .value("ABC") like you did and I agree with you that it should work. But who knows why it doesn't. A way to get the answer is to post this issue on Kendo Forums.