javascript jquery kendo-ui kendo-combobox

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

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>

Solution

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.