[设置值后如何从Kendo UI MultiColumnComboBox中获取选定的dataItem？

Question

我有一个多列组合框，我正在以编程方式设置其值，然后尝试获取其选定的ID，但无济于事，一直返回未定义状态。我尝试过在设置值时触发change事件，然后尝试获取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论坛上。