Wijmo Listbox limit the rows to 5

Wijmo Listbox limit the rows to 5

Posted by: sneha.nagaruru on 11 December 2020, 9:44 am EST

• 

  sneha.nagaruru

  • Post Options:
  • Link
    Copy

  Posted 11 December 2020, 9:44 am EST - Updated 3 October 2022, 3:04 pm EST

  Hello Team,

  I working on Wijmo Grid Column Picker aka Wijmo ListBox with checkboxes.

  I have requirement where I need to load the items vertically ↓ and also limit the number of rows to 5 and can have N number of columns and as per the existing ListBox functionality the items are loaded horizontally →.

  I’m dynamically getting the data which will be sorted in ascending order and then binding it to Listbox so won’t be able to fulfill the above mentioned requirements.

  I’m using Angular 9 with Typescript, Can you please help me with this issue.

  

  1000×420 26.9 KB

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 16 December 2020, 4:19 am EST

  Hi,

  You can try using Format Event handler of the Column Picker to hide the items.

  ngOnInit() {
  
  
         if(this.columnPicker)
         {
              this.columnPicker.formatItem.addHandler((s:ListBox, e: FormatItemEventArgs) => {
               
              if(e.index>11)
              {
                e.item.innerHTML="<div style='display:none'>"+e.item.innerHTML+"</div>"               
              }
             
             });
         }
  }
  
  

  I have attached a sample as well, which hides the ListItems if they are more than 12.
  
  Grid_Columns_ColumnPicker_Angular_Hide.zip