Completed
Last Updated: 03 Jun 2021 13:13 by ADMIN
John
Created on: 15 Jun 2018 04:50
Type: Feature Request
17
Gantt React Component
Implement Gantt as a React Component so that a Wrapper is not required. This is not currently listed in your Roadmap as a specific short or long-term goal.
10 comments
ADMIN
Stefan
Posted on: 03 Jun 2021 13:13

Hello, Federico,

Regarding the specific features:

1) Different colors for each task - Currently, we can do this only per row (each row is a different color). If each task in a row has to be in a different color, we have a request for that and we are monitoring the interest in it:

https://feedback.telerik.com/kendo-react-ui/1518504-change-colors-of-gantt-tasks

2) The current marker is currently not available and can be requested.

3) The resource and their tasks are on one line by default.

4) Currently, the user can move between the items only using the scroll.

5) This can be done using the cell props of the GanttColumn to render any custom elements in the cell, including a DropDownList or a DropDownButton:

https://www.telerik.com/kendo-react-ui/components/gantt/api/GanttColumnProps/#toc-cell

6) The GEO location map is a fully separate component, we currently only have it for jQuery:

https://demos.telerik.com/kendo-ui/map/geojson

And it can be used in a React application using this approach:

https://docs.telerik.com/kendo-ui/third-party/react#kendo-ui-for-jquery-in-react-applications

In general, the Gantt is a new component that has only the main features initially. We are actively collecting feedback to see what the developers need and plan new features based on that. You can submit features requests as this is how we determine what will be done next:

https://feedback.telerik.com/kendo-react-ui

As this is an already completed feature request, if you have specific questions for the Gantt or any other component, you can ask them in the forum:

https://www.telerik.com/forums/kendo-ui-react

Regards,
Stefan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Federico
Posted on: 02 Jun 2021 13:58

Hi Stefan,

First of all thanks for your prompt response. I am trying to adapt an existing gantt mockup than I made up with a different library and I'm attaching to this message a capture shot of it. I'm looking at your example and I still see all tasks in blue. Please taka a look at my capture attached and you'll see what I am after.

I'm trying to do this with the kendo-react-gantt library (I believe it is the native library without any wrapper libraries). Is this (the attached pic) chart achievable with your native library? please feel free to check also some other features that I need to include and that are present in my pic such as current time line marker; resources vs tasks all in one line; possibility to scroll the dates from left to right with buttons and this despite having tasks or not; select dropdown (three vertical dots button) with custom options to be completed (in this case is showing the team members of this which is a team resource option); posibility to swith from gantt view to GEO location and show a map, filters with buttons that should be able to switch its options once clicked in the select input down below; etc.

The idea was suggested to me that maybe, I could replace my existing library with this new one from Kendo and achieve the same results but I'm finding it really hard to customize all these things I previously mentioned, and although it is quite good that it seems to be working perfectly with React v17 and hooks, I guess I'm not being able to find as much as flexibility as I probably need. For your information, I used dhtmlx gantt library to build the mockup from this capure which has lots of things that could be customizable, but on the other hand it doesn't works as good as yours when it comes to compatibility with the new versions of React and hooks and it is a lot of JavaScript and custom functions and code all over the app to make this happen which kind of takes the advantage of looking for a library to save us all of this work in the first place.

I'd really appreciate if you could please tell me if I could achieve this level of customization with kendo-react-gantt and/or why, and what am I going to miss in case there is something that it is not (i.e. Geo location).

Thanks once again and I look forward for your input,

Federico

Attached Files:
ADMIN
Stefan
Posted on: 02 Jun 2021 13:21

Hello, Federico,

We can add a specific class to each row based on the dataItem and then with CSS to select only the task element.

I updated  the example:

https://stackblitz.com/edit/react-up9qox-rpfkmh?file=app%2Fmain.jsx

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Federico
Posted on: 02 Jun 2021 13:07

Hi all!,

Is there any way we can work out the styles to for example pick up a task and color it by id so the rest of the tasks of the same class won't pick up changes in css? I feel like there is not enough walkthroughs to manage custom styling.

I'd really appreciate any inputs.

Regards,

Federico

ADMIN
Carl
Posted on: 17 Sep 2020 13:54

Hey everyone!

With R3 2020 we introduced the native KendoReact Gantt component! Head on over to the docs & demos to see how you can add it to your React projects today.

Regards,
Carl
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

ADMIN
Stefan
Posted on: 30 Sep 2019 06:10

Hello,

Thank you for voting for this feature.

Also, I would like to check if there are some limitations when using the wrapper in which we can assist until the pure React version is ready?

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Arnaud
Posted on: 28 Sep 2019 07:08
Waiting for this native port also !
ADMIN
Stefan
Posted on: 15 Aug 2019 07:27
Hello, Glen,

Until the native components is our, we can suggest using the jQuery version of the component using the described approach here:

https://docs.telerik.com/kendo-ui/third-party/react

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Glen
Posted on: 14 Aug 2019 16:14

Hi 

Gantt React component is will be essential need for us to continue to use Telerik component going forward.

Imported User
Posted on: 15 Jun 2018 07:09
This would make a significant difference in attracting my potential licence fees