Show Value in a cell which is not present in dropdown

Posted by: srish123ti on 8 June 2021, 8:04 pm EST

  • Posted 8 June 2021, 8:04 pm EST

    Hi ,

    I’m facing an issue where when i load data into the grid, some values of the cells are not present in there respective dropdowns but i still want to display those values in the cells.

    
    totalCities = ['A', 'B', 'C', 'D'];
    data = [
        { name: 'a', city: ['E'] },
        { name: 'b', city: ['B'] },
        { name: 'c', city: ['A'] },
        { name: 'd', city: ['F'] },
        { name: 'e', city: ['C'] },
        { name: 'f', city: ['D'] },
        { name: 'i', city: ['B'] }
      ];
    
    

    So in the data I have 6 unique cities present but in the totalCitites( which the dropdown collection for the City Column) i have only 4 citites. Now i want to display those (‘E’, ‘F’) values also on the grid in the City column having totalCities dropdown.(So initially it wouldn’t have any checked value)

    How can i achieve this.

    Snippet of the above issue -

    https://stackblitz.com/edit/angular-ivy-5gpwgn?file=src/app/app.component.ts

    Please provide solution for the same.

    Thank You.

  • Posted 9 June 2021, 4:44 pm EST

    Hi,

    Can you please Provide solution for this.

    Regards,

    Srishti

  • Posted 9 June 2021, 10:53 pm EST

    Hi,

    Multiselect only displays the values present in its source, to display the item which is not present in the source what you could do is set the item as placeholder, in this way if no item is selected then the placeholder value will be displayed. You may refer to the following updated sample:

    https://stackblitz.com/edit/angular-ivy-fpgtdi?file=src/app/app.component.ts

    Regards

    Sharad

  • Posted 10 June 2021, 3:48 pm EST

    Hi,

    Is there any other solution instead of using a placeholder. It’s fine if the value gets cleared on a click of a dropdown if it is not available in the list.

    Please Provide us a solution asap as it is a part of our POC of wijmo Grid.

    Regards,

    Srishti

  • Posted 13 June 2021, 3:27 pm EST

    Hi,

    Can you please help me with the solution.

    Thank you.

  • Posted 13 June 2021, 7:07 pm EST

    Hi Srishti,

    If you do not wish to use a placeholder, then you can manually set the value of the input element of the multiselect:

    https://stackblitz.com/edit/angular-ivy-dz6hhz

    Refer to line 72-75 in app.component.ts

    Regards,

    Ashwin

Need extra support?

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

Learn More

Forum Channels