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

Chris 发表于 Dev

克里斯

我有一个多列组合框，正在以编程方式设置其值，然后尝试获取其选定的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>

不要投票

实际上，多数民众赞成在一个奇怪的行为。我尝试了您的示例，如果使用.select()代替.dataItem()，它将返回-1。就像没有内部选择任何项目一样。但是.value()返回以前由选择的值.value('ABC')。很混乱。

但是，我设法.select使用一个字符串，使其以与您非常相似的方式与method一起使用：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。