Question

我在网络应用程序中有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>

当使用从下拉列表中选择项目时，下拉列表会关闭。但我想保持它打开，并希望关闭时，我点击其他控件我怎样才能实现它？感谢

Answer 1

你也可以使用事件计数:: 我使用的kendo略有不同，因此您可能需要修改它以适应您使用它的方式。

<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--;
  }
}
});

Answer 2

可以这样做，但它基于如何编写下拉列表的JavaScript的知识。如果Kendo重写了JavaScript（此时可疑），这个答案可能无效。

如果查看该函数的源代码，您会看到在onChange事件中，Kendo下拉代码将切换下拉项的可见性。知道了这一点，你可以通过在下面的代码片段中添加对jQuery的.hide（）function. See the call to color.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>

如何在项目选择上保持打开Kendo DropdownList

2 个答案: