[SOLVED] Angular Slickgrid - Load singleselect editor collection based on grid data

Angular Slickgrid - Load singleselect editor collection based on grid data

I am working on the angular-slickgrid(2.18.7) where the grid has inline singleselect dropdown editor. I want to display the dropdown values based on table data of each row item.

{
      id: 'status', name: 'Status', field: 'status',
      sortable: true,
      filterable: true,
      editor: {
        model: Editors.singleSelect,
        collection: // dynamic collection items,
      }
}

the first row of status:'odd' column editor.collection values are,

<select>
    <option value='1'>1</option>
    <option value='3'>3</option>
    <option value='5'>5</option>
</select>

the second row of status:'even' column editor.collection values are,

<select>
    <option value='2'>2</option>
    <option value='4'>4</option>
    <option value='6'>6</option>
</select>

I have to populate the editor.collection values dynamically based on the value of status column of each row item.

Is there a way to make a callback function to set the editor.collection dynamically?

It would be grateful if someone helps on this.

Solution

You can use the collectionAsync as demoed in the Example - Client and see the code and the Wiki - Select Filter with CollectionAsync. There's a lot of info in the Wikis, I suggest you to go through them.

To filter the collection you can use filterBy as documented in the Wiki - collection-filterby/sortby but you cannot filter dynamically (afterward) because it must be set only once, you might be able to push a new collection by using collectionAsync but it's not ideal, it wasn't meant for that intent. The other possibility might be to use the Filters.autoComplete