Getting Started with the ActiveGanttCSA Gantt Chart Scheduler Component

Saturday, September 17, 2011

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

1. ActiveGanttCSA Requirements

2. Downloading the ActiveGanttCSA component.

3. Installing the ActiveGanttCSA component.

4. Examining the files created by the ActiveGanttCSA install program

      4.1. The ActiveGanttCSA HTML Help Shortcut.

      4.2. The ActiveGanttCSA Demo Project Shortcut.

      4.3. The ActiveGanttCSA Demo Website Shortcut.

5. How to create a simple ASP.NET application using the ActiveGanttCSA component.

1. ActiveGanttCSA Requirements:

For developing applications with ActiveGanttCSA:

For deploying your applications that use ActiveGanttCSA:

Notes:

2. Downloading the ActiveGanttCSA component.

The latest version of the ActiveGanttCSA component is accessible from this page in our website:

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

Select ActiveGanttCSA 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 ActiveGanttCSA install program is packaged in a compressed .zip file. The file names are structured according to the following convention:

3. Installing the ActiveGanttCSA component.

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

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

 

This .zip file contains four files: the .msi install package, a readme file in .rtf format, an Install_As_Administrator.Reg file and an installation instructions file in .rtf format . The readme and installation instructions files can be viewed using Microsoft Word or Word Pad.

 

Extract all files from the .zip file

The first step in the installation process is to create an install as administrator option for .msi files. The Install_As_Administrator.reg file contains the following merge module for the Windows registry:


Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\Msi.Package\shell\runas]
@="Install &As Administrator..."

[HKEY_CLASSES_ROOT\Msi.Package\shell\runas\command]
@="msiexec /i \"%1\""

This creates an "Install As Administrator..." option in the drop down menu for .msi files and once this option is selected msiexec will run with elevated privileges. Double click on the Install_As_Administrator.reg file.

You will receive a Security Warning. Click on the Run button.

 

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

 

You will then get another prompt from the Registry Editor. Click on the Yes button.

 

Right click on the AGCSA_NETXX_X_X_X(D/R).msi file, select the Install As Administrator... option to begin the install process.

 

You will get a User Account Control security prompt. Click on the Yes button to continue.

 

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

 

You will then be prompted for several installation options. It is very important that you select ASP.NET v4.0 as the application pool in the third option. If you do not select ASP.NET v4.0 as your application pool an error will be generated when trying to execute the ActiveGanttCSA Demo Website. Click on the Next button.

 

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

 

After the ActiveGanttCSA 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 ActiveGanttCSA.

 

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

You must completely uninstall the ActiveGanttCSA 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 ActiveGanttCSA install program.

On a default install of the ActiveGanttCSA component, most files will be copied to the "C:\Inetpub\wwwroot\AGDemoNETXX\" directory and some files will be copied to the "C:\Program Files\The Source Code Store LLC\ActiveGanttCSA\" directory.

The most important files copied by ActiveGanttCSA install program are the following:

Path File Description
C:\Inetpub\wwwroot\AGDemoCSNETXX\ AGCSA_TR.sln The Visual Studio Solution File
C:\Inetpub\wwwroot\AGDemoCSNETXX\ AGDemoCS.csproj The example's C# project file
C:\Inetpub\wwwroot\AGDemoCSNETXX\bin\ AGDemoCS.dll The AGDemoCS web project's .dll file
C:\Inetpub\wwwroot\AGDemoCSNETXX\AGCSA\ AGCSA.dll The ActiveGanttCSA ASP.NET Web Server Component
C:\Program Files\The Source Code Store LLC\ActiveGanttCSA\Additional Files\ AGCSA.chm The ActiveGanttCSA compiled HTML Help file

 

The install program will generate two shortcuts on the desktop, ActiveGanttCSA Demo Project is a shortcut to the AGCSA.sln file and ActiveGanttCSA Demo Website is a shortcut to the http://localhost/AGDemoCSNETXX/ website.

 

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

4.1. The ActiveGanttCSA HTML Help Shortcut.

 

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

 

This help file is also available online from the following link:

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

4.2. The ActiveGanttCSA Demo Project Shortcut.

 

Clicking on the ActiveGanttCSA 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 to the AGCSA.sln Visual Studio solution file.

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

4.3. The ActiveGanttCSA Demo Website Shortcut.

 

Clicking on the ActiveGanttCSA Demo Website will bring open a browser window with the url http://localhost/AGDemoCSNETXX/ and this screen.

The ActiveGanttCSA Demo has two main examples:

Both examples have three modes:

Additionally the ActiveGanttCSA Demo has three examples on how to read Microsoft Project 2003, 2007 and 2010 XML files.

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

*Microsoft has not released and does not intend to release an ODBC driver for Access databases for x64 systems and therefore, the Access data source mode is not available when running the demo in 64 bit mode on a 64 bit system.

5. How to create a simple ASP.NET application using the ActiveGanttCSA component.

Start a new instance of Visual Studio. In order to be able to access local IIS websites, Visual Studio must always be started with administrator privileges. Right click on Microsoft Visual Studio and select the Run as administrator option.

 

You will get a User Account Control prompt, click on the Yes button.

 

When Visual Studio is loaded select   File -> New -> Project....

 

In the New Project dialog select   Installed Templates -> Visual C# -> Web -> ASP.NET Web Application. You can change or leave the solution's name as the default, in this case: WebApplication2.

 

The ActiveGanttCSA component generates images on the fly and does not store them on the server. It does so by using IIS and an httpModule called clsAGCSARenderStream. In order for the module to work correctly the ASP.NET Web Application project's properties must be modified and some changes have to be done in the Web.config file.

 

Go to Solution Explorer and right click on the WebApplication2 project and select the Properties option.

 

In the Web tab select the option Use Local IIS server and click on the Create Virtual Directory button.

 

You should get a "virtual directory created successfully" message box.

Go to File -> Save All to save changes to your project.

 

Open the Web.config file and make the following changes:

If you are using IIS 7:


<configuration>
...
    <system.webServer>
        ...
        <modules>
            <add type="AGCSA.clsAGCSARenderStream, AGCSA" name="clsAGCSARenderStream"/>
        </modules>
        ...
    </system.webServer>
...
</configuration>

If you are using IIS 6:


<configuration>
    ...
    <system.web>
        ...
        <httpModules>
            <add type="AGCSA.clsAGCSARenderStream, AGCSA" name="clsAGCSARenderStream"/>
        </httpModules>
        ...
    </system.web>
    ...
</configuration>

In both cases, IIS7 and IIS6 eliminate this line:


    <modules runAllManagedModulesForAllRequests="true"/>

Or perform the following modification:


        <modules runAllManagedModulesForAllRequests="true">
            <add type="AGCSA.clsAGCSARenderStream, AGCSA" name="clsAGCSARenderStream"/>
        </modules>

 

The ASP.NET Web Application template will have left you with a Default.aspx page.

 

This page contains elements from the Site.Master page which we will not be using for this example.

But before we modify the HTML markup for this page we will add the ActiveGanttCSA to the project and the page.

 

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 .NET Framework Components tab.

 

Select the ActiveGanttCSA component (AGCSA.dll). In a default installation it will be located in "C:\Inetpub\wwwroot\AGDemoCSNETXX\AGCSA\AGCSA.dll". Then click on the Open button.

 

The ActiveGanttCSACtl 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 ActiveGanttCSACtl component will now be present in the Toolbox.

 

The ASP.NET Web Application template will have generated the following code in Default.aspx's markup:


<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
    </p>
    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>
</asp:Content>

Erase the two asp:Content elements (HeaderContent and BodyContent), the MasterPageFile="~/Site.master" property and include the following code:


<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>

<%@ Register assembly="AGCSA" namespace="AGCSA" tagprefix="cc1" %>

<html>
<head id="Head1" runat="server">
<title></title>
</head>
    <body>
        <form id="Form1" method="post" runat="server">
            <cc1:ActiveGanttCSACtl ID="ActiveGanttCSACtl1" runat="server" Height="600px" Width="1024px" />
        </form>
    </body>
</html>

The first time you use the control in a project you should drag the ActiveGanttCSACtrl onto an .aspx page, because this automatically will create a reference to AGCSA.dll in the project. Otherwise you will have to create that reference manually. When dragging ActiveGanttCSACtl from the Toolbox onto an .aspx page, Visual Studio will only generate this code for the control:


...
<%@ Register assembly="AGCSA" namespace="AGCSA" tagprefix="cc1" %>
...
<cc1:ActiveGanttCSACtl ID="ActiveGanttCSACtl1" runat="server"/>
...

But in order for the ActiveGanttCSA control to function, it must have a height and a width property expressed in pixels (ActiveGanttCSA's width and height cannot be expressed in percentages).

 

Press the F5 key to begin debugging at this stage and you will get this output. You will only have an ActiveGanttCSA control with no functionality.

The watermark on the lower right hand side will only be present in the trial version of the ActiveGanttCSA component.

Close the browser to exit debugging. You will again have Default.aspx in code view (HTML markup). Go to Default.aspx's design view and double click on any empty space (avoid double clicking on the ActiveGanttCSACtl) to add code for the page's Load event, and add this code:


        protected void Page_Load(object sender, EventArgs e)
        {
            int i;
            ActiveGanttCSACtl1.Columns.Add("Column 1", "", 125, "");
            ActiveGanttCSACtl1.Columns.Add("Column 2", "", 100, "");
            for (i = 1; i <= 10; i++)
            {
                ActiveGanttCSACtl1.Rows.Add("K" + i.ToString());
            }
        }

 

Press the F5 key to begin debugging.

You will have an ActiveGanttCSA control with two Columns and ten empty Rows. Notice that every Row has to be identified by a unique key, "K1", "K2", K3", etc.

To position the Time Line on a given date and add some Task objects, change the above code to this version:


        protected void Page_Load(object sender, EventArgs e)
        {
            int i;
            ActiveGanttCSACtl1.Columns.Add("Column 1", "", 125, "");
            ActiveGanttCSACtl1.Columns.Add("Column 2", "", 100, "");
            for (i = 1; i <= 10; i++)
            {
                ActiveGanttCSACtl1.Rows.Add("K" + i.ToString());
            }
            //Position Time Line and add some tasks
            ActiveGanttCSACtl1.CurrentViewObject.TimeLine.Position(new AGCSA.DateTime(2011, 9, 18, 0, 0, 0));

            ActiveGanttCSACtl1.Tasks.Add("Task1", "K1", new AGCSA.DateTime(2011, 9, 18, 1, 0, 0), new AGCSA.DateTime(2011, 9, 18, 3, 0, 0), "", "", "");
            ActiveGanttCSACtl1.Tasks.Add("Task2", "K1", new AGCSA.DateTime(2011, 9, 18, 4, 0, 0), new AGCSA.DateTime(2011, 9, 18, 5, 0, 0), "", "", "");

            ActiveGanttCSACtl1.Tasks.Add("Task3", "K2", new AGCSA.DateTime(2011, 9, 18, 1, 0, 0), new AGCSA.DateTime(2011, 9, 18, 6, 0, 0), "", "", "");

        }

 

Press the F5 key to begin debugging and you will get this output.

The examples included in the demo cover almost every piece of functionality present in the ActiveGanttCSA 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 ActiveGanttCSA 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.