Filter on column with array type values not working in wijmo flex grid

Posted by: vinay.thakoor on 12 June 2020, 1:19 am EST

  • Posted 12 June 2020, 1:19 am EST

    I have a column that has comma-separated values. When I apply a filter on a column I get results from API which I assign to item source. But I can only see rows in grid that have only single values. comma-separated values not showing in the grid. But when applying a filter on other columns I can see the expected result.

    this is how I assign data to item source


    itemsource: CollectionView = new CollectionView();
    this.itemsource.sourceCollection = data;


    I tried using grid refresh with


    this.notifications.refresh();
    this.notifications.invalidate();


    or assigning data again like


    this.notifications = new CollectionView(data, {
    refreshOnEdit: false
    });

    but I am not able to fix this problem.
    I am assigning the same data from API when I apply a filter on other columns. How to solve this problem?
  • Replied 14 June 2020, 5:31 pm EST

    Hi Vinay,

    Can you please provide a small sample replicating the issue? It would be really helpful for us to investigate the issue using the sample.

    Also, can you let us know what is [b]this.notifications[b]? Is it the grid itself or the source of the grid? In the second snippet, you are calling the invalidate method using this, which is only present in the grid. So, it seems like this is an instance of the grid. But, in the last code snippet, you are assigning a CollectionView to it.

    In the first code snippet, you have assigned the sourceCollection to the itemsSource. After setting the sourceCollection, you also need to refresh the view:
    itemsSource.sourceCollection = data;
    itemsSource.refresh()

    Regards,
    Ashwin
  • Replied 14 June 2020, 9:31 pm EST

    Sorry it is my mistake
    this.notification
    is item source.
    And I tried to invalidate the grid using grid instance.

    I didn't found any option to edit my question like available for comment.
  • Replied 15 June 2020, 6:26 pm EST

    Hi Vinay,

    Please refer to the sample link below:

    https://stackblitz.com/edit/js-4o9rb8

    Can you please modify the sample so that it replicates your issue?

    ~regards
  • Replied 21 June 2020, 8:28 pm EST

    Hi Ashwin,

    I updated sample code will you check this link?
    https://stackblitz.com/edit/js-uhhvvt

    When I apply a filter on the 'id' column result showing right but for the 'country' column after assigning data to item source result is not showing in grid.
  • Replied 22 June 2020, 6:19 pm EST

    Hi Vinay,

    It seems that your issue is related to the value filter of country column. If you deselect some values, all of the values are hidden. As per our understanding, you need to display those items in which the country column contains the selected values of the value filter.
    For example, if Germany is selected and the country data is US,Germany,India, you need to display this item.

    If this is your requirement, then you will need to override the apply method of the the value filter and pass the values that are selected. Please refer to the updated sample link below:

    https://stackblitz.com/edit/js-6ufrpf

    Let us know if this was your issue.

    ~regards
  • Replied 24 June 2020, 6:25 pm EST

    Hi Ashwin,

    Your solution worked thanks a lot. but there is one issue after applying a filter on the column. In my grid one form opens on row double click using which I can update row data, not column values. After save in my grid again values which are comma-separated not showing.

    I tried to call again filter apply method for the column but it's not working. can you help me with this?
  • Replied 25 June 2020, 6:41 pm EST

    Hi Vinay,

    Can you please provide some more information, like how are you updating the row values?
    Also, if the filter is applied, as soon as you will edit the values, it will be filtered out. After updating the values, clear the filter and check whether the row is updated.

    If you could modify the above sample, then it would be easier for us to investigate.

    ~regards
  • Replied 29 June 2020, 5:30 pm EST

    Hi Vinay,

    It seems that the showValues are not being set properly in the populateFilterInfo method. You are initializing the appliedFilter variable after assigning the new uniqueValues. Can you modify the code like this:
    const appliedFilter = JSON.parse(filter.filterDefinition);
    this.getDistinct(....);
    _.forEach(...);
    // ....

    Let us know whether this works. If it does not, can you please modify the sample above so that it replicates the issue?

    ~regards
  • Replied 19 August 2020, 11:38 pm EST

    Hi Ashwin,

    I am able to reproduce the issue. Please check this sample code https://stackblitz.com/edit/js-uhhvvt. If UK is selected result is showing right. On double click I reassign applied filter to show values in populate filter method. I need to apply filter again because after double click on row one form is open which update row data. Unique values passed to filter change after row update. But because of that comma separated values not showing.
  • Marked as Answer

    Replied 20 August 2020, 3:30 pm EST

    Hi Vinay,

    When you apply the filterDefinition, each filter in the filterDefintion is recreated. So, the new country filter will have the original apply method instead of our custom one. To resolve this, simply set the custom apply method again. Please refer to the updated sample link below:

    https://stackblitz.com/edit/js-4gxkwz

    ~regards
  • Replied 14 September 2020, 6:18 pm EST

    Thanks, Ashwin! The sample you provided above works great! My issue is fixed. Thanks again.

    Regards,
    Vinay
Need extra support?

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

Learn More

Forum Channels