Yes! This is what I was pointing out earlier.
IDs (unless you configure them in which is not advisable) are generated sequentially.
Use the reference to the actual field. An Editor knows about the input field it is using. https://www.bryntum.com/products/grid/docs/api/Core/widget/Editor#config-inputField
thanks, it works.
editor.inputField.items = record.ownerItems;Hi,
For below question if there is fix it would be easier and lesser load in backend since the payload will be the id instead of name. Passing name as payload will need conversion.
rodel.ocfemia wrote: ↑Thu Mar 16, 2023 7:42 amHi,
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' }, ]; } }, },
It always should use value from valueField property and never displayed name. If it works different, then it's a bug or wrong configuration. Please post runnable code with steps to reproduce this problem.
I can't attach files so I'll just paste the code here.
Please note we are using React Typescript.
To reproduce, double click on any row under Name column, then select Name1 or Name2. On lost focus on combo box, the value displayed is the Id, not the name.
GanttConfig.tsx
import { GanttConfig } from '@bryntum/gantt';
const ganttConfig: Partial<GanttConfig> = {
columns : [
{
type : 'name',
field : 'name',
width : 250,
editor : {
type : 'combo',
displayField : 'nameFld',
valueField : 'idFld'
}
}
],
viewPreset : 'weekAndDayLetter',
barMargin : 10,
project : {
transport : {
load : {
url : 'data/gantt-data.json'
}
},
autoLoad : true
},
listeners: {
startCellEdit: ({ editorContext }: { editorContext: any }) => {
const { record, editor, column } = editorContext;
if (column.field === 'name' && record.isLeaf) {
editor.inputField.items = [
{idFld: 1, nameFld: 'Name 1'},
{idFld: 2, nameFld: 'Name 2'}
];
}
},
},
};
export { ganttConfig };GanttApp.tsx
import React, { FunctionComponent, useRef } from 'react';
import { BryntumGantt } from '@bryntum/gantt-react';
import { ganttConfig } from './GanttConfig';
import './App.scss';
const GanttApp: FunctionComponent = () => {
const gantt = useRef<BryntumGantt>(null);
return <BryntumGantt ref={gantt} {...ganttConfig} />;
};
export default GanttApp;App.tsx
import React from "react";
import GanttApp from "./GanttApp";
function App() {
return (
<GanttApp />
);
}
export default App;App.scss
@import '~@bryntum/gantt/gantt.stockholm.css';
body,
html {
margin : 0;
display : flex;
flex-direction : column;
height : 100vh;
font-family : Poppins, "Open Sans", Helvetica, Arial, sans-serif;
font-size : 14px;
}
#container {
flex : 1 1 100%;
display : flex;
}Hey rodel.ocfemia,
As Alex already mentioned, we use the valueField property to display, and in your example, the field is set like this
valueField : 'idFld'So, it's expected to behave and display as you described. If you want to keep using the idFld as a reference, but display a different text just like the combo, we recommend using a custom renderer for the column, please check the documentation for examples https://bryntum.com/products/gantt/docs/api/Grid/column/Column#config-renderer
Hi Marcio,
If I use valueField : 'nameFld', the displayed text is the name which is correct. However, the sync payload is also nameFld. This is just the same as the default implementation as the following code. However, passing name as payload requires data conversion in backend. So I asked if possible to pass the idFld as payload automatically while the displayed text is the nameFld. I'll check the documentation you sent.
columns : [
{
type : 'name',
field : 'name',
width : 250,
editor : {
type : 'combo',
}
}
],
listeners: {
startCellEdit: ({ editorContext }: { editorContext: any }) => {
const { record, editor, column } = editorContext;
if (column.field === 'name' && record.isLeaf) {
editor.inputField.items = ['Name 1', 'Name 2'];
}
},
},Hey,
You could do something like this:
const options = [
{ idFld: 1, nameFld: "Name 1" },
{ idFld: 2, nameFld: "Name 2" },
];
const ganttConfig: Partial<BryntumGanttProps> = {
columns: [
{
type: "name",
field: "name",
width: 250,
editor: {
type: "combo",
displayField: "nameFld",
valueField: "idFld",
},
renderer: ({ record }: any) => {
return options[record.name] ? options[record.name].nameFld : record.name;
}
},
]But, as it's a workaround, you should not have in the same column a string (the name) and an id at the same time.
Hi marcio,
What is the data type of options? I tried any but it's not working.
renderer: ({ record, options }: { record: any; options: any}) => {
return options[record.name] ? options[record.name].nameFld : record.name;
}Hey,
options is just an array that I declared at the beginning of the snippet just an example to match your first example. It's not a parameter for the renderer function.