Как мы можем реализовать выбор All в Kendo MultiselectFor

Как мы можем реализовать выбранную опцию в Kendo Multiselect For?Как мы можем реализовать выбор All в Kendo MultiselectFor

 @(Html.Kendo().MultiSelectFor(model => model.TestData) 
        .DataTextField("DataText")       
        .DataValueField("DataValue") 
        .Placeholder("Select..") 
        .Events(e => e.DataBound("CheckIfEmpty"))       
        .AutoBind(false)       
        .Enable(false)             
        .DataSource(source => 
        { 
         source.Read(read => 
         { 
          read.Action("Action", "Controller").Data("filterData"); 
         })        
         .ServerFiltering(false); 
        }) 
        )

источник

2015-01-29 Jagadeeswararo

Не могли бы вы предоставить еще несколько деталей или кода? –

обновлен с кодом. – Jagadeeswararo

Пожалуйста, проверьте ниже фрагмент кода.

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

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css"> 

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script> 

</head> 
<body> 
    <div class="demo-section k-header"> 
     <select id="TestData" data-placeholder="Select movie..."></select> 
    </div> 
    <div> 
     <button type="button" onclick="SelectAllClick();">Select All</button> 
    </div> 
    <script> 
     $(document).ready(function() { 
      var data = [ 
      { text: "12 Angry Men", value: "1" }, 
      { text: "Il buono, il brutto, il cattivo.", value: "2" }, 
      { text: "Inception", value: "3" }, 
      { text: "One Flew Over the Cuckoo's Nest", value: "4" }, 
      { text: "Pulp Fiction", value: "5" }, 
      { text: "Schindler's List", value: "6" }, 
      { text: "The Dark Knight", value: "7" }, 
      { text: "The Godfather", value: "8" }, 
      { text: "The Godfather: Part II", value: "9" }, 
      { text: "The Shawshank Redemption", value: "10" }, 
      { text: "The Shawshank Redemption 2", value: "11" } 
      ]; 

      $("#TestData").kendoMultiSelect({ 
       dataTextField: "text", 
       dataValueField: "value", 
       dataSource: data 
      }); 

     }); 
     function SelectAllClick() { 
      var multiSelect = $("#TestData").data("kendoMultiSelect"); 
      var selectedValues = ""; 
      var strComma = ""; 
      for (var i = 0; i < multiSelect.dataSource.data().length; i++) { 
       var item = multiSelect.dataSource.data()[i]; 
       selectedValues += strComma + item.value; 
       strComma = ","; 
      } 
      multiSelect.value(selectedValues.split(",")); 
     } 

    </script> 
</body> 
</html>

Сообщите мне, если возникнут проблемы.

источник

2015-01-29 09:04:43

Кажется, это хороший Jayaesh, но как реализовать динамический источник данных. т.е. .DataSource (источник => { source.Read (читай => { read.Action ("Действие", "Controller") данных ("filterData");. }) .ServerFiltering (ложь); }) – Jagadeeswararo

Выше код обрабатывается для всех источников данных. Вам нужно добавить на свою страницу кнопку «SelectAllClick()» и «выбрать все». В функции я не использовал свои «данные» статического источника данных в любом месте внутри функции, поэтому он будет работать для всех типов источников данных. Кроме того, не имеет значения, что этот элемент управления создается MVC или PHP или JSP. –

Привет, Jayesh, выпуская с этим утверждением selectedValues + = strComma + item.value; здесь item.value отображается как undefined. – Jagadeeswararo

Что-то, как это должно работать:

<script> 
    $('#selectAll').click(function(){ 
     var ctl = $('#TestData').data('kendoMultiSelect'); 
     var opts = ctl.dataSource.data(); 
     var selected = []; 
     for (var idx = 0; idx < opts.length; idx++) { 
      selected.push(opts[idx].value); 
     } 
     ctl.value(selected); 
     }); 
</script>

Если вы используете что-то вроде underscore, я могу сделать это еще проще для вас сделать что-то вроде этого:

<script> 
    $('#selectAll').click(function(){ 
     var ctl = $('#TestData').data('kendoMultiSelect'); 
     var opts = ctl.dataSource.data(); 
     var selected = _.pluck(opts, 'value'); 

     ctl.value(selected); 
     }); 
</script>

источник

2015-01-29 15:58:25

Как мы можем реализовать выбор All в Kendo MultiselectFor

ответ

Смежные вопросы