如何在项目选择上保持打开 Kendo 下拉列表答案

【问题标题】：How to Keep Open Kendo DropdownList on Item selection如何在项目选择上保持打开 Kendo 下拉列表
【发布时间】：2015-01-03 11:01:39
【问题描述】：

我在 Web 应用程序中有 KendoDropdownlist

 @(Html.Kendo().DropDownList()
        .HtmlAttributes(new { @style = "width: 200px;" })
        .Name("cbStatusFilter" + i)
        .DataTextField("Name")
        .DataValueField("Id")
        .TemplateId("tpStatusFilter")
        .BindTo((System.Collections.Generic.IEnumerable<dynamic>)ViewData["statuses"])
         .Events(c => c.Select("cbFilter_Select").Close("cbFilter_Close"))
    )

模板如下

<script type="text/x-kendo-template" id="tpStatusFilter">
    <input type="checkbox" id="#= Name #" name="#= Name #" value="#= Id #" class="check-input-status" #=selected ? "checked" :"" # />
    <label for="#= Name #">#= Name #</label>
</script>

当使用下拉列表中的选择项时，下拉列表会关闭。但我想保持打开状态并想在单击其他控件时关闭我怎样才能实现它？谢谢

【问题讨论】：

标签： html kendo-ui kendo-dropdown

【解决方案1】：

可以做到，但它基于对下拉菜单的 JavaScript 编写方式的了解。如果 Kendo 重新编写 JavaScript（此时值得怀疑），这个答案可能不起作用。

如果您查看该函数的源代码，您会看到在 onChange 事件中，Kendo 下拉代码将切换下拉项目的可见性。知道了这一点，您可以通过在下面的 sn-p 中添加对 jQuery 的 .hide()function. See the call tocolor.hide()` 的调用来“欺骗”代码执行您想要的操作。现在，当 Kendo 控件的 onChange 事件触发时，切换可见性现在将显示列表。

控件在失去焦点时会自动关闭列表，因此您不必担心。

var color = $("#color").data("kendoDropDownList");
function onChange() {
      var value = $("#color").val();
      color.hide();
      $("#cap")

此代码基于http://demos.telerik.com/kendo-ui/dropdownlist/index，仅在 Chrome 中测试过。

$(document).ready(function() {
	debugger;
	var data = [{
	  text: "Black",
	  value: "1"
	}, {
	  text: "Orange",
	  value: "2"
	}, {
	  text: "Grey",
	  value: "3"
	}];

	// create DropDownList from input HTML element
	var color = $("#color").kendoDropDownList({
	  dataTextField: "text",
	  dataValueField: "value",
	  dataSource: data,
	  index: 0,
	  change: onChange
	});

	// create DropDownList from select HTML element
	$("#size").kendoDropDownList();

    // IMPORTANT
    // save pointer to actual kendo control.
    // This is required to make the call to the .hide() 
    // function work correctly.
	var color = $("#color").data("kendoDropDownList");

	color.select(0);
	var size = $("#size").data("kendoDropDownList");

	function onChange() {
	  var value = $("#color").val();
	  color.hide();
	  $("#cap")
		.toggleClass("black-cap", value == 1)
		.toggleClass("orange-cap", value == 2)
		.toggleClass("grey-cap", value == 3);

	};

	$("#get").click(function() {
	  alert('Thank you! Your Choice is:\n\nColor ID: ' + color.value() + ' and Size: ' + size.value());
	});

  });

<html>

<head>
  <base href="http://demos.telerik.com/kendo-ui/dropdownlist/index">
  <style>
    html {
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
  <title></title>
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

  <script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
  <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>

<body>

  <div id="example">
    <div id="cap-view" class="demo-section k-header">
      <h2>Customize your Kendo Cap</h2>
      <div id="cap" class="black-cap"></div>
      <div id="options">
        <h3>Cap Color</h3>
        <input id="color" value="1" />

        <h3>Cap Size</h3>
        <select id="size">
          <option>S - 6 3/4"</option>
          <option>M - 7 1/4"</option>
          <option>L - 7 1/8"</option>
          <option>XL - 7 5/8"</option>
        </select>

        <button class="k-button" id="get">Customize</button>
      </div>
    </div>
    <style scoped>
      .demo-section {
        width: 460px;
        height: 300px;
      }
      .demo-section h2 {
        text-transform: uppercase;
        font-size: 1em;
        margin-bottom: 30px;
      }
      #cap {
        float: left;
        width: 242px;
        height: 225px;
        margin: 20px 30px 30px 0;
        background-image: url('../content/web/dropdownlist/cap.png');
        background-repeat: no-repeat;
        background-color: transparent;
      }
      .black-cap {
        background-position: 0 0;
      }
      .grey-cap {
        background-position: 0 -225px;
      }
      .orange-cap {
        background-position: 0 -450px;
      }
      #options {
        padding: 1px 0 30px 30px;
      }
      #options h3 {
        font-size: 1em;
        font-weight: bold;
        margin: 25px 0 8px 0;
      }
      #get {
        margin-top: 25px;
      }
    </style>


  </div>


</body>

</html>

【讨论】：

【解决方案2】：

您还可以使用事件计数:: 我使用的剑道略有不同，因此您可能需要对其进行修改以适应您的使用方式。

<input id="dropdown" k-keepOpen/>

然后工作::

$("#dropdown").kendoDropDownList({
keepOpen:$("#dropdown")[0].hasAttribute("k-keepOpen"),//this will turn it on and off by your element
preventCloseCnt:0,//this is used for managing the event
select:function(e){ this.preventCloseCnt=2;},//set the counter to bypass closing
close:function(e){
  if(this.keepOpen && this.preventCloseCnt >0 ){//now the next time something tries to close it will work ( unless it's a change )
  e.preventDefault();
  this.preventCloseCnt--;
  }
}
});

【讨论】：