Our state of the art Gantt chart


Post by Animal »

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


Post by rodel.ocfemia »

thanks, it works.

editor.inputField.items = record.ownerItems;

Post by rodel.ocfemia »

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 am

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' },
        ];
      }
    },
  },

Post by alex.l »

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.

All the best,
Alex


Post by rodel.ocfemia »

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;
}

Post by marcio »

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

Best regards,
Márcio


Post by rodel.ocfemia »

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'];
            }
        },
    },

Post by marcio »

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.

Best regards,
Márcio


Post by rodel.ocfemia »

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;
}

Post by marcio »

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.

Best regards,
Márcio


Post Reply