Fired when the user changes the selected view of the Gantt.

The event handler function context (available via the this keyword) will be set to the widget instance.

Event Data

e.view String

The name of the view which is about to be selected. The possible values are:

  • day
  • week
  • month
  • year
e.preventDefault Function

If invoked prevents the action.

e.sender kendo.ui.Gantt

The widget instance which fired the event.

Example - subscribe to the "navigate" event during initialization

<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")
    }
  ],
  navigate: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(kendo.format("Navigate to {0} view", e.view.charAt(0).toUpperCase() + e.view.slice(1)));
  }
});
</script>

Example - subscribe to the "navigate" event after initialization

<div id="gantt"></div>
<script>
  function gantt_navigate(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(kendo.format("Navigate to {0} view", e.view.charAt(0).toUpperCase() + e.view.slice(1)));
  }
  $("#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")
      }
    ]
  });
  var gantt = $("#gantt").data("kendoGantt");
  gantt.bind("navigate", gantt_navigate);
</script>
In this article