How to preselect the values in multiselect dropdown if we get 'ALL' text

Question

Let me tell you my requirement and the approach we followed

We have a table with multiple columns(in our table on selection of one cell value we change the collection of next column in cell click event).

In order to preselect the values in multiselect dropdown we get 'ALL' key instead of list ['a','b','c'], so on ui 'ALL'(text in string format) gets displayed but when we click on cell how to make all elements as selected in dropdown.

On cell click(which applied on table) we are also changing the collection of columns which in which also will have to manage the 'ALL' and elements selection. In short our columns collections keeps changing on click event of cell.

   this.columnDefinitions =[{
            id: 'name', name: 'name <span style="color:red">*</span>', field: 'name',
            sortable: true, filterable: true, width: 50,
            formatter: this.customFormatter,
            editor: {
              model: Editors.multipleSelect,
              enableRenderHtml: true,
              collection: ['a','b','c'],
              collectionSortBy: {
                property: 'label',
                sortDesc: false
              },
              collectionOverride: (finalCollection, args) => {
               // It does not load on initial load
    
               
                return finalCollection;
              },
              editorOptions: {
                selectAllText: 'ALL',
                allSelected: 'ALL',
                okButton: false
              } as MultipleSelectOption
            }
          },
        {
            id: 'roles', name: 'Role <span style="color:red">*</span>', field: 'Roles',
            sortable: true, filterable: true, width: 50,
            formatter: this.customFormatter,
            editor: {
              model: Editors.multipleSelect,
              enableRenderHtml: true,
              collection: ['1','2','3'],
              collectionSortBy: {
                property: 'label',
                sortDesc: false
              },
              editorOptions: {
                selectAllText: 'ALL',
                allSelected: 'ALL',
                okButton: false
              } as MultipleSelectOption
            }
          }
    ]

    customFormatter(row, cell, value, columnDef, dataContext, grid){
    
        if (value && columnDef.internalColumnEditor.collection.length && Array.isArray(value)
            && value.length === columnDef.internalColumnEditor.collection.length) {
          return 'ALL';
        }
    }

 
    // Change the collections
    onCellClicked(e, args) {
      if (metadata.columnDef.id === 'name') {
              this.angularGrid.slickGrid.getColumns()[metadata.cell].internalColumnEditor.collection = ['a','b'];
          } else if (metadata.columnDef.id === 'roles') {
           
              this.angularGrid.slickGrid.getColumns()[metadata.cell].internalColumnEditor.collection = ['1','2'];
            
          }
     }

If you have any other solution for this instead of the formatter and logic we have used. and also in formatter function if you will print 'dataContext' or row on table load event it shows same values only(eg row 3 will be prinetd insted of '1','2','3'). Is there any way to get all the corressponding different row count or dataContext in formatter function. Also 'this' is not available in customFormatter function. How can I get 'this' reference so that I can add some more custom logic in customFormatter function

Your question is not very clear, are you asking on how to change the collection dynamically? That would be via the `collectionOverride`, which was asked and implemented as per this other [SO Question](https://stackoverflow.com/questions/65361444/angular-slickgrid-dynamic-editor-collection-by-every-row-data), you can also do other changes before the editor opens via the `onBeforeEditCell` event, I use that technique often as well but the override is better though — ghiscoding, Apr 30 '21 at 12:17
Can I change the collection for particular column of row in slick grid? For particular column I can do that using below line:this.angularGrid.slickGrid.getColumns()[cell].internalColumnEditor.collection = arr;. But in this code is there any possiblity to specify row? — user15753753, Apr 30 '21 at 12:55
collectionOverride does not work on Table load because of which we can not use it. It gets executed if we click or change the element. — user15753753, Apr 30 '21 at 12:59
Sorry but I really don't understand your question, `getColumns` returns the list of column definitions it has nothing to do with the row data. If you want to get the row data, then use something like `dataView.getItemById(id)` or `getItemByIdx(index)`. Your question should be updated to clearly specify what you're looking for, the way it is written right now is too confusing and there probably won't be anyone helping you for that reason. So please update your question to make it clearer than it is now — ghiscoding, Apr 30 '21 at 17:25
you can always get the current `this` scope simply by adding `myformatter.bind(this)` — ghiscoding, May 03 '21 at 12:32

How to preselect the values in multiselect dropdown if we get 'ALL' text

0 Answers0