Kendo UI for jQuery

jQuery Gantt

  • Create project plans and other schedules in no time with the jQuery Gantt Chart component. Bind local or remote data, easily customize everything on the task list and timeline, and more.
  • Part of the Kendo UI for jQuery library along with more than 100 professionally designed components developers trust for all their jQuery UI needs.
  • Get up and running quickly with award winning support, detailed documentation, demos, virtual classrooms, and a 3-million-strong developer community.
Header-Gantt
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The jQuery Gantt chart is a complex scheduling and project management component, especially useful for visualizing tasks in a list and timeline. The Core GanttChart component provides treelist and timeline views so that the end users can see the project start/end date, tasks progress, dependencies between tasks, milestones and other components of a project, at a glance. The major elements include:

    • TreeList View: The Gantt chart leverages the TreeList view component to present a pane that lists tasks, resources, owners, dates, and all other relevant info. Hierarchical data is supported.
    • Timeline View: The timeline pane is where tasks are visualized by interconnected task timeline with their dates and assigned resources. This view can be displayed by day, week, or month.
    • Resources: Assign and visualize resources for each task.

    See the jQuery Gantt Chart Overview demo

    gantt-overview
  • Column Options

    Make the jQuery Gantt chart look and behave the way you like with options for HTML attributes, editing, filtering, expanding, visibility, menu, and much more.

    See the jQuery Gantt Chart Columns demo

  • Column Templates

    Much like many other Kendo UI for jQuery components, the Gantt component allows you to render any type of content in its columns. A common scenario is using a template to display an avatar next to a task owner.

    See the jQuery Gantt Chart Column Templates demo

    gantt-column-templates
  • Planned vs. Actual

    Planning is only useful to the extent the planned time matches the actual time taken to complete the task. Therefore, the Gantt component has a built-in feature to compare planned tasks time vs. their actual execution time. This is a crucial metric for any manager to monitor to improve the planning skills of their team.

    See the jQuery Gantt Chart Planned vs. Actual demo

    planned-vs-actual-gantt