Get Started With .NET Gantt Control: Defining User Interactions

Posted by Alfred Göhlich on Jun 10, 2015 2:30:00 PM

We assume that you closely followed our 'getting started with VARCHART XGantt' blog post series. If you did so, and if you applied your new knowledge to your Gantt scheduling application, this application should have become more and more powerful with every post of this series.

Now, that we covered many aspects of visualizing data, it is about time to also have a look at how to change data: This is, because the ultimate value of a Gantt chart is unleashed when you allow intelligent drag & drop interactions. This new blog post will show you some essential ways of user interactions. By the way: we regard user interactions as decisive when building visual scheduling applications and hence put them into the core of the the past release of our .NET Gantt control VARCHART XGantt and will further enhance them with the upcoming release end of June 2015.

Interactions in the Table and Diagram Area

The following descriptions will give you a general idea of interactions in the Gantt diagram. For a better understanding we have inserted a screenshot explaining basic elements of the chart.


Interactions in the Table Area

Modifying the left table/diagram width ratio

You can modify the sizes of the table and the diagram section of a Gantt chart by moving the gray vertical splitter bar between them. To show a value on the start, the ratio between the sections can be preset on the Layout property page in the field Left table/diagram width ratio.

Modifying the table column

By dragging the vertical separation line on the right of a table caption you can modify the width of a table column. You can automatically adjust the column width to the length of its contents by double clicking on the separation line. The automatical adjustment can be switched on or off on the General property page in the field Table column width optimization allowed.

Interactions with the Time Scale

Defining the start and end date of the time scale

By a double-click on the time scale you can pop up the Edit Timescale dialog box. It lets you edit the start and end dates of the time scale. This option may be activated or blocked on the General property page in the field Time scale dialog enabled.


Scaling the Time Scale

By dragging to the left or to the right in the time scale section you may enlarge or reduce the width of the unit of the time scale. This feature can be activated or or deactivated on the General property page at Time scale rescaling allowed.

Interactions with Activities

Creating a new activity

To create an activity, switch to Create Node mode by the context menu of the Gantt graph (right mouse button on an empty area).

The mouse pointer will turn to the shape of a small cross. While keeping the left mouse button pressed, please draw an activity in the desired area of the Gantt graph. When finished, please return to pointer mode by the context menu. An application program is able to interact with the "create" mode by the event VcNodeCreated(). This is useful for example, if you wish to pre-set data values of the activity being created.

Example Code C#
private void vcGantt1_VcNodeCreated(object sender, VcNodeCreatedEventArgs e)
   e.Node.set_DataField(1, "Node " + e.Node.get_DataField(0));
The code above will modify the value of the data field "Name". It will attach the current value of the field "ID" to the term "Node".

Modifying the duration of an activity

Please return to the "Select" mode and move the mouse pointer to the internal right or left margin of the activity. The mouse pointer will adopt the shape of a vertical line with an arrow. By dragging to the left or to the right, you can extend or shorten the activity.

Moving an activity

Please change to "Select" mode and place the mouse pointer on an activity. The pointer transforms into a small square with four arrows. Now you can move the activity to any position in the Gantt graph. If you wish to move more than one activity simultaneously please activate the option Selected nodes moving together on the Nodes property page.

Editing the data of an activity

By double clicking on the activity or on the corresponding table entry, you can open the dialog box Edit data.



Deleting an activity

Press the Del button or click Delete nodes in the context menu of the activity to delete marked activities. You can mark an activity by clicking on it or on the corresponding line in the table. If you keep the Ctrl key pressed, you can mark more than one activity.


Your next steps

You want to go on programming your application with our .NET Gantt control VARCHART XGantt and can't wait for the next sequence of our blog series? We support you by providing a very comprehensive developer's manual, which we highly recommend to use. In addition to this, you can also download our free whitepaper offering 11 best practice tips including code snippets:


Ebook- 11 Best Practice Tips for Advanced Gantt Visualization


For your reference: all posts from this series


Topics: Windows Forms Gantt Control, Gantt Best Practice, Gantt Chart Controls