React Gantt show_chart

Gantt
#1

Hi,

I cloned a sample of React Gantt from react-gantt-demo [github] and made some adjust to toggle the show_chart.

I default the config of show_chart to be true, and upon first toggle, it is able to close the chart. But upon clicking again, it does not open up the chart as well.

The left side bar also look weird after the chart is closed, the + does not get pushed to the most right.

I have made a sample, and uploaded to github.

I have added new state display in App.js to maintain the state and pass down to Gantt.js as props.

P.S: I came across a simple snippet here, and it is actually working using JS only.

Thanks.

#2

Hello Joseph,
Looks like, it was a bug in the 4.2 version.
I downloaded your sample from GitHub and reproduced the issue. But then I installed 6.0.5 version and it works correctly.
To install the newer version, you can specify it in the package.json file:

Or if you have the Pro/Trial version, you can use the following command:

npm install 'path to gantt folder with package.json file'

for example:

npm install /opt/gantt_trial

https://docs.dhtmlx.com/gantt/desktop__install_with_bower.html#addingprofessionaleditionintoproject

If you don’t have package.json file near the codebase folder, you can download the following one:
https://files.dhtmlx.com/30d/cb80c0faf513b1caab81d79fe9266c4e/package.json

#3

Hey ramil,

Thanks for the response.

Appreciate the help, and it was indeed the issue with the version.

I have updated the dependencies version, and it is working fine now.

Cheers,

#4

Hey ramil,

I was also wondering that in this snippet, whenever, the chart is toggled to hide. The left grid will be expanded to full width. Is it possible to hide the chart, and leaving the left grid width intact?

Kind of like the left grid will stay as it is, and the chart on the right will be hidden.

Thanks.

#5

Hello Joseph,
Yes, it is possible to do that by modifying the styles:
http://snippet.dhtmlx.com/ed4c9d203
The display property will really hide the chart, but if you decrease the size of the grid, you won’t be able to resize it back. The visibility only hides the chart, so you can freely resize the chart.

#6

Thanks for that.

I’m also looking at the possibility to hide the border, I did it using the following.

<style>
  .gantt_layout_cell_border_bottom {
  	border-bottom: none;
  }
  .gantt_layout_cell_border_top {
  	border-top: none;
  }
  .gantt_layout_cell_border_left {
  	border-left: none;
  }
  .gantt_layout_cell_border_right {
  	border-right: none;
  }
</style>

You can view the snippet here.

I am wondering if…

  1. There is any easier way to achieve no border like my snippet.
  2. Any way to remove the border like I did, but not the one between the left grid and the timeline (chart). So there should still a border line (solid) between them. Because if I do gantt_layout_cell_border_right to none, then it will be gone together with the one on the most right.

Thanks.

#7

Hello Joseph,
Gantt doesn’t have built-in properties for hiding the border, so you can only change it via CSS or Javascript.

If you want to stretch Gantt to take the whole space on the page, you can use the following properties (in that way Gantt is “borderless”):

html, body {
  height: 100%;
  padding: 0px;
  margin: 0px;
}

http://snippet.dhtmlx.com/ce1f2cef9

Another way (and it answers the second question) is to remove the borders from the Gantt container.

.gantt_container, .custom_css{
  border: 0px solid #cecece;
}

http://snippet.dhtmlx.com/3f29fc087

#8

Once again, thank you for your help on this.

Like to clarify how did the .custom_css got applied into the chart? I don’t see any place that you specify .custom_css. When and how did it got applied into the css?

Thanks.

#9

Hello Joseph,
Sorry, I copied that from another snippet and forgot to remove it. It doesn’t do anything important there.

#10

I see. Sure, thanks!