javascript - 设置值后如何从 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>

标签： javascriptjquerykendo-uikendo-combobox

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 论坛上发布此问题。