KendoReact
The React Gantt is a UI component that illustrates a project schedule. It allows users to plan, organize and track various tasks. Users can also see how different tasks are related and what task is dependent on other tasks in the project plan. Tasks have a visual bar to indicate their start and end date, how long each task should take to complete, how far along a particular task is, whether the task is on-time or late and much more.
With sorting enabled, the React Gantt 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. React developers can also programmatically set sorting and sort order, which means columns can be sorted upon initial render.
Thanks to the built-in filtering options of the KendoReact Gantt component, users can quickly reduce the number of tasks displayed at once. 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.
Due to the complex nature of the Gantt component, it often requires a more advanced data structure. To make data binding easier for React developers, the KendoReact Gantt provides a helper method for converting flat data into the data type that the Gantt expects. This provides additional flexibility for developers to bind data without having to restructure their data just for the Gantt component.
The React Gantt provides a short list of tags to organize the different types of tasks. 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 KendoReact 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 the tasks are properly defined in their Gantt component and users can plan projects in the correct sequence of events.
Designed as a fully-fledged project management and collaboration tool, the KendoReact Gantt component enables users to easily manipulate and edit available tasks. Thanks to the available callbacks and configuration options, developers can either rely on the out-of-the-box editing capability of the Gantt component, or customize the user experience to fit any specific design requirements.
Quickly and easily enable multiple-cell selection via drag and drop (or Ctrl/Cmd and click) for rows and ranges of cells in the KendoReact Gantt Chart.
Every task in the React Gantt component is represented by a row. With the Row Height property, the Gantt can be customized to provide either a more compact view or rows with more padding in order to fit the existing content.
The KendoReact Gannt Chart component enables you to easily implement multi-column headers.
The KendoReact Gantt Chart component enables you to easily change the column order by dragging the header cells.
The KendoReact Gantt Chart Column Menu allows you to display a menu with flexible options for high-level customization allowing you to implement complex scenarios and meet your specific project needs.
Since the React Gantt component is meant to help manage projects, and no two projects are the same, there may be a need for more granular control over the intervals that tasks are displayed over. Whether tasks are done by the minute or by the day or week, or if the requirements call for shorter or longer slot widths, the duration of these slots and the width can be controlled across the entire KendoReact Gantt.
Dates and time are a central part of the KendoReact Gantt component. Whenever time is involved, time zones can significantly complicate matters. With the built-in support for time zones, the React Gantt component makes this complex situation a breeze to deal with. If no specific time zone is set, the KendoReact Gantt component defaults to the local time zone of the browser. If a time zone is set, then the Gantt component will display all tasks according to that time zone.
The React Gantt component comes with built-in keyboard support to help navigate and interact with the UI component using just a keyboard.
Many apps written with KendoReact require support for right-to-left, or RTL, writing systems. With the KendoReact Gantt, RTL support can be achieved with a single property setting.
The KendoReact Gantt Chart component provides extensive accessibility support and enables users with disabilities to have complete control over its features.
The Gantt Chart component is compliant with the Web Content Accessibility Guidelines (WCAG) 2.1 AA standards and Section 508 requirements. It also follows the Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) best practices for implementing the keyboard navigation for its component role, and provides different options for managing its focus.
The Gantt Chart component is also available for these web development frameworks:
Most organizations use the KendoReact Gantt chart to add project tracking to an application. If your data model has resources, tasks, start dates, and end dates, the Gantt chart makes it easy to visualize the project timeline.
You can try all KendoReact Components by signing up for a 30-day trial. During your evaluation, you will have access to all the components, technical support, documentation and on-demand technical training.
See the KendoReact Gantt Chart Getting Started article for a quick tutorial. Also, don’t forget to sign up for a trial of the KendoReact components library to get free support.
The KendoReact Scheduler is another popular scheduling tool. Also called an event calendar, it works much like Microsoft Outlook and allows you to add appointment scheduling to your applications. Developers use it to create appointment calendars, tasks trackers, and room schedulers.
You can find the KendoReact Gantt Chart demo here.
The KendoReact Gantt Chart component is one of over 100 in the KendoReact component library which is part of the Kendo UI bundle. Kendo UI includes libraries for jQuery, Angular, React, and Vue. You can purchase Kendo UI online or by contacting sales.
You can also choose to purchase DevCraft, which bundles all our .NET and JavaScript components.
Getting started is easy. Visit the KendoReact Gantt Chart Getting Started tutorial for an easy step-by-step tutorial. All you need to do is install the NPM package, add the component to a page, and set desired properties!
Don’t forget to sign up for a trial of the KendoReact components library. This gives you a 30-day license and access to support resources to help you during your learning and evaluation process.