Articles in this section
Category / Section

How to add extra columns in Gantt?

1 min read

In Gantt control, you can add new columns using the Load event. In the following code snippet, headerText provides the name of the new column’s header; field value is used to provide data for the new column in data source, mappingName is used to map values of respective field from the datasource and the width value is used to provide width in pixels, for the new column.

The following example is used for inserting a custom column in Gantt.


<script type="text/javascript">
$(function () {
          load: function () {
           var columns = this.getColumns();
          columns.splice(2, 0,
                 field: "customColumn",
                 headerText: "Custom Column",
                 mappingName: "customColumn",
                 width: "80px"

A sample to add extra columns in Gantt is available in following link. Sample


Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment