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.
The React Gantt component can bind all its tasks and their dependencies through local or remote data, letting React developers pick their favored approach for binding data on the client in order to populate the KendoReact Gantt.
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, React developers can ensure that their 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.
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.
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.