Preselect values in multi-select/single select dropdown of Wijmo Grid

Preselect values in multi-select/single select dropdown of Wijmo Grid

Posted by: technical.store.technical on 20 May 2021, 10:35 pm EST

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 May 2021, 10:35 pm EST

  Hi,

  We are doing some POC on Wijmo grid as per our requirements.
  
  As we are new to this grid we are facing issues with following points:-

  1. Need to show ‘All’ instead of ‘Select All’ in multi-select dropdown for which we are using: wijmo.culture.MultiSelectListBox.selectAll = ‘All’;
     
     but it shows some error.

  2. On table load, if pre-selected value is ‘All’ then it should select all the dropdown elements to be checked and should display ‘ALL’ instead of element list on UI input box of dropdown

  3. We are not able to Preselect values in multi-select/single select dropdown (as per table column values)

  It would be good if you can help us ASAP.

  Code Link - https://stackblitz.com/edit/angular-boxqxf?file=src/app/app.component.ts

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 21 May 2021, 12:11 am EST

  Hi,

  I have updated the sample according to your requirements:

  https://stackblitz.com/edit/angular-bmqesb

  1. This was happening because you were using an older version of Wijmo which does not have a MultiSelectListBox. I have updated it to the latest version and it is working as expected.

  2. The first requirement can be fulfilled but I would not recommend it because in order to achieve this, we will need to remove the two-way binding of the MultiSelect with the FlexGrid cell and we will need to handle the updating of the cell’s data manually.
     
     The second requirement can be done by using the ternary operator with headerFormat as I suggested in your previous post.

  3. This can be fulfilled by using two-way binding with selectedItem property in ComboBox and checkedItems property in MultiSelect. The CellEdit template provides a cell.value variable which can be updated to update the cell’s value.

  Note that I’ve updated the sample to use the CellEdit template instead of the Cell template. It will provide a better way to update the bound value and will also remove unnecessary ComboBoxes and MultiSelects(which can lead to slower performance of the grid when the data is large). The CellEdit template will only display the required control on the current cell being edited thereby increasing the performance.

  Let me know if this helps.

  Regards,
  
  Ashwin

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 23 May 2021, 3:30 pm EST

  Hi Ashwin,

  Thanks for the answer.
  
  For Point 2 , ‘ALL’ selection is not working fine when we select all the dropdown list elements , on UI it shows comma separated values instead of ‘ALL’ word.

  https://stackblitz.com/edit/angular-7gzhwz?file=src/app/app.component.html
  

  Now ,in the above code ,I’ve changed last row of table to collection instead of ALL word. But ALL word doesn’t show on UI. Please help us with the solution.

  Thank You.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 24 May 2021, 12:20 am EST

  I am sorry for the misunderstanding. I thought your requirement is to only display the All keyword in MultiSelect.
  
  For displaying All in FlexGrid, you can use the cell templates with the cellType to Cell. You can check whether the all items are selected or some items are selected and then display the keyword accordingly. Please refer to the sample link below for reference:

  https://stackblitz.com/edit/angular-y5qja5

  ~regards