kendo listView с флажком флажок вместе с опцией select all

Question

Я новичок в реализации пользовательского интерфейса kendo и ищу способ создания списка с флажком, причем самый первый флажок - All Option для выбора всех элементов в списке, если он установлен , Я создал шаблон, который позволяет мне добавить флажок к элементам, но мне нужно добавить флажок ALL поверх всех данных. это то, над чем я работал до сих пор. Ниже (скриншот) - это то, что я хотел бы достичь.

Вот мой шаблон:

<script type="text/x-kendo-tmpl" id="myTemplate"> 
    <div class="item click" data="${ProductID}"> 
     <input type="checkbox" class="click" /> 
     <span class="checkbox">#:ProductName#</span> 
    </div> 
</script> 

http://jsfiddle.net/Archie/w6jsZ/

Answer 1

Ваш код, кажется, как это: http://jsfiddle.net/Archie/w6jsZ/

<div style="width:250px;height:350px;overflow-y:scroll;"> 
    <div> 
     <input type="checkbox" id="checkall" class="click" /> 
     <span class="checkbox">All</span> 
    </div> 
    <div id="listView" class="k-listview" > 
    </div> 
</div> 
<script type="text/x-kendo-tmpl" id="myTemplate"> 

    <div class="item click" data="${ProductID}"> 
     <input type="checkbox" class="click" /> 
     <span class="checkbox">#:ProductName#</span> 
    </div> 
</script> 

$(document).ready(function() { 

    function checkboxEventBinding() 
    { 
     $('#checkall').bind('click',function(e){ 
      if(this.checked) 
      { 
       $('.item.click input').attr('checked','checked'); 
      } 
      else 
      { 
       $('.item.click input').removeAttr('checked'); 
      } 

     }) 
    } 
    var dataSource = new kendo.data.DataSource({ 
        transport: { 
         read: { 
         url: "http://demos.kendoui.com/service/Products", 
          dataType: "jsonp" 
         } 
       } 
       }); 
      $("#listView").kendoListView({ 
       dataSource: dataSource, 
       template: kendo.template($("#myTemplate").html()), 
       headertemplate:"<div class='item click' id='headerTemp' data='*'>  <input type='checkbox' class='click' /><span class='checkbox'>All</span></div>", 
       dataBound: function(e) { 
     checkboxEventBinding(); 
    } 
      }); 


     }); 

1. Вставьте флажок (для проверки всех) перед шаблоном кендо-списка
2. Когда пользователь лижет вход Check-all, будут проверены и другие входные данные.
3. Восстановите свое событие после данных перезаписи списка кендо.

// UPDATE

Чтобы получить значения флажка:

Убедитесь, что ваш список был обернут "form" тегом

<form id="frmChk"> 
    <div id="listView" class="k-listview" > 
    </div> 
</form> 

Всех input меток имеют same name

<script type="text/x-kendo-tmpl" id="myTemplate"> 
    <div class="item click" data="${ProductID}"> 
     <input type="checkbox" name="chkValue" value="${ProductID}" class="click" /> 
     <span class="checkbox">#:ProductName#</span> 
    </div> 
</script> 

Go получить значения, которые вы можете использовать метод сериализации из JQuery:

<script> 
    function getCheckedBoxValue() 
    { 
     $("#frmChk").serialize(); 
    } 
</script> 

Если вход:

<input type="checkbox" name="chkValue" value="Ikura1" class="click" /> 
<input type="checkbox" name="chkValue" value="Ikura2" class="click" /> 
<input type="checkbox" name="chkValue" value="Ikura3" class="click" /> 

При вызове getCheckedBoxValue, результат понравится:

chkValue=Ikura1,Ikura2,Ikura3 

Answer 2

Я думаю, что вы ищете древовидную структуру. Смотрите демо от кэндо

http://demos.kendoui.com/web/treeview/checkboxes.html