Angular slickgrid dynamic editor collection by every row data

Question

This is my slickgrid dataset

[{title : 'foo', prerequisites : true}, {title : 'bar', prerequisites : false}]

These are my column definitions:

[
     {
        id: "title",
        name: "Title", 
        field: "title"
     },  
     {
        id: 'prerequisites', name: 'Prerequisites', field: 'prerequisites',
        type: FieldType.string,
        editor: {
          model: Editors.multipleSelect,
          collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }]
        }
      }]

This creates a static editor dropdown for every row in the prerequisites column.

But what I want is to have, that the dropdown doesn't have the true option in the row where the title is foo

In other words, I want to hide some options in case of some selected rows, based on another column's value in the corresponding row.

Sadly you can't do that with current version, I mean you can filter the `collection` as shown in this [Wiki](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Select-Filter#collection-filterbysortby) but that is the entire collection of every row on a Filter/Editor and is cannot be changed dynamically. The only 2 options you have would be to 1) create a Custom Editor (maybe extend current select editor) or 2) contribute to the library... note that I'm the author of Angular-Slickgrid — ghiscoding, Dec 23 '20 at 05:38
There is now a new option to do that in the latest version `2.25.0` of Angular-Slickgrid via `collectionOverride`, see the updated answer below. You can also upvote the answer and the lib ;) — ghiscoding, Jan 06 '21 at 17:57

score 0 · Answer 1 · answered Dec 20 '20 at 07:06

0

Your 'multipleSelect' editor has an Init event. This is where you should select the values for the select list.

The editor is instantiated from the grid with a lot of info in the args var in the constructor. Here is the grid code to instantiate the editor:

  currentEditor = new useEditor({
    grid: self,
    gridPosition: absBox($container[0]),
    position: absBox(activeCellNode),
    container: activeCellNode,
    column: columnDef,
    columnMetaData: columnMetaData,
    item: item || {},
    event: e,
    commitChanges: commitEditAndSetFocus,
    cancelChanges: cancelEditAndSetFocus
  });

Your init event can test the current row of the grid (args.item) and provide row values for the editor lookup.

answered Dec 20 '20 at 07:06

Ben McIntyre

1,972
17
28

what is useEditor? – Akshita Agrawal Dec 21 '20 at 15:08
Also, I need to have all functionalities of 'multipleSelect' and want to just add this feature. Is that possible somehow? – Akshita Agrawal Dec 21 '20 at 15:10
The code shown above is internal to ```slickgrid.js``` - I just wanted to show the ```args``` object that gets passed to the editor constructor. I am assuming you have already got a multipleSelect editor working. The changes will need to be made to that editor. Perhaps you could add the editor code to your question. – Ben McIntyre Dec 23 '20 at 00:21

ghiscoding · Accepted Answer · 2021-01-06T17:57:12.520

EDIT

With the latest version 2.25.0 of Angular-Slickgrid (see here), we now have an option to override the collection right from the column definitions as asked in the original question. There's also a new Wiki - Collection Override

For example you can now do this

this.columnDefinitions = [
  {
    id: 'prerequisites', name: 'Prerequisites', field: 'prerequisites',
    type: FieldType.string,
    editor: {
      model: Editors.multipleSelect,
      collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }]
        },
      collectionOverride: (finalCollection, args) => {
        console.log(args); 
        if (args.dataContext.title === 'foo') {
          return finalCollection.filter((col) => col.value !== true);
        }
        return finalCollection;
      },
    }
  }
];

Also note that all the Editors, Filters and Formatters are now Public so that it's easier to extend from, e.g. export class CustomSelectEditor extends SelectEditor

Original Answer Select Editor/Filter was never built with dynamic collection and access to the item dataContext in mind but similar to the other SO Answer I gave to your other SO Question, you can again extend the Select Editor and override the filterCollection() function, which is called just before renderDomElement() and that is the best place to override the output collection before it is passed to the renderDomElement(inputCollection) function

Note that I did not test the code below but I expect the concept to work, I'm not sure if SelectEditor is actually public, if it's not then try to extend Editors.singleSelect and Editors.multipleSelect

Try first to extend SelectEditor directly (I think they are not currently public and that won't work, but I'll probably change that in future version)

import { SelectEditor } from 'angular-slickgrid';

export class CustomSelectEditor extends SelectEditor {
  constructor(protected args: EditorArguments, protected isMultipleSelect) {
    super(args, true);
  }

  protected filterCollection(): any[] {
    const activeCell: { row: number; cell: number; } = this.grid.getActiveCell();
    const dataContext = this.grid.getDataItem(activeCell.row);
    // your custom logic
    // const customCollection = ...
    return customCollection;
  }
}

or Editors.singleSelect if SelectEditor is not publicly available and if that is the way to go, then you'll also have to extend Editors.multipleSelect OR create 1 Custom Editor and pass true for multiple or false for single in the super(args, true) call

import { Editors } from 'angular-slickgrid';

export class CustomSelectEditor extends Editors.inputText {
  constructor(protected args: EditorArguments, protected isMultipleSelect) {
    super(args, true);
  }

  protected filterCollection(): any[] {
    const activeCell: { row: number; cell: number; } = this.grid.getActiveCell();
    const dataContext = this.grid.getDataItem(activeCell.row);
    // your custom logic
    // const customCollection = ...
    return customCollection;
  }
}

Thanks a lot this worked for me. I just extended *Editors.multipleSelect*. Also I took parameter *inputCollection* in the" filterCollection" method and manipulated it — Akshita Agrawal, Dec 28 '20 at 14:50

Angular slickgrid dynamic editor collection by every row data

2 Answers2

Linked