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

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

  • 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

  • Replied 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
  • Replied 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.
  • Marked as Answer

    Replied 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels