Kendo UI tags input

Question

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

http://demos.telerik.com/kendo-ui/multiselect/tag-mode

Я попытался AutoComplete. Он позволяет вводить запятую, но не имеет CSS тегов с близким значком для каждого тега.

Управление в this page - это то, что мне нужно. Но для ASP.net AJAX. Я не мог найти аналогичный пример для jQuery

Почему такой распространенный сценарий настолько расстраивает, что он реализуется в пользовательском интерфейсе Kendo?

Answer 1

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

http://dojo.telerik.com/orePO

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

Важный кусок вот этот бит:

function addTag(widgetId, value) { 
     var widget = $('#' + widgetId).getKendoMultiSelect(); 
     var dataSource = widget.dataSource; 
     var item = { ProductID: 0, ProductName: value }; 
     dataSource.add(item); 
     widget.value(widget.value().concat([item.Value])); 

     dataSource.one("requestEnd", function(args) { 
        if (args.type !== "create") { 
         return; 
        } 

        var newValue = args.response[0].ProductID; 

        dataSource.one("sync", function() { 
         widget.value(widget.value().concat([newValue])); 
        }); 
       }); 

       dataSource.sync(); 



     var values = widget.dataItems(); 

     updateTagList(values); 


     return; 

    } 

Эта функция вызывается из NoDataTemplate шаблона, который определяется здесь:

<script id="noDataTemplate" type="text/x-kendo-tmpl"> 
     <div> 
      No data found. Do you want to add new item - '#: instance.input.val() #' ? 
     </div> 
     <br /> 
     <button class="k-button" onclick="addTag('#: instance.element[0].id #', '#: instance.input.val() #')">Add new item</button> 
    </script> 

Таким образом, когда пользователь вводит что-то, что не найден он предложит пользователю добавить элемент в коллекцию.

Я затем добавил некоторые сценарии, чтобы показать тег внизу в списке (только так вы можете видеть, что они добавлены. Поэтому я не буду вдаваться в том, что здесь.)

Я также настроил управление скрыть все теги под одним элементом tag, чтобы multiselect не произрастал неожиданно. Это можно изменить с помощью опции tagMode для мультиселектора.

Пожалуйста, обратите внимание, что эта опция только присутствует с 2016 Q3 (из памяти)

Если вам нужно что-нибудь еще объяснить/расширения на пожалуйста, дайте мне знать.

Также смотрите демо-версию для этой функции: http://demos.telerik.com/kendo-ui/multiselect/addnewitem