Dynamic Editor Configuration Request

[hwlv]

Clear and concise description of the problem

Currently, in Slickgrid-Universal, the column definition allows setting a static Editor for each column (e.g., Editor.text or Editor.singleSelect). However, I have a use case where I need the Editor to change dynamically based on the data in each row.

For example:

In the first row, the first column should use a text input editor;
In the second row, the first column should use a select dropdown editor.
This means I need a way to dynamically configure the Editor type based on the data in the current row.

Suggested solution

I would like to have a way to define the Editor dynamically, depending on the row's data. Ideally, it could work similarly to a callback function, where I can return the appropriate editor for each row. For example:

{
  id: 'exampleColumn',
  field: 'exampleField',
  editor: (item) => {
    if (item.type === 'text') {
      return Editor.text;
    } else if (item.type === 'select') {
      return Editor.singleSelect;
    }
    return null;
  }
}

Current Behavior: Right now, it is only possible to define a static Editor for the entire column, and it cannot be changed dynamically based on the row's data.

Use Case: In my application, each row contains different types of data that require different input methods. For example:

Some rows contain text data that should be edited with a text input;
Other rows contain a predefined set of options that should be edited with a dropdown or radio button.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Wikis.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[ghiscoding]

You can try to change the editor via the onBeforeEditCell event, it's triggered before the editor opens and you should be able to change it at that time but make sure that you do all of that synchronously otherwise it won't work (meaning that you will not be able to use something like collectionAsync for that use case, but anything else should work).

[zewa666]

you could perhaps also create a new composite editor which wraps both the original ones and has means to change its active appearance. if its exactly two types (input, select) this custom editor would be my goto solution due to more control

[hwlv]

you could perhaps also create a new composite editor which wraps both the original ones and has means to change its active appearance. if its exactly two types (input, select) this custom editor would be my goto solution due to more control

Thanks for the suggestion! I think it's a great idea to have a composite editor to switch between input and select. However, I'm a bit unsure about how to implement it. Could you provide some guidance or an example of how the code would look? It would really help to see the structure and approach.

Thanks in advance!

[ghiscoding]

I think you should first try with onBeforeEditCell, it's probably much easier to implement and doesn't require creating a whole new Editor.

If you want to go with a Custom Editor then simply look at the Custom Editor Documentation, I tried to document as much as possible because searching documentation is easy and is better than answering by memory which is not always good (docs are better in so many ways).

I converted the issue to a Discussion because like I tagged earlier, it's not an issue but rather a Question of How to do such thing

[hwlv]

I tried this, but it doesn't work.
onBeforeEditCell: (e: Event, args: OnEventArgs) => {
const { grid, columnDef, dataContext } = args;
columnDef.editor = {
model: Editors.singleSelect,
collection: [
{ id: 1, label: '1', value: '1' },
{ id: 2, label: '2', value: '2' }
],
customStructure: {
label: 'label',
value: 'value',
labelPrefix: 'prefix',
},
};
grid.invalidate();
return true;
}

[ghiscoding]

it doesn't work because internally because Slickgrid-Universal, or other any other ports like Slickgrid-React, now keeps 2 references to the Editor as shown below

slickgrid-universal/packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts

Lines 1525 to 1531 in 79d1995

	return columns.map((column) => {
	// on every Editor that have a "collectionAsync", resolve the data and assign it to the "collection" property
	if (column.editor?.collectionAsync) {
	this.loadEditorCollectionAsync(column);
	}
	return { ...column, editorClass: column.editor?.model };
	});

So you need to update both references to make it work, editor.model and editorClass

changeToInputTextEditor(checked: boolean) {
    this.isInputTextEditor = checked;
}

handleOnBeforeEditCell(event: any) {
  const args = event?.detail?.args;
  const { grid, column } = args;
  column.editor.model = this.isInputTextEditor ? Editors.text : Editors.longText;
  column.editorClass = column.editor.model;
  console.log(grid.getColumns());
  grid.invalidate();
  return true;
}

I added this to the Documentation as well
https://ghiscoding.gitbook.io/slickgrid-universal/column-functionalities/editors#dynamically-change-column-editor

[hwlv]

I wanted to sincerely thank you for addressing the issue I raised. I really appreciate your quick response and effort in resolving it. The fix works perfectly on my end!

Your work and support make a huge difference. Thanks again!

[ghiscoding]

⭐ and/or ☕ are always welcome 😉