Удалить конкретную возможность выпадающего списка из раскрывающегося списка Kendo с помощью jquery

Question

Я попытался найти в Интернете, пытаясь понять это, но до сих пор не нашел точного ответа. Удаление элемента из стандартного выпадающего списка выбора довольно просто, код: $ ("# dropdownlistID option [value = 'optiontoremove']"). Remove();

Как сделать это с Kendo Dropdownlist, что-то вдоль строк $ ("# dropdownlistID"). Data ("kendoDropDownList"). Anyhere.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 виджеты используют с привязкой к данным их dataSource instances 'API для add, insert или remove пунктов.

Если вы не хотите жестко закодировать индекс предмета, то get его идентификатор. Для этого, чтобы работать, поле идентификатор должен быть определен в schema.model.id

http://dojo.telerik.com/aFUGe

Следует отметить, что приведенный выше пример не настроить Кендо UI DataSource для CRUD operations, что означает, что все изменения будут происходить только на клиенте, и не сохраняться в удаленной службе.

Если у ваших элементов данных DropDownList нет идентификатора, то единственным способом найти элемент по его значению является получение всех элементов с помощью метода 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> 

И ваш JavaScript будет:

// 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); 
    } 
}); 

Я написал пример этого рабочего здесь:

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

Обратите внимание, как метод «фильтра» DataSource использовался для указания exac t (в этом случае ProductName) для удаления. После удаления элемента фильтр можно удалить, чтобы отобразить данные без ненужного элемента.

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