FlexGridFilter Multiple Values AngularJS 1.x

FlexGridFilter Multiple Values AngularJS 1.x

Posted by: amakarenko on 16 September 2019, 4:39 pm EST

• 

  amakarenko

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 16 September 2019, 4:39 pm EST

  Code example to reproduce the problem: https://stackblitz.com/edit/angularjs-a3othp?file=home%2Fhome.controller.js

  Expected: column “Items” to contain only the values I explicitly set to the uniqueValues of the filter object.

  Actual: the column contains all possible combinations inferred from the original collection, ignoring the fact that I set uniqueValues.

  Some context:

  I needed to implement a grid column with data map, capable of displaying multiple values (array), as well as filtering by distinct value. If the sought value is contained in the array, it satisfies search criteria.

  I implemented it for Angular 7.x some time ago - see this original thread: https://www.grapecity.com/forums/wijmo/flexgridfilter-datamap-mul

  Now I’m porting it down to a legacy AngularJS (1.x) app and faced a different kind of problem. The data is loaded asynchronously (I emulated a 100ms delay) and CollectionView object is created only after data is obtained. Looks like it resets the list of available values in the filter.

  To work around it, I enclosed the entire thing into an ng-if (see template home/home.html) - uncomment the div and see how the “Items” column will have the desired options.

  Is this a bug? What would you recommend?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 17 September 2019, 1:09 am EST

  Hi Anton,

  The issue is arising because when you assign a new CollectionView object as the itemsSource, the columns are regenerated and the uniqueValues are gone. to avoid this issue, you may create an empty CollectionView object and assign the data as its sourceCollection property. Please refer to the code snippet and the updated sample below:

  this.cv = new CollectionView();
  _load() {
  	/ * other code */
  	this.cv.sourceCollection = data;
  }
  

  https://stackblitz.com/edit/angularjs-lnyekd

  Regards,
  
  Ashwin

• 

  amakarenko

  • Post Options:
  • Link
    Copy

  Posted 18 September 2019, 3:21 pm EST

  Hi, Ashwin -

  It worked, thank you. I can use this approach in similar situations.