Блог

Главная - Вопросы по программированию - Пользовательский интерфейс Kendo (jquery) Выпадающий список — не показывать выбранную опцию в раскрывающемся списке

Пользовательский интерфейс Kendo (jquery) Выпадающий список — не показывать выбранную опцию в раскрывающемся списке

#jquery #kendo-ui #telerik-grid

Вопрос:

Я хочу скрыть выбранный элемент в раскрывающемся списке.

 let data = [
      { id: 1, name: "Apples", isDeleted: false},
      { id: 3, name: "Mangoes", isDeleted: false},
      { id: 2, name: "Grapes", isDeleted: false},
      { id: 5, name: "Papaya", isDeleted: false},
      { id: 4, name: "Banana", isDeleted: false}
    ]
  $("#dropdownlist").kendoDropDownList({
    dataSource: data.filter(item=> item.id != 2),
    dataTextField: "name",
    dataValueField: "id",
    select: function(e){ },
    template: kendo.template($("#template").html())
  });

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

 ...
 select: function(e){
      console.log(e);
      e.preventDefault();
      let selectedItemId = e.dataItem.id;
      let selectedItemName = e.dataItem.name;
      e.sender.dataSource.data(data.filter(item => item.id!=2 amp;amp; item.id != selectedItemId));
      
      e.sender.text(selectedItemName);
      e.sender.value(selectedItemId);
          
      e.sender.value() // this will return empty!!!
 },
 ...

Ответ №1:

Нет необходимости удалять элемент из источника данных. Просто скройте все, что выбрано. Эта идея основана на этой статье.

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI DropDownList Example</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
</head>
<body>
  
<input id="dropdownlist" style="width: 400px" />
<script>
    $(document).ready(function() {
        $("#dropdownlist").kendoDropDownList({
            dataTextField: "name",
            dataValueField: "id",
            dataSource: {
                data: [
                    { id: 1, name: "Apples" },
                    { id: 3, name: "Mangoes" },
                    { id: 2, name: "Grapes" },
                    { id: 5, name: "Papaya" },
                    { id: 4, name: "Banana" }
                ],
                
            },
            open: function(e) {
              var index = e.sender.select();
              var items = e.sender.items();
              for (var a = 0; a < items.length; a  ) { 
                $(items[a]).show();
              }
              $(items[index]).hide();
            }
        });
    });
</script>

</body>
</html>
Метки: