Getting Started with the ActiveGanttCSE Gantt Chart Scheduler Component

Wednesday, November 9, 2011

ActiveGanttCSE is a Gantt Chart / Scheduler component designed for Silverlight 4 and C#. This is a complete tutorial that describes how to get started with the ActiveGanttCSE Component. It covers installing the component, as well as creating a very simple Silverlight 4 application with ActiveGanttCSE.

1. ActiveGanttCSE Requirements

2. Downloading the ActiveGanttCSE component.

3. Installing the ActiveGanttCSE component.

4. Examining the files created by the ActiveGanttCSE install program.

      4.1. The ActiveGanttCSE HTML Help Shortcut.

      4.2. The ActiveGanttCSE Demo Project Shortcut.

5. How to create a simple Silverlight application using the ActiveGanttCSE component.

1. ActiveGanttCSE Requirements.

For developing applications with ActiveGanttCSE:

For hosting your applications that use ActiveGanttCSE:

Notes:

2. Downloading the ActiveGanttCSE component.

The latest trial version of the ActiveGanttCSE component can be downloaded from this page in our website:

http://www.sourcecodestore.com/TrialDownloads/ActiveGantt/Default.aspx

Select ActiveGanttCSE from the drop down list and press the Download Now button, select the destination directory (this procedures varies according to the type of browser being used) and begin downloading.

The ActiveGanttCSE install program is packaged in a compressed .zip file. The file names are structured according to the following convention:

3. Installing the ActiveGanttCSE component.

Downloading will have left you with a file named AGCSE_NETXX_X_X_X(D/R).zip.

The ActiveGanttCSE install program does not contain any spyware, viruses or useless third party tools.

 

This .zip file contains two files: the .msi install package and a readme file in .rtf format. The readme file can be viewed using Microsoft Word or Word Pad.

 

Extract both files from the .zip file

 

Double click on the AGCSE_NETXX_X_X_X(D/R).msi file to begin the install process. In Windows Vista and above you will get a security prompt. Click on the Yes button to continue.

 

You will be taken to the welcome screen of the ActiveGanttCSE installation program. Click on the Next button.

 

You will then be prompted for the installation directory. Click on the Next button.

 

The install program will ask for your confirmation before beginning to install ActiveGanttCSE, click on the Next button.

 

Another security screen will ask you if you want the ActiveGanttCSE install program to copy software onto your computer. Click on the Yes button.

 

After the ActiveGanttCSE installation program finishes copying files to your computer, a browser window will open which contains all the above setup instructions plus any version specific information that might be of use.

 

Click on the Close button to terminate the installation of ActiveGanttCSE.

 

The ActiveGanttCSE component can now be uninstalled using the control panel. Always use the control panel application to uninstall ActiveGanttCSE. After uninstalling the ActiveGanttCSE component you can also erase the "C:\Program Files\Boötes Systems SAS\ActiveGanttCSE\" directory for a complete uninstall.

You must completely uninstall the ActiveGanttCSE component when upgrading to a more recent version or when switching from the Trial to the Release version.

4. Examining the files created by the ActiveGanttCSE install program.

On a default install of the ActiveGanttCSE component, all files will be copied to the "C:\Program Files\Boötes Systems SAS\ActiveGanttCSE\" directory.

The most important files in this directory are the following:

Path File Description
C:\Program Files\Boötes Systems SAS\ActiveGanttCSE\ AGCSE_TR.sln The Visual Studio Solution File
C:\Program Files\Boötes Systems SAS\ActiveGanttCSE\AGCSECON\ AGCSECON.csproj The example's C# project file
C:\Program Files\Boötes Systems SAS\ActiveGanttCSE\AGCSECON\AGCSE\ AGCSE.dll The ActiveGanttCSE Silverlight Control
C:\Program Files\Boötes Systems SAS\ActiveGanttCSE\Additional Files\ AGCSE.chm The ActiveGanttCSE compiled HTML Help file

 

The install program will generate one shortcut on the desktop, the ActiveGanttCSE Demo Project is a shortcut to the AGCSE_TR.sln file.

 

The install program will also create an ActiveGanttCSE menu in Programs. This menu contains copies of the shortcut installed on the desktop, plus a shortcut to the ActiveGanttCSE help file and a shortcut to the ReadMe file.

4.1. The ActiveGanttCSE HTML Help Shortcut.

 

Clicking on the ActiveGanttCSE Help shortcut in the ActiveGanttCSE menu will bring up the local HTML help file for the component.

 

This help file is also available online from this link:

http://www.sourcecodestore.com/Documentation/DOCFrameset.aspx?PN=AG&PL=CSE

4.2. The ActiveGanttCSE Demo Project Shortcut.

Clicking on the ActiveGanttCSE Demo Project shortcut will generate an elevated permissions prompt in the operating system. Click on the Restart this application under different credentials option.

 

You will then get a User Access Control prompt. Click on the Yes button.

 

You will then get the AGCSE_TR.sln Visual Studio solution file.

The Visual Studio solution file contains all the source code for the ActiveGanttCSE example. You can press the F5 key to begin debuging.

The ActiveGanttCSE Demo has two main examples:

Both examples have a single mode:

All the code used to generate the demo is included in the AGCSE_TR.sln Visual Studio Solution.

5. How to create a simple Silverlight application using the ActiveGanttCSE component.

Start a new instance of Visual Studio.

 

Select   File -> New -> Project....

.

 

In the New Project dialog select   Installed Templates -> C# -> Silverlight -> Silverlight Application. Leave the solution's name as the default: SilverlightApplication2.

 

The Silverlight template will ask you if you want to host the Silverlight application in a website. Click on OK to continue.

.

 

The template will generate a Silverlight application with a single Silverlight Page called MainPage.

 

Select the Toolbox tab on left. Right click on any control and from the drop down menu select the Choose Items... option.

 

The Choose Toolbox Items dialog will pop-up. Click on the Browse button in the Silverlight Components tab.

 

Select the ActiveGanttCSE component (AGCSE.dll). In a default installation it will be located in "C:\Program Files\Boötes Systems SAS\ActiveGanttCSE\AGCSECON\AGCSE\AGCSE.dll". Then click on the Open button.

 

The ActiveGanttCSECtl is now included in the Choose Toolbox Items dialog. Click on the OK button to exit the dialog.

 

After exiting the Choose Toolbox Items dialog, the ActiveGanttCSECtl component will now be present in the Toolbox.

 

Drag the ActiveGanttCSECtl from the Toolbox onto the MainWindow.

When you change the MainWindow's XAML code to the following:


<UserControl x:Class="SilverlightApplication2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="800" d:DesignWidth="800" xmlns:my="clr-namespace:AGCSE;assembly=AGCSE">

    <Grid x:Name="LayoutRoot" Background="White">
        <my:ActiveGanttCSECtl Name="ActiveGanttCSECtl1" VerticalAlignment="Top" Height="600" Width="800" />
    </Grid>
</UserControl>

 

The ActiveGanttCSE control and the MainWindow will be resized to a more appropriate size. Press the F5 key to begin debugging or alternatively you can go to the  Debug -> Start Debugging  menu.

 

At this time you will only have an ActiveGanttCSE control with no functionality. The watermark on the lower right hand side will only be present in the trial version of the ActiveGanttCSE component.

 

Close the window to exit debugging. You will again have the MainWindow in design view. Go to the Properties Window on the bottom right hand side. Click on the Events tab. Scroll down to Loaded and double click on the dropdown on the right.

Include the following code:


        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            int i;
            ActiveGanttCSECtl1.Columns.Add("Column 1", "", 125, "");
            ActiveGanttCSECtl1.Columns.Add("Column 2", "", 100, "");
            ActiveGanttCSECtl1.Splitter.Position = 225;
            for (i = 1; i <= 10; i++)
            {
                ActiveGanttCSECtl1.Rows.Add("K" + i.ToString(), "Row " + i.ToString() + " (Key: " + "K" + i.ToString() + ")", true, true, "");
            }

            ActiveGanttCSECtl1.Redraw();
        }

The above code will create two Columns and ten empty Rows. Notice that every Row has to be identified by a unique key, "K1", "K2", K3", etc.

 

Press the F5 key to begin debugging. You will now have an ActiveGanttCSE control with no Task objects.

 

You can add Task objects by clicking and dragging over any Row in the Client Area of the ActiveGanttCSE control.

You can also add Task objects programmatically:


        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            int i;
            ActiveGanttCSECtl1.Columns.Add("Column 1", "", 125, "");
            ActiveGanttCSECtl1.Columns.Add("Column 2", "", 100, "");
            ActiveGanttCSECtl1.Splitter.Position = 225;
            for (i = 1; i <= 10; i++)
            {
                ActiveGanttCSECtl1.Rows.Add("K" + i.ToString(), "Row " + i.ToString() + " (Key: " + "K" + i.ToString() + ")", true, true, "");
            }

            ActiveGanttCSECtl1.CurrentViewObject.TimeLine.Position(new AGCSE.DateTime(2011, 11, 21, 0, 0, 0));
            ActiveGanttCSECtl1.Tasks.Add("Task 1", "K1", new AGCSE.DateTime(2011, 11, 21, 0, 0, 0), new AGCSE.DateTime(2011, 11, 21, 3, 0, 0), "", "", "");
            ActiveGanttCSECtl1.Tasks.Add("Task 2", "K2", new AGCSE.DateTime(2011, 11, 21, 1, 0, 0), new AGCSE.DateTime(2011, 11, 21, 4, 0, 0), "", "", "");
            ActiveGanttCSECtl1.Tasks.Add("Task 3", "K3", new AGCSE.DateTime(2011, 11, 21, 2, 0, 0), new AGCSE.DateTime(2011, 11, 21, 5, 0, 0), "", "", "");

            ActiveGanttCSECtl1.Redraw();
        }

 

The above code will produce this result.

The examples included in the demo cover almost every piece of functionality present in the ActiveGanttCSE component, but if you need further assistance please read our ActiveGantt support options. Important: if you are sending an e-mail you have to specify that you are referring to the ActiveGanttCSE component, otherwise you will inevitably experience delays in having your query answered.

 

All trademarks are property of their respective holders, and are only used to directly describe the products and services being provided. Their use in no way indicates any relationship or endorsement between The Source Code Store LLC and the holders of said trademarks.