toolbar - API Reference - Kendo UI Gantt

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

configuration

If a String value is assigned to the toolbar configuration option, it will be treated as a single string template for the whole Gantt Toolbar, and the string value will be passed as an argument to a kendo.template() function.

If a Function value is assigned (it may be a kendo.template() function call or a generic function reference), then the return value of the function will be used to render the Gantt Toolbar contents.

If an Array value is assigned, it will be treated as the list of commands displayed in the Gantt Toolbar. Commands can be custom or built-in ("append", "pdf", "plannedTasks").

The "append" command adds a new task to the gantt.

The "pdf" command exports the gantt in PDF format.

The "plannedTasks" command will render the plannedTasks Switch on the Toolbar. That Switch allows the user to turn on and off the Planned vs. Actual view in the Timeline of the Gantt. When turned on, that view will render both the planned and the actual duration of all tasks. When enabled, plannedStart and plannedEnd date fields of tasks are required to properly render planned duration.

String|Function|Array

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  toolbar: "<p>My string template in a paragraph.</p>",
  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")
    }
  ]
});
</script>

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  toolbar: kendo.template("<p>My function template.</p>"),
  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")
    }
  ]
});
</script>

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  toolbar: [
    { name: "append" },
    { name: "pdf" }
  ],
  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")
    }
  ]
});
</script>

toolbar.name

String

The name of the toolbar command. Either a built-in ("append" and "pdf") or custom. The name is reflected in one of the CSS classes, which is applied to the button - k-gantt-name. This class can be used to obtain reference to the button after Gantt initialization and attach click handlers.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  toolbar: [
    { name: "append" },
    { name: "pdf" },
    { name: "plannedTasks" },
    { name: "custom" }
  ],
  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")
    }
  ]
});

$(".k-gantt-custom").click(function(e){
    // handler body
});
</script>

Apart from the built-in tools, the Gantt fully exposes the ToolBar.items API. This way you can specify any custom tools in the widget using the components available in the ToolBar itself:

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  toolbar: [ {
      type: "button",
      text: "Button"
  }, {
      type: "button",
      text: "Toggle",
      togglable: true,
      icon: "cancel"
  }, {
      type: "splitButton",
      text: "SplitButton",
      menuButtons: [{text: "Option 1"}, {text: "Option 2"}]
  } ],
  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")
    }
  ]
});
</script>

toolbar.template

String|Function

The template which renders the command. By default renders a button.

<div id="gantt"></div>
<script id="template" type="text/x-kendo-template">
<a class="k-button" href="" onclick="return toolbar_click()">Command</a>
</script>
<script>
function toolbar_click() {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log("Toolbar command is clicked!");
  return false;
}
$("#gantt").kendoGantt({
  toolbar: [
    { template: kendo.template($("#template").html()) }
  ],
  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")
    }
  ]
});
</script>

<div id="gantt"></div>
<script>
function toolbar_click() {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log("Toolbar command is clicked!");
  return false;
}
$("#gantt").kendoGantt({
  toolbar: [
    {
      template: '<a class="k-button" href="" onclick="return toolbar_click()">Command</a>'
    }
  ],
  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")
    }
  ]
});
</script>

toolbar.text

String

The text displayed by the command button. If not set the name` option would be used as the button text instead.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  toolbar: [
    { name: "append", text: "Add new" }
  ],
  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")
    }
  ]
});
</script>