Dynamic Columns

[otis5842]

Hi, Speed Stars
I was wondering how can I make a Gantt chart with dynamic columns, in all examples on your website there is a static loading of columns. In our case we need a XML with all columns to be shown and another XML will be sending back data with all the necessary data to be shown.
For example we can have 4 or N columns like this:

header: 'Tasks',
sortable: true,
dataIndex: 'Name',
locked: true,
width: 200

header: 'Start',
sortable: true,
dataIndex: 'StartDate',
locked: true,
width: 80

header: 'End',
sortable: true,
dataIndex: 'EndDate',
locked: true,
width: 80

header: 'Some info',
sortable: true,
dataIndex: 'EndDate',
locked: true,
width: 80

and we will load all the necessary data in a store.
The issue I'm having here is how can I have dynamic fields in a store and dynamic columns generated based on XML file and is that possible at all?

[ahmadzaheer]

Hello Otis,

First of all welcome to the Bryntum forums.

There are two options for this:

1. Render gantt only when the columns data is loaded.
2. You can also change the columns on the runtime by reassigning the columns property on the gantt:
   1. Open the https://bryntum.com/products/gantt/examples/advanced/
   2. Remove some of the columns configuration by toggling the code icon and removing some of the columns from the columns config. Let's say you removed all the columns so that only name column is remaining
   3. Now open the console and reassign the columns config to the gantt object. Type the following code and hit enter in the console:
      gantt.columns = [
      	{ type : 'wbs', hidden : true },
              { type : 'name', width : 250, showWbs : true },
              { type : 'cost' },
              { type : 'startdate' },
              { type : 'duration' },
              { type : 'resourceassignment', width : 120, showAvatars : true },
              { type : 'percentdone', mode : 'circle', width : 70 },
              { type : 'predecessor', width : 112 },
              { type : 'successor', width : 112 },
              { type : 'schedulingmodecolumn' },
              { type : 'calendar' },
              { type : 'constrainttype' },
              { type : 'constraintdate' },
              { type : 'statuscolumn' },
              { type : 'complexitycolumn' },
              { type : 'deadlinedate' },
              { type : 'addnew' }
      ]
      

You will be able to see the columns are adjusted according to the new config. If you have any further questions please let us know.

Thanks,
Ahmad