Premium support for our pure JavaScript UI components


Post by jit@flowit.dk »

Hi.

Could you please provide me with an example of how to create a custom column for Gantt which shows a custom control when editing?

We have our own user interface framework with a lot of controls that our customers love, so we would like to use those for everything - for picking dates, entering text, picking numbers, etc.

Our controls are complex and feature rich, but I have created a very simple JSFiddle (https://jsfiddle.net/z5eqmgub/2/) that demonstrates how they work. Controls are created using a ControlFactory which accepts a configuration object. Based on the configuration object, a control is created and returned.

So basically we need to be able to define a column that carries the configuration object for the ControlFactory, and when double clicking a cell, a control is created using the factory and shown to the user. When the user is done editing, the control value must of course be persisted with Gantt. And when editing, any persisted value must be assigned to the control when it is created and shown.

Our controls only use Strings to represent values - even for numbers and boolean.

I would very much appreciate a working sample.

-- Thanks

Best regards
Jimmy Thomsen


Post by jit@flowit.dk »

Gantt might not always work well with string values, so I would appreciate if the example included a "hook" that allows us to convert our string values to what-ever Gantt prefers - e.g. for date and checkbox columns.

Best regards
Jimmy Thomsen


Post by tasnim »

Hi,

We have a custom column in our React basic demo here https://bryntum.com/products/gantt/examples/frameworks/react/javascript/basic/build/

m9nNYnf3Lz.png
m9nNYnf3Lz.png (58.69 KiB) Viewed 157 times

You could find the source of this locally here examples/frameworks/react/javascript/basic

// column code
        {
            field: 'draggable',
            text: 'Draggable<div class="small-text">(React editor)</div>',
            htmlEncodeHeaderText: false,
            width: 120,
            align: 'center',
            editor: ref => <DemoEditor ref={ref} />,
            renderer: ({ value }) => (value ? 'Yes' : 'No')
        }

Is it something that you're looking for?


Post by jit@flowit.dk »

Yes, thank you :-)

Best regards
Jimmy Thomsen


Post Reply