How to display custom Tabs in Gantt chart's dialog
This article explains how to display custom tabs in the Gantt chart's dialog. In the Gantt control, you can add the custom tabs to the edit dialog using the editDialogFields property. You can include the required fields in the custom tab using the editDialogFields.fields property. To include custom fields in the edit dialog, you should define a column for the custom field in column collection using the ColumnsDirective property.
The following example demonstrates how to include a custom tab in the Gantt add/edit dialog.
export default class App extends React.Component<{}, {}> {
//…
public editDialogFields: any = [
{ type: 'General'},
{ type: 'Predecessor' },
{ type: 'Resources' },
{ type: 'Notes' },
{ type: 'Custom', headerText: 'Extra Tab', fields: ['ExtraCol1','ExtraCol2'] },
];
render() {
return (
<GanttComponent dataSource={data} id='GanttSample' editDialogFields={this.editDialogFields}
//..
toolbar={this.toolbar}>
<ColumnsDirective>
//..
<ColumnDirective field='ExtraCol1' headerText='First Column' />
<ColumnDirective field='ExtraCol2' headerText='Second Column' />
</ColumnsDirective>
</GanttComponent>)
}
};
ReactDOM.render(<App />, document.getElementById('gantt'));
The custom tab in the Gantt chart dialog will be displayed as follows:
You can find a sample to include a custom tab in the Gantt add/edit dialog from here.
