검도 UI 태그 입력

Question

태그를 입력하려면 간단한 입력이 필요합니다. MultiSelect에서 임시 입력을 허용하지 않습니다. 이미 드롭 다운에서 사용할 수있는 항목 만 선택할 수 있습니다.

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

나는 AutoComplete을 시도했다. 쉼표로 구분 된 입력을 허용하지만 각 태그에 대한 닫기 아이콘이있는 태그의 CSS는 없습니다.

this page의 컨트롤이 필요합니다. 그러나 ASP.net AJAX를위한 그것의. jQuery에 대한 비슷한 예제를 찾을 수 없습니다.

왜 이렇게 일반적인 시나리오가 검도 UI에서 구현하는 데 실망합니까?

Answer 1

나는 비슷한 달성하기 위해 수행 한 몇 가지 코드를 기반으로 샘플 도장을 준비했습니다 :

http://dojo.telerik.com/orePO

여기에 떨어져가는이 많이 있습니다. 그러나 본질적으로 이것은 기존의 "태그"목록을로드 할 것이고 입력 된 값이 발견되지 않으면 사용자에게 그것을 컬렉션에 추가하라는 메시지를 표시합니다. 사용자 유형 뭔가가 발견되지 않는 것을 그래서

<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> 

:

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 템플릿이라고 정의된다 :

여기서 중요한 부분은이 비트입니다 사용자가 컬렉션에 항목을 추가하라는 메시지를 표시합니다.

나는 또한에 컨트롤을 구성한 그때 목록에 아래의 태그를 보여 일부 스크립트를 추가 한

(당신이 그 (것)들을 추가되는 것을 볼 수 있습니다 만, 그래서. 그래서 여기에로 가지 않을 것이다.)

하나의 tag 요소 아래에있는 모든 태그를 숨겨서 다중 선택이 예기치 않게 커지지 않도록하십시오. multiselect에 대한 tagMode 옵션을 통해 변경할 수 있습니다.

은 알려 주시기 바랍니다에 확대/설명 다른 작업을해야하는 경우이 옵션은 (메모리에서) 2016 Q3

부터 존재하고있다 있습니다.

또한이 기능이 데모를 참조하십시오 http://demos.telerik.com/kendo-ui/multiselect/addnewitem