New to Kendo UI for jQuery? Start a free 30-day trial

Columns

configuration

The configuration of the Gantt columns. An array of JavaScript objects or strings. A JavaScript objects are interpreted as column configurations. Strings are interpreted as the field to which the column is bound. The Gantt will create a column for every item of the array.

If this setting is not specified the Gantt will create a single column for the task title.

columns

Array

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    }
  ],
  dependencies: [
    {
      predecessorId: 1,
      successorId: 2,
      type: 1
    }
  ],
  columns: ["title" , "start"]
});
</script>

columns.attributes

Object

The HTML attributes of the table cell (<td>) that is rendered for the column.

Quote all HTML attributes which are JavaScript keywords (for example, class).

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    }
  ],
  columns: [{
    field: "title",
    attributes: {
      "class": "highlight",
      style: "text-align: right"
    }
  }, {
    field: "start"
  }]
});
</script>
<style>
  .highlight {
    color: red;
  }
</style>
// The table cells look like `<td class="name-cell" style="text-align: right">...</td>`.

columns.columns

Array

The columns which will be rendered as child columns under this group column header.

Group columns cannot be data-bound and support a limited number of bound column settings such as title.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    }
  ],
  columns: [{
    title: "Grouped column",
    columns: [{
      field: "title"
    }, {
      field: "start"
    }]
  }]
});
</script>

columns.draggable

Boolean

If set to true a draghandle will be rendered and the user could reorder the rows by dragging the row via the drag handle.

Note that the reordering operation is only a client-side operation and it does not reflect the order of any data that is bound to the server.

Default: false

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  columns: [
    { draggable: true },
    "title",
    "start",
    "end"
  ],
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    },
    {
      id: 3,
      orderId: 2,
      parentId: null,
      title: "Task3",
      start: new Date("2014/6/17 15:00"),
      end: new Date("2014/6/17 17:00")
    }
  ],
  dependencies: [
    {
      predecessorId: 1,
      successorId: 2,
      type: 1
    }
  ],
  editable: {
    clickMoveClick: true
  }
});
</script>

columns.editable

Boolean

Specifies whether this column can be edited by the user.

Default: false

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    }
  ],
  dependencies: [
    {
      predecessorId: 1,
      successorId: 2,
      type: 1
    }
  ],
  columns: [
    { field: "title", title: "Title", editable: true }
  ]
});
</script>

columns.editor

Function

Provides a way to specify a custom editing UI for the column. To create the editing UI, use the container parameter.

The editing UI has to contain an element with a set name HTML attribute. The attribute value has to match the field name.

The validation settings that are defined in the model.fields configuration will not be applied automatically. In order for the validation to work, you (the developer) are responsible for attaching the corresponding validation attributes to the editor input. If the custom editor is a widget, to avoid visual issues, you can customize the tooltip position of the validation warning.

Parameters:containerjQuery

The jQuery object that represents the container element.

optionsObject

options.fieldString

The name of the field to which the column is bound.

options.formatString

The format string of the column that is specified through the format option.

options.modelkendo.data.GanttTask

The model instance to which the current table row is bound.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    }
  ],
  columns: [{
    field: "title",
    editor: function(container, options) {
      // create an input element
      var input = $("<input/>");
      // set its name to the field to which the column is bound ('title' in this case)
      input.attr("name", options.field);
      // append it to the container
      input.appendTo(container);
      // initialize a Kendo UI AutoComplete
      input.kendoAutoComplete({
        dataTextField: "title",
        dataSource: [
          { title: "Jackson" },
          { title: "Strong" },
          { title: "Simon"}
        ]
      });
    }
  }, "start", "end"]
});
</script>

columns.expandable

Boolean

If set to true, the column will show the icons that are used for expanding and collapsing child rows. By default, the "title" column of the Gantt is expandable.

Default: false

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    }
  ],
  dependencies: [
    {
      predecessorId: 1,
      successorId: 2,
      type: 1
    }
  ],
  columns: [{
    field: "id",
    expandable: true
  }, "title" , "start", "end"]
});
</script>

columns.field

String

The field to which the column is bound. The value of this field is displayed by the column during data binding. The field name should be a valid Javascript identifier and should contain only alphanumeric characters (or "$" or "_"), and may not start with a digit.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    }
  ],
  dependencies: [
    {
      predecessorId: 1,
      successorId: 2,
      type: 1
    }
  ],
  columns: ["title" , "start", "end"]
});
</script>

columns.filterable

Boolean|Object

If set to true and if filtering is enabled for the entire Gantt, a filter menu will be displayed for this column. If set to false, the filter menu will not be displayed. By default, a filter menu is displayed for all columns when filtering is enabled through the filterable option. Can be set to a JavaScript object which represents the filter menu configuration.

Default: true

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  filterable: true,
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    }
  ],
  dependencies: [
    {
      predecessorId: 1,
      successorId: 2,
      type: 1
    }
  ],
  columns: [{
    field: "title",
    filterable: false
  }, "start", "end"]
});
</script>

columns.format

String

The format that is applied to the value before it is displayed. Takes the form "{0:format}" where "format" is a standard number format, custom number format, standard date format or a custom date format.

The kendo.format function is used to format the value.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    },
    {
      id: 3,
      orderId: 2,
      parentId: null,
      title: "Task3",
      start: new Date("2014/6/17 13:00"),
      end: new Date("2014/6/17 15:00")
    }

  ],
  dependencies: [
    {
      predecessorId: 1,
      successorId: 2,
      type: 1
    }
  ],
  columns: [
    { field: "start", title: "Start Time", format: "{0:MM/dd hh:mm}" },
    { field: "end", title: "End Time", format: "{0:MM/dd hh:mm}" }
  ]
});
</script>

columns.headerAttributes

Object

The HTML attributes of the table header cell (<th>) that is rendered for the column.

Quote the HTML attributes which are JavaScript keywords (for example, class).

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    },
    {
      id: 3,
      orderId: 2,
      parentId: null,
      title: "Task3",
      start: new Date("2014/6/17 13:00"),
      end: new Date("2014/6/17 15:00")
    }

  ],
  dependencies: [
    {
      predecessorId: 1,
      successorId: 2,
      type: 1
    }
  ],
  columns: [
    {
      field: "start",
      title: "Start Time",
      headerAttributes: {
        "class": "name-header",
        style: "text-align: right"
      }
    },
    { field: "end", title: "End Time" }
  ]
});
</script>

columns.headerTemplate

String|Function

The template which renders the column header content. By default, the value of the title column option is displayed in the column header cell.

If sorting is enabled, the column header content will be wrapped in an <a> element. As a result, the template must contain only inline elements.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    },
    {
      id: 3,
      orderId: 2,
      parentId: null,
      title: "Task3",
      start: new Date("2014/6/17 13:00"),
      end: new Date("2014/6/17 15:00")
    }

  ],
  dependencies: [
    {
      predecessorId: 1,
      successorId: 2,
      type: 1
    }
  ],
  columns: [
    {
      field: "title",
      headerTemplate: '<input type="checkbox" id="check-all" /><label for="check-all">check all</label>'
    },
    {
      field: "start",
      title: "Start Time"
    },
    {
      field: "end",
      title: "End Time"
    }
  ]
});
</script>

columns.hidden

Boolean

If set to true, the Gantt will not display the column. By default, all columns are displayed.

Default: false

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    },
    {
      id: 3,
      orderId: 2,
      parentId: null,
      title: "Task3",
      start: new Date("2014/6/17 13:00"),
      end: new Date("2014/6/17 15:00")
    }

  ],
  dependencies: [
    {
      predecessorId: 1,
      successorId: 2,
      type: 1
    }
  ],
  columns: [
    {
      field: "title",
      hidden: true
    },
    {
      field: "start",
      title: "Start Time"
    },
    {
      field: "end",
      title: "End Time"
    }
  ]
});
</script>

columns.menu

Boolean

If set to true, the Gantt will display the column in the column menu. By default, the column menu includes all data-bound columns, that is, the ones with a set field option.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  columnMenu: true,
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    },
    {
      id: 3,
      orderId: 2,
      parentId: null,
      title: "Task3",
      start: new Date("2014/6/17 13:00"),
      end: new Date("2014/6/17 15:00")
    }

  ],
  dependencies: [
    {
      predecessorId: 1,
      successorId: 2,
      type: 1
    }
  ],
  columns: [
    {
      field: "title",
      menu: false
    },
    {
      field: "start",
      title: "Start Time"
    },
    {
      field: "end",
      title: "End Time"
    }
  ]
});
</script>

columns.minScreenWidth

Number

The pixel screen width below which the column will be hidden. The setting takes precedence over the hidden setting and the two cannot not be used at the same time.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    },
    {
      id: 3,
      orderId: 2,
      parentId: null,
      title: "Task3",
      start: new Date("2014/6/17 13:00"),
      end: new Date("2014/6/17 15:00")
    }

  ],
  dependencies: [
    {
      predecessorId: 1,
      successorId: 2,
      type: 1
    }
  ],
  columns: [
    {
      field: "title"
    },
    {
      field: "start",
      title: "Start Time",
      minScreenWidth: 750
    },
    {
      field: "end",
      title: "End Time",
      minScreenWidth: 750
    }
  ]
});
</script>

columns.sortable

Boolean|Object

If set to true the user could sort this column by clicking its header cells. By default sorting is disabled.

Default: false

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    },
    {
      id: 3,
      orderId: 2,
      parentId: null,
      title: "Task3",
      start: new Date("2014/6/17 13:00"),
      end: new Date("2014/6/17 15:00")
    }
  ],
  dependencies: [
    {
      predecessorId: 1,
      successorId: 2,
      type: 1
    }
  ],
  columns: [
    { field: "title", title: "Title", sortable: true }
  ]
});
</script>

columns.template

String|Function

The template which renders the column content. The Gantt renders table rows (<tr>) which represent the data source items. Each table row consists of table cells (<td>) which represent the GanttList columns. By default, the HTML-encoded value of the field is displayed in the column.

To customize the way the column displays its value, use template.

<div id="gantt"></div>
<script>
  $("#gantt").kendoGantt({
    dataSource: [
      {
        id: 1,
        orderId: 0,
        parentId: null,
        title: "Task1",
        start: new Date("2014/6/17 9:00"),
        end: new Date("2014/6/17 11:00")
      },
      {
        id: 2,
        orderId: 1,
        parentId: null,
        title: "Task2",
        start: new Date("2014/6/17 12:00"),
        end: new Date("2014/6/17 14:00")
      },
      {
        id: 3,
        orderId: 2,
        parentId: null,
        title: "Task3",
        start: new Date("2014/6/17 13:00"),
        end: new Date("2014/6/17 15:00")
      }
    ],
    columns: [
      { field: "id" },
      { field: "title", template: "<strong>#: title #</strong>" }
    ]
  });
</script>

<script type="text/x-kendo-template" id="template">
    # if (data.summary) { #
        <button class='k-button btn-summary'>Click summary</button>
    # } #
</script>

<div id="gantt"></div>

<script>
  $("#gantt").kendoGantt({
    dataSource: [
      {
        id: 1,
        orderId: 0,
        parentId: null,
        title: "Task1",
        summary: true,
        start: new Date("2014/6/17 9:00"),
        end: new Date("2014/6/17 11:00")
      },
      {
        id: 2,
        orderId: 1,
        parentId: null,
        title: "Task2",
        summary: false,
        start: new Date("2014/6/17 12:00"),
        end: new Date("2014/6/17 14:00")
      },
      {
        id: 3,
        orderId: 2,
        parentId: 1,
        title: "Task3",
        summary: false,
        start: new Date("2014/6/17 13:00"),
        end: new Date("2014/6/17 15:00")
      }
    ],
    columns: [
      { field: "id" },
      { field: "title" },
      { field: "summary", template: $("#template").html() }
    ]
  })
  .on("click", ".btn-summary", function(e) {
    var gantt = $(e.delegateTarget).data("kendoGantt");
    var dataItem = gantt.dataItem($(e.currentTarget).closest("tr"));
    alert("Summary clicked: " + dataItem.title)
  });
</script>

columns.title

String

The text that is displayed in the column header cell. If not set the field is used.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    }
  ],
  dependencies: [
    {
      predecessorId: 1,
      successorId: 2,
      type: 1
    }
  ],
  columns: [ { field: "title", title: "Task Title" } ]
});
</script>

columns.width

String|Number

The width of the column. Numeric values are treated as pixels.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    }
  ],
  dependencies: [
    {
      predecessorId: 1,
      successorId: 2,
      type: 1
    }
  ],
  columns: [
    { field: "title", title: "Title", width: "200px" },
    { field: "start", title: "Task Start Time", width: "200px" },
    { field: "end", title: "Task End Time", width: "200px" }
  ]
});
</script>

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    }
  ],
  dependencies: [
    {
      predecessorId: 1,
      successorId: 2,
      type: 1
    }
  ],
  columns: [
    { field: "title", title: "Title", width: 200 },
    { field: "start", title: "Task Start Time", width: 200 },
    { field: "end", title: "Task End Time", width: 200 }
  ]
});
</script>

Related Members