Async load collection for editors

Hello, I have next workflow: Getting data for collection is deferred. How can I organize properly load of grid?

next tries didn’t work: (I tried to re-init grid after filling collection)

 this.dataService.getStatuses().subscribe(data => {
       this.columns[0].editor.collection = data.map(item => ({ label: item.desc, value: item.id }))
       // this.grid.gridService.resetGrid(this.columns);
       this.grid.gridService.init(this.grid.slickGrid, this.dataset);
 }, this.handleError);

[ghiscoding]

@asdman384 @YadavAvinashK I started some work to address this, it’s a work in progress but I have the proof of concept working (not entirely tested though). You can provide feedback now before I push the code. I currently only worked on the Filter but the Editor will behave exactly the same.

Step 1 - use a new asyncCollection property

I created a new property named asyncCollection which accepts an Observable/Subject, so typically you would simply pass an HttpClient Observable. Also note that when you use asyncCollection, the other collection property can be omitted (however note the library itself will still use the collection property). So the code could look like the following

this.columnDefinitions = [
{ 
  id: 'duration', name: 'Duration', field: 'duration', 
  filter: {
    asyncCollection: this.http.get('/api/durations'),
    model: Filters.multipleSelect,

    // add a collection sort if you wish, for demo let's sort DESC
    collectionSortBy: {
        property: 'value',
        sortDesc: true,
        fieldType: FieldType.number
    },
  }
}

Step 2 - how to refresh the Filter / Editor collection?

If you want to refresh or change the collection used by the Filter or Editor, you can still use the collection which will always contain the latest array used by the Filter/Editor (basically every time the async resolves, the lib updates the collection property). However, there’s a slight problem, I could not find a way to simply watch the collection (like $watchCollection in AngularJS), so in order for the lib to know there’s a change, the only way I found is by triggering a next on the Observable. So the code looks like the following

  addItem() {
    // add a new row to the grid
    const lastRowIndex = this.dataset.length;
    const newRows = this.mockData(1, lastRowIndex);
    this.angularGrid.gridService.addItemToDatagrid(newRows[0]);

    // refresh the MultipleSelect Filter of the "Duration" column
    const durationColumnDef = this.columnDefinitions.find((column: Column) => column.id === 'duration');
    if (durationColumnDef) {
      const asyncCollection = durationColumnDef.filter.asyncCollection;
      const collection = durationColumnDef.filter.collection;
      if (Array.isArray(collection)) {
        // you can use the "collection" to know what was the last array used by the Filter/Editor
        // so if we add the new value to the collection
        collection.push({ value: lastRowIndex, label: lastRowIndex });

        // trigger a change for the Observable/Subject of the async collection
        // I wish that I could get rid of this line and only watch the "collection" change
        // but for now, that is the way I got it to work
        if (asyncCollection instanceof Subject) {
          asyncCollection.next(collection);
        }
      }
    }
  }

If someone knows how to do the same as $watchCollection like we had in AngularJS, please let me know and provide a solution on the SO question, which got down voted 😦 I would really like to get rid of the extra asyncCollection.next(collection) call.

Also note that I did the proof of concept only locally with setTimeout and a Subject which is not an HttpClient call but it should work the same, see below for a quick demo. Below, I’m adding 2 new rows which will add 2 new options to the filter (500 & 501).

[ghiscoding]

This feature is now available in version 1.4.0

If you haven’t yet voted, please do ⭐️ Cheers