Kendo Combo Box Set Значение по умолчанию

Question

У меня есть комбинированная коробка kendo с двумя записями, скажем, «Thing 1» и «Thing 2». Я хочу установить «Thing 1» по умолчанию.

Есть ли предпочтительный способ сделать это? Я не могу найти его, хотя я установил атрибут placeholder для «Thing 1», и он сработал. Документация Kendo гласит, что placeholder - это «подсказка, отображаемая виджетами, когда она пуста». Не задано по умолчанию ». Я неправильно использую местозаполнитель?

Answer 1

Атрибут optionLabel (который, я считаю, вы называете заполнителем) используется для указания текста, не представляющего выбора. Когда это выбрано из списка, выбранный элемент имеет значение null, поэтому это неправильное решение для установки значения по умолчанию, если вы не хотите, чтобы выбор по умолчанию был null. Выбор может быть установлен программно, вызывая метод select() на экземпляре виджета. Следующие, например, установят выделение на «Thing1».

<div id="dropdownlist"></div> 

<script type="text/javascript"> 
    $("#dropdownlist").kendoDropDownList({ 
     dataSource: [ 
       'Thing1', 
       'Thing2', 
       'Thing3' 
      ], 
      optionLabel: "None" 
    }); 

    $("#dropdownlist").data("kendoDropDownList").select(1); 
</script> 

Стоит отметить, что это не единственный способ достичь этого. В приведенном выше примере используется синтаксис Imperative (JQuery) для объявления выпадающего списка. Если вы используете обертки сервера ASP.NET MVC, есть атрибут значения, которое вы можете установить в объявлении, например:

.Value("1") 

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

Answer 2

<script> 

     $(function() { 

      var data = [ 
       { text: "12 Angry Men", value: "1" }, 
       { text: "Il buono, il brutto, il cattivo.", value: "2" }, 
       { text: "Inception", value: "3" }, 
       { text: "One Flew Over the Cuckoo's Nest", value: "4" }, 
       { text: "Pulp Fiction", value: "5" }, 
       { text: "Schindler's List", value: "6" }, 
       { text: "The Dark Knight", value: "7" }, 
       { text: "The Godfather", value: "8" }, 
       { text: "The Godfather: Part II", value: "9" }, 
       { text: "The Shawshank Redemption", value: "10" }, 
       { text: "The Shawshank Redemption 2", value: "11" } 
      ]; 

      $("#movies").kendoComboBox({ 
       dataTextField: "text", 
       dataValueField: "value", 
       dataSource: data, 

      }); 
      let combobox = $("#movies").data("kendoComboBox");//This "instantiates it" 
      combobox.value("The Godfather"); 


     }); 

    </script> 

<input id="movies" /> 

Результат: