第一次选择时的 DevExtreme DropDownBox 问题已更改答案

【问题标题】：DevExtreme DropDownBox Problem on First Selection Changed第一次选择时的 DevExtreme DropDownBox 问题已更改
【发布时间】：2019-01-31 20:14:43
【问题描述】：

我一直在学习使用 DevExteme HTML 5 小部件。我遵循了代码示例 here，但数据来自远程 API。

代码是：

let containerForRemoteObjectDropDown = document.createElement("div");

var dropOptions4 = {
  value: 10409,
  valueExpr: "orderId",
  valueExpr: "shipCountry",
  dataSource: {
    store: AspNetData.createStore({
      loadUrl: "https://localhost:44341/nwind/orders",
      key: "orderId"
    }),
    sort: "shipCountry",
    paginate: true,
    pageSize: 100 // group
  },
  contentTemplate: function(e) {
    let divForGrid = document.createElement("div");
    var grid = new DataGrid(divForGrid, {
      dataSource: e.component.option("dataSource"),
      columns: ["orderId", "shipCountry"],
      height: 265,
      selection: { mode: "single" },
      selectedRowKeys: [selectedValue],
      onSelectionChanged: function(selectedItems) {
        var keys = selectedItems.selectedRowKeys,
          hasSelection = keys.length;
        e.component.option("value", hasSelection ? keys[0] : null);
        e.component.close();
      }
    });
    return divForGrid;
  }
};

container.appendChild(containerForRemoteObjectDropDown);

let remoteDatadropDownInstance = new DropDownBox(
  containerForRemoteObjectDropDown,
  dropOptions4
);

问题是，当您第一次单击 DropDownBox 时，onSelectionChanged 事件会触发并且小部件的下拉部分会关闭。这意味着当您实际选择喜欢的项目时会发生这种情况，而不是当您单击小部件以首先调用控件的下拉部分时。

这是它的动画 gif：

有人知道我做错了什么吗？

【问题讨论】：

标签： devextreme

【解决方案1】：

集成下拉菜单时我遇到了相同的问题。与此代码相同 https://js.devexpress.com/Demos/WidgetsGallery/Demo/DropDownBox/SingleSelection/jQuery/Light/

从 api 调用绑定数据时的这个阶段，而不是静态 js 文件。然后我在下面做了一些更改。

【讨论】：

【解决方案2】：

从 api 调用绑定数据时的这个阶段，而不是静态 js 文件。然后我在下面做了一些更改。

【讨论】：