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