jquery를 사용하여 Kendo 드롭 다운 목록에서 특정 드롭 다운 옵션을 제거하십시오.

Question

인터넷을 시도했지만 검색하려고했지만 정확한 답변을 찾지 못했습니다. 표준 발급 select 드롭 다운에서 항목을 제거하는 것은 매우 쉽습니다. 코드는 다음과 같습니다. $ ("# dropdownlistID option [value = 'optiontoremove']"). remove();

어떻게하면 Kendo Dropdownlist에서 $ ("# dropdownlistID") 데이터 ("kendoDropDownList")의 행을 따라 수행 할 수 있습니다. whateverhere.remove.

이미 특정 인덱스 위치의 항목을 제거하는 방법을 알려주지 만 특정 값의 옵션을 인덱스 위치로 제거하는 방법에 대한 대답은 제시하지 않은 답변이 이미 있습니다. 필요한 것은 예를 들어 검도 드롭 다운 목록에서 이러한 요소가 있다고 가정 해보십시오. "순양함"이라고 말하면서 옵션을 제거 (또는 숨기기)하는 방법은 무엇입니까?

select 
    option value="volvo" Volvo 
    option value="saab" Saab 
    option value="mercedes" Mercedes 
    option value="audi" Audi 
    option value="cruiser" Cruiser 
    option value="blah" blah 
    option value="blah2" blah2 
select 

Answer 1

검도 UI 바인딩 위젯은 add, insert 또는 remove 항목에 자신의 dataSource instances 'API를 사용합니다.

항목 색인을 하드 코딩하지 않으려면 ID를 통해 get을 하드 코딩하십시오. 이 작업을 위해, ID 필드는 위의 예는 모든 변경 사항은 클라이언트에서 발생한다는 것을 의미하는 CRUD operations의 검도 UI 데이터 소스를 구성하지 않는 schema.model.id

http://dojo.telerik.com/aFUGe

주에 정의되어야합니다 원격 서비스에 유지되지 않습니다.

DropDownList 데이터 항목에 ID가없는 경우 해당 값으로 항목을 찾는 유일한 방법은 data 메서드를 사용하여 모든 항목을 가져 와서 올바른 항목이 발견 될 때까지 반복하는 것입니다.

Answer 2

다음 코드 스 니펫으로 시도해보십시오.

<input id="color" style="width: 100%;" /> 
<input type="button" onclick="removeItem()" value="removeItem" /> 
........... 
........... 
<script> 
    $(document).ready(function() { 
     var data = [ 
        { text: "Volvo", value: "volvo" }, 
        { text: "Audi", value: "audi" }, 
        { text: "Cruiser", value: "cruiser" } 
     ]; 

     // create DropDownList from input HTML element 
     $("#color").kendoDropDownList({ 
      dataTextField: "text", 
      dataValueField: "value", 
      dataSource: data, 
     }); 


    }); 
    function removeItem() { 
     var ddl = $("#color").data("kendoDropDownList"); 
     var oldData = ddl.dataSource.data(); 
     var dataLength = oldData.length; 
     for (var i = 0; i < dataLength; i++) { 
      var item = oldData[i]; 
      if (item.value == "cruiser"){ // Here 'value' is 'dataValueField' field 
       ddl.dataSource.remove(item); 
       break; 
      } 
     } 
    } 
</script> 

우려되는 점이 있으면 알려주세요.

Answer 3

jQuery를 사용하여 드롭 다운 목록에서 특정 항목을 제거 할 필요가 없습니다.

Kendo DataSource 개체와 해당 MVVM 패턴을 사용하여 원하는 것을 얻을 수 있습니다.

는 다음과 같이 HTML은 다음과 같습니다

<input id='dropdownlist' data-role="dropdownlist" 
     data-text-field="ProductName" 
     data-value-field="ProductID" 
     data-bind="value: selectedProduct, 
        source: products" /> 

<button id="button" type="button">Remove current item</button> 

<br /> 

<input class='k-textbox' id='specificItem' /> 
<button id="removeSpecificButton" type="button">Remove specific item</button> 

를 그리고 자바 스크립트가 될 것입니다 :

http://dojo.telerik.com/@BenSmith/aCEXI/11

:

// Use a viewModel, so that any changes to the model are instantly applied to the view. 
// In this case the view is the dropdownlist. 
var viewModel = kendo.observable({ 
    selectedProduct: null, 

    products: new kendo.data.DataSource({ 
    transport: { 
     read: { 
     url: "//demos.telerik.com/kendo-ui/service/products", 
     dataType: "jsonp" 
     } 
    } 
    }) 
}); 

kendo.bind($("#dropdownlist"), viewModel); 

$("#removeSpecificButton").kendoButton({ 
    click: function(e) { 
    // Find the item specified in the text box 
    viewModel.products.filter({ 
         field: "ProductName", 
         operator: "eq", 
         value: $('#specificItem').val() }); 
    // Apply the view to find it 
    var view = viewModel.products.view(); 
    //remove the item from the datasource  
    viewModel.products.remove(view[0]); 
    // disable the filter 
    viewModel.products.filter({}); 
    } 
}); 

// Set-up the button so that when it is clicked 
// it determines what the currently selected dropdown item is 
// and then deletes it. 
$("#button").kendoButton({ 
    click: function(e) { 
    // Determine which item was clicked 
    var dropdownlist = $("#dropdownlist").data("kendoDropDownList"); 
    var dataItem = dropdownlist.dataItem(); 

    // Remove that item from the datasource 
    viewModel.products.remove(dataItem); 
    } 
}); 

내가 여기서 일이의 예를 작성했습니다 exac를 지정하기 위해 DataSource의 "필터"메소드가 사용 된 방법에 주목하십시오. (이 경우 ProductName)을 제거해야합니다. 항목을 제거한 후에는 더 이상 필요없는 항목없이 필터를 제거하여 데이터를 표시 할 수 있습니다.

또한 현재 선택한 항목을 완전하게 제거 할 수있는 기능이 포함되어 있습니다.