首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何停止关闭剑道MultiColumnDropDown,直到完成选择项目?

问如何停止关闭剑道MultiColumnDropDown,直到完成选择项目?
EN

Stack Overflow用户
提问于 2020-07-03 21:43:24
回答 1查看 286关注 0票数 0

我有一个Kendo MultiColumnDropDown,它有2列,一列是复选框,另一列是数据。

每次我选中一个复选框,然后下拉框关闭,我不希望发生这种情况,直到我自己关闭它,我不知道如何停止select事件或停止下拉框关闭,直到我关闭它。

​

代码语言:javascript
复制
$(document).ready(function() {
  LoadMCDD(MCDDData());
});

function LoadMCDD(ds) {
  let a = ds[0].DropData;
  let arr = a.split('|');
  let obj = [];

  for (let i = 0; i < arr.length; i++) {
    obj.push({
      DropData: arr[i]
    });
  }

  $('#MCDDForPrompt').empty();
  $('#MCDDForPrompt').kendoMultiColumnComboBox({
    placeholder: "Select...",
    dataTextField: "DropData",
    dataValueField: "DropData",
    height: 300,
    autoClose: false,
    columns: [{
        template: "<center><input type='checkbox' class='checkbox' /></center>",
        width: "30px"
      },
      {
        field: "DropData",
        title: "Data",
        width: 200
      }
    ],
    dataSource: {
      data: obj,
    },
    change: function(e) {
      //console.log(e);
    },
    select: function(e) {
      //console.log(e);
    }
  });
}


function MCDDData() {
  let ds = [{
    Answer: "",
    DefaultAnswer: "",
    DropData: "Check 1|Check 2|Check 3|Check 4",
  }];

  return ds;
}
代码语言:javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.bootstrap.min.css" />

<div id="MCDDForPrompt" style="width:400px"></div>

​

EN

回答 1

Stack Overflow用户

发布于 2020-07-06 19:36:52

试试这个:

代码语言:javascript
复制
select: function(e) {
  e.sender.element.data('fromSelect', true);
},
close: function(e) {
  if (e.sender.element.data('fromSelect')) {
    e.preventDefault();
    e.sender.element.data('fromSelect', null);
  }
}

​

代码语言:javascript
复制
$(document).ready(function() {
  LoadMCDD(MCDDData());
});

function LoadMCDD(ds) {
  let a = ds[0].DropData;
  let arr = a.split('|');
  let obj = [];

  for (let i = 0; i < arr.length; i++) {
    obj.push({
      DropData: arr[i]
    });
  }

  $('#MCDDForPrompt').empty();
  $('#MCDDForPrompt').kendoMultiColumnComboBox({
    placeholder: "Select...",
    dataTextField: "DropData",
    dataValueField: "DropData",
    height: 300,
    autoClose: false,
    columns: [{
        template: "<center><input type='checkbox' class='checkbox' /></center>",
        width: "30px"
      },
      {
        field: "DropData",
        title: "Data",
        width: 200
      }
    ],
    dataSource: {
      data: obj,
    },
    select: function(e) {
      e.sender.element.data('fromSelect', true);
    },
    close: function(e) {
      if (e.sender.element.data('fromSelect')) {
        e.preventDefault();
        e.sender.element.data('fromSelect', null);
      }
    }
  });
}


function MCDDData() {
  let ds = [{
    Answer: "",
    DefaultAnswer: "",
    DropData: "Check 1|Check 2|Check 3|Check 4",
  }];

  return ds;
}
代码语言:javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.bootstrap.min.css" />

<div id="MCDDForPrompt" style="width:400px"></div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62716705

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档