Kendo UI for Angular
Create project plans and other schedules in no time with the Angular Gantt Chart component. This interactive, data bound, and customizable component provides a task TreeList and a timeline pane. In the task list, users can edit, sort, and reorder records. In the timeline, users can resize, move, edit, and remove tasks. The timeline can also be displayed in day, week, and month views.
Bind the Angular Gantt component local or remote data and automatically populate tasks, dependencies, dates, and more. The data can, but doesn’t need to, be hierarchical. Flat data will work perfectly.
Tasks and their related information are displayed in a TreeList pane. The Angular Gantt Chart gives you a virtual toolbox to make it exactly what you need. Options include the following:
The Angular Gantt Chart includes a list of tags to designate task types. These include a “summary” task, a task which has child tasks, a “regular” task, a task without child items, or a “milestone” task, which is a task without child items that has the same start and end date.
To easily manage the relationships between different tasks, the Angular Gantt component provides four different dependency types: the “finish to finish” type, the “finish to start” type, the “start to start” type, and the “start to finish” type. Using these dependency types, you can ensure that tasks are properly defined.
With sorting enabled, the Angular Gantt Chart can reorganize all available tasks to be sorted by a specific data field, such as task start date or task type. Sorting can be enabled via a single configuration option and users can sort by clicking the header of a field. Clicking multiple times allows users to sort the items in an ascending order, descending order, or no sort order at all, giving them the option to remove any applied sorting. You can also programmatically set sorting and sort order, which means columns can be sorted upon initial render.
The Angular Gantt component helps users reduce the number of items in their UI through filtering. Filtering can be done via a dedicated filter menu or by using fields such as text and dates as filters. Additionally, you can configure conditional filters, such as “starts with”, “contains” and more, on a column-by-column basis to give users maximum flexibility to manage their planning.
The Angular Gantt chart can display the task timeline by day, week, or month. Each view is further broken down by its child view. Days are broken into hours, weeks into days, and months into weeks. You can set this view programmatically or allow the user to decide.
Choose to allow users to edit tasks listed in the TreeList in two ways. They can edit directly in cells or you can choose to implement the built-in dialog for a more full-featured experience.See the Angular Gantt Editing demo
Allow users to interact with and select single or multiple items in the task pane or items on the timeline.See the Angular Gantt Selection Demo
Accessibility is important but can be tedious. We have got it covered. Our Angular Gantt chart is AAA rated with WCAG 2.0 and is compliant with Section 508 and WAI-ARIA standards.