How to manipulate checkboxes in virtual lists?

Questions
1

Hi,

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?

Thanks!

2

Virtual List renders items when its visible.

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

But if cache=true CHECKBOX can cached, need:

virtualList.update();

1 Like
4

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.

5

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.

6 
methods: {
  selectAll(){
    this.myItems.forEach( d=>d.checked=true );
    this.virtualList.update();
  }
},

on:{
  pageInit(){
    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=>i.id==item_id );
      item.checked = $(this).checked;
    });

  },

},