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

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

• 

  vinay.thakoor

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  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?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  vinay.thakoor

  • Post Options:
  • Link
    Copy

  Posted 14 June 2020, 9:31 pm EST

  Sorry it is my mistake ```
  
  this.notification

  And I tried to invalidate the grid using grid instance.
  
  I didn't found any option to edit my question like available for comment.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  vinay.thakoor

  • Post Options:
  • Link
    Copy

  Posted 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.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  vinay.thakoor

  • Post Options:
  • Link
    Copy

  Posted 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?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  vinay.thakoor

  • Post Options:
  • Link
    Copy

  Posted 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.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  vinay.thakoor

  • Post Options:
  • Link
    Copy

  Posted 14 September 2020, 6:18 pm EST

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

  Regards,
  
  Vinay