Как оставить раскрывающийся список кендо открытым при выборе предмета

У меня есть 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
person ghanshyam.mirani    schedule 03.01.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Это можно сделать, но это основано на знании того, как написан JavaScript для раскрывающегося списка. Если Кендо перепишет JavaScript (сомнительно на данный момент), этот ответ может не сработать.

Если вы посмотрите на исходный код функции, вы увидите, что в событии onChange раскрывающийся код Kendo переключает видимость раскрывающихся элементов. Зная это, вы можете «обмануть» код, заставив его делать то, что вам нужно, добавив вызов jQuery .hide()function. See the call tocolor.hide()` в приведенном ниже фрагменте кода. Теперь, когда срабатывает событие 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>

person photo_tom    schedule 03.01.2015

arrow_upward
0
arrow_downward

вы также можете использовать количество событий: Я использую кендо немного по-другому, поэтому вам может потребоваться изменить его, чтобы он соответствовал тому, как вы его используете.

<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--;
  }
}
});
person shiftlessatol    schedule 28.10.2016