FlexGridFilter DataMap Multiple Values

FlexGridFilter DataMap Multiple Values

Posted by: amakarenko on 24 January 2019, 12:16 pm EST

• 

  amakarenko

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 24 January 2019, 12:16 pm EST

  I would like Wijmo FlexGrid to render a many-to-many column using data map in an Angular app.

  For example:
  
  data: {name: string, countries: number|null};
  
  countries: {id: number, name: string};

  See full source code of the example:
  
  https://stackblitz.com/edit/angular-qfggmw

  The problem is that with data map, it works properly only when there us just 1 element in the array.

  Steps to reproduce:

  • Have a column that contains arrays of IDs
  • Have a data map that uses these IDs
  • Enable FlexGridFilter
  • Click the “filter” icon to open dropdown

  Result:

  • For cases when there is just 1 element in the array, the filter works as expected
  • When there are more than 1, the cell renders IDs instead of mapped values. The filter selection also renders the same and it does not distinguish individual elements from within array

  Expected: when using data map, take into account all elements of the nested array and filter should contain distinct individual values.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 25 January 2019, 3:19 am EST

  Hi Anton,

  The issue is arising because dataMap is designed to work only with one to one mapping and not with the arrays/collections. It is working for the array with single values because converting array to string results in a value which is available in the dataMap.
  
  ex:
  
  [1].toLocaleString() => returns ‘1’, which is available in the dataMap and hence it is mapped successfully.
  
  whereas
  
  [1, 2, 3].toLocaleString() => return ‘1,2,3’, which is not available in the dataMap and hence it is not mapped.

  What we could do here is instead of using dataMap, create an angular pipe to convert and display array values in the grid column, then assign an array of mapped values to uniqueValues property of the valueFilter so that it displays the mapped values in the filter instead of raw values and then finally assign a custom filter function to the grid’s collectionView so that it supports filtering over the array(since flexGrid filter doesn’t support filtering arrays as cell value).
  
  The downside with the above approach is that we won’t be able to export the filterDefinition to another grid/filter without overriding the filter function for the target grid as well.
  
  If it fits your requirement then please let us know if you would also like us to prepare a sample for you demonstrating the same.

  ~Sharad

• 

  amakarenko

  • Post Options:
  • Link
    Copy

  Posted 25 January 2019, 11:51 am EST

  Hi Sharad -

  Thank you for explanation. An example you offered would be much appreciated.

  I’m interested how one can manipulate the valueFilter and filterDefinition. As for Angular Pipe - I’m flexible about it, can just implement a custom cell template instead.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 28 January 2019, 1:39 am EST

  Please refer to the following sample and let us know if you face any issues:
  
  https://stackblitz.com/edit/angular-pgutqc?file=src%2Fapp%2Fapp.component.ts

• 

  amakarenko

  • Post Options:
  • Link
    Copy

  Posted 28 January 2019, 11:51 am EST

  Hi Sharad -

  Thank you, the code example you sent functions exactly as I need. Also I found your inline comments with API doc references very helpful.

• 

  amakarenko

  • Post Options:
  • Link
    Copy

  Posted 28 January 2019, 4:42 pm EST

  I optimized your example and implemented logic that takes into account blank values (or empty arrays).

  https://stackblitz.com/edit/angular-d46nua?file=src%2Fapp%2Fapp.component.html

  I don’t like that we have to set “display values” from the data map to the filter “unique values”, because the correct logic, in my opinion would be to use “key values” instead. According to API documentation, there is a “showValues” property (https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.filter.ValueFilter.Class.html#showValues). I tried using it, but the filter dropdown renders the uniqueValues anyway.

  Filtering by display value is not as straightforward, but will do for now.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 29 January 2019, 1:51 am EST

  Hi Anton,

  First, the sample looks great!! As for display values, unique values is actually the way to set up values shown in the value filter, we understand that the confusion is due to the showValues property. show values is used to set the value which needs to be displayed as selected values i.e.
  
  if we have set uniqueValues = [‘USA’, ‘India’, ‘Russia’] and we want that only ‘USA’ is displayed by default then we may set the showValues as
  
  {
  
  ‘USA’: true
  
  }
  
  and then the valueFilter will show only ‘USA’ as selected(Also, other values will be filtered out from the grid).
  
  Hope this clears the confusion. Please let us know if you still have any doubts.