[REACT] Gantt dropdown list column

[rodel.ocfemia]

Hi Tasnim,
When I tried this code, the drop down list has two items but no text. It just displayed as blank item list.

{
	text : 'Status',
	field : 'status',
	editor : {
		type : 'combo',
		valueField : 'id'
	}
}
		
listeners: {
    startCellEdit: ({ editorContext }: { editorContext: any }) => {
      const { record, editor, column } = editorContext;
      if (column.field === 'status' && record.isLeaf) {
        editor.widgetMap['b-combo-1'].items = [
          { id: 1, name: 'Not Started' },
          { id: 2, name: 'In Progress' },
        ];
      }
    },
  },

[mats]

You need to set https://bryntum.com/products/scheduler/docs/api/Core/widget/Combo#config-displayField too:

{
	text : 'Status',
	field : 'status',
	editor : {
		type : 'combo',
		displayField : 'name',
		valueField : 'id'
	}
}
		
listeners: {
    startCellEdit: ({ editorContext }: { editorContext: any }) => {
      const { record, editor, column } = editorContext;
      if (column.field === 'status' && record.isLeaf) {
        editor.inputField.items = [
          { id: 1, name: 'Not Started' },
          { id: 2, name: 'In Progress' },
        ];
      }
    },
  },

[rodel.ocfemia]

Hi,
Using the following code, when I click on the drop down the name is now displayed. However, when I selected an item and clicked somewhere to trigger the auto update, the value displayed is the id, not the name.

{
	text : 'Status',
	field : 'status',
	editor : {
		type : 'combo',
		displayField : 'name',
		valueField : 'id'
	}
}
		
listeners: {
    startCellEdit: ({ editorContext }: { editorContext: any }) => {
      const { record, editor, column } = editorContext;
      if (column.field === 'status' && record.isLeaf) {
        editor.inputField.items = [
          { id: 1, name: 'Not Started' },
          { id: 2, name: 'In Progress' },
        ];
      }
    },
  },

[tasnim]

Hi,

What if you use this code snippet

        {
            text : 'Condition',
            field : 'condition',
            renderer : (event) => {
                const values = [
                    { id: 1, name: 'Not Started' },
                    { id: 2, name: 'In Progress' },
                ];
                const { name } = values.find(value => value.id === event.value);
                return name;
            },
            editor : {
                type : 'combo',
                displayValueRenderer(record) {
                    return record?.name;
                },
                valueField : 'id',
                displayField : 'name'
            }
        }

Does that fix the issue?

[rodel.ocfemia]

Hi Tasnim,
event is giving me undefined. I tried FormEvent or EventTarget but still undefined.

renderer: ({ event, record }: { event: Event; record: any }) => {
	console.log(event);
},

[tasnim]

Hi,

There are no props available in the renderer called event
I just named it an event

renderer : (event) => {...}

you could name it whatever you want.

[rodel.ocfemia]

Hi Tasnim,

The following code is based on your example. I just added the type definition since we are using React Typescript.
So far the event.value or record.value are undefined.

{
            text : 'Condition',
            field : 'condition',
            renderer : ({ event, record }: { event: any; record: any }) => {
                console.log(event.value);  //this returns undefined
                console.log(record.value); //this returns undefined
                const values = [
                    { id: 1, name: 'Not Started' },
                    { id: 2, name: 'In Progress' },
                ];
                const { name } = values.find((value: { userId: any }) => value.id === event.value);
                return name;
            },
            editor : {
                type : 'combo',
                displayValueRenderer(record) {
                    return record?.name;
                },
                valueField : 'id',
                displayField : 'name'
            }
        }

[tasnim]

Hi,

I've updated the example and attached it here. Please check it

[rodel.ocfemia]

Hi Tasnim,

We are using typescript, so I converted your renderer code to the following.
But props.value is returning undefined. Anyway, I still have workaround which is to use the single field combo then just map name to Id in backend.

renderer : ({ props }: { props: any }) => {
	const values = [
		{ id: 1, name: 'Not Started' },
		{ id: 2, name: 'In Progress' },
	];
	console.log(props.value); //undefined
	const { name } = values.find((value: { id: any }) => value.id === props.value);
	return name;
},

[rodel.ocfemia]

Hi,

I have another question related to combo box.
We have two combo box fields, owner and status. The following code works perfectly if I clicked the owner column first. all the dropdown items are listed correctly. Then if I click on status, all status items are displayed.

The issue is when I clicked the status first, the list items are not displayed and the same thing if I clicked on owner. Per debugging, the 'b-combo-1' is assigned to the first dropdown I clicked.

Is there a way to get the editor.widgetMap by Id?

listeners: {
	 startCellEdit: ({ editorContext }: { editorContext: any }) => {
	  const { record, editor, column } = editorContext;

  if (column.field === 'owner' && record.isLeaf) {
	editor.widgetMap['b-combo-1'].items = record.ownerItems;
  }
  if (column.field === 'status' && record.isLeaf) {
	editor.widgetMap['b-combo-2'].items = record.statusItems;
  }
},
}