Our state of the art Gantt chart
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' },
];
}
},
},
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' },
];
}
},
},
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' },
];
}
},
},
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?
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);
},
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.
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'
}
}
Hi,
I've updated the example and attached it here. Please check it
Attachments
basic.zip
(2.06 MiB) Downloaded 18 times
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;
},
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;
}
},
}