How to manipulate checkboxes in virtual lists?


I want to make select-all , deselect-all, and, doActions for selected items with lists.

With normal lists, select-all can be done like:
$(“input[type=checkbox]”) .prop(‘checked’, true);

With virtual lists, is there a way to check all boxes?


Virtual List renders items when its visible.

renderItem : function (item) {
   if (item.checked){
       return '<checkbox checked="checked">...';
   }else {
       return '<checkbox>...';

But if cache=true CHECKBOX can cached, need:


1 Like

Hi. thank you for your reply,.

I use itemTemplate instead of renderItem.

cache is true, it’s default for me.

I have 8 thousand items.

I tried calling virtualList.update(); It has no effect.

$(".virtual-list li").length => 32
Object.keys( virtualList.domCache ).length => is how many items I have seen them.

I’ve figured out what you mean.

I need to make my virtual checked array.

I’ll post the solution after I have made the change successfully.

methods: {
    this.myItems.forEach( d=>d.checked=true );

    let $virtualList = this.$el.find('.virtual-list');

    this.virtualList = app.virtualList.create({
   	  el: $virtualList,
      items: this.myItems,
      cache: false,
      itemTemplate: `
  <input type="checkbox" data-id="{{id}}"  {{#if checked}}checked{{/if}} />

    let myItems = this.myItems;
    $virtualList.on('change', 'input[type=checkbox]', function(){
      let item_id = $(this).attr("data-id");
      let item = myItems.find( i=> );
      item.checked = $(this).checked;