设置值后如何从 Kendo UI MultiColumnComboBox 中获取选定的数据项？

Question

我有一个多列组合框，我正在以编程方式设置其值，然后尝试获取其选定的 ID 但无济于事，不断返回未定义。我曾尝试在设置值时触发更改事件，然后尝试获取 ID，但也没有用。

如果我手动选择值并单击获取按钮，则返回 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 论坛上发布此问题。