Multi-Select with ALL option in Wijmo-grid

Multi-Select with ALL option in Wijmo-grid

Posted by: technical.store.technical on 11 May 2021, 5:35 pm EST

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 May 2021, 5:35 pm EST

  Hi,

  Please help me with the below issue.

  1. RoleArray = [‘1’, ‘2’, ‘3’];
     
     Html Code -
     
     <wj-flex-grid-column [header]=“‘role’” [binding]=“‘roleArray’”>
     
     

              <wj-multi-select [placeholder]="'Select Role"
              [headerFormat]="'{count:n0 == 3} ALL'"
              [showSelectAllCheckbox]="showSelectAllCheckbox"
              [itemsSource]="'RoleArray'">
              </wj-multi-select>
          </ng-template>
      </wj-flex-grid-column>
     

  I’m trying to implement multiselect with all option. In my array, I have 3 values, if I select all of them , I need to show ‘ALL’ in the cell instead of selected value list (1,2,3).
  
  As of now with above code, I’m getting error for [headerFormat]=“‘{count:n0 == 3} ALL’” .

  2. How to show ‘ALL’ in dropdown instead of ‘Select ALL’.
• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 16 May 2021, 10:43 pm EST

  Can you please help for solution?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 17 May 2021, 3:49 pm EST

  Hi,

  We are extremely sorry for the delayed response.

  For your first query, you can use the ternary operator to set the headerFormat according to the checkedItems:

  
  <wj-multi-select #theMultiSelect [placeholder]="'Select Role"
  [headerFormat]="theMultiSelect.checkedItems.length === RoleArray.length ? 'All' : '{count:n0}'"
  [showSelectAllCheckbox]="showSelectAllCheckbox"
  [itemsSource]="'RoleArray'">
  </wj-multi-select>
  </ng-template>
  </wj-flex-grid-column>
  
  

  For your second requirement, you can use the culture object of Wijmo. Add the below line of code in the main module file of your application (generally app.module.ts)

  import * as wijmo from '@grapecity/wijmo';
  
  wijmo.culture.MultiSelectListBox.selectAll = 'All';
  

  PS: For wijmo related queries, please post on the Wijmo forums (https://www.grapecity.com/forums/wijmo)

  Regards,
  
  Ashwin