How to Start Using Infragistics XamGantt Control

[Infragistics] Mihail Mateev / Sunday, October 7, 2012

The xamGantt control is a cross platform control that provides a user interface similar to the Microsoft Project 2010.

You can create, edit and visualize your project plan, create deadlines, milestones and set dependencies between tasks using the xamGantt control. The control’s scheduling engine performs calculations on every edit to keep the plan up to date. In a series of several articles you can read the Infragistics Gantt Chart, beginning with an introduction and going to the details and tricks.

Probably the most important information for developers is how to start to use a specific control and how to integrate their applications. This blog is exactly as an introduction how to start working with Infragistics XamGantt control. I hope after this article programmers will have fun with this component.

Infragistics Gantt Control helps to create own project planning applications, that can contain most of the Microsoft Project features. Using Infragistics NetAdvantage for XAML (WPF and Silverlight) Vol. 12.2 you can create software for project-management teams providing the benefit from the next NetAdvantage updates of and features .

To be possible to start with Gantt Chart control you need to know how to:

Add XamGantt to your application
Gantt Control Data Binding
Set Gant Chart Settings
Create a Project
Create Tasks
- using code
- using user interaction
Edit Task
Delete Task

Adding XamGantt to your application

A project should has the following required references:

InfragisticsWPF4.Controls.Editors.XamCalendar.dll
InfragisticsWPF4.Controls.Grids.XamGrid.dll
InfragisticsSL.Controls.Interactions.XamDialogWindow.dll (Only required for Silverlight projects)
InfragisticsWPF4.Controls.Menus.XamMenu.dll
InfragisticsWPF4.Controls.Schedules.dll
InfragisticsWPF4.Controls.Schedules.XamGantt.dll
InfragisticsWPF.DataManager.dll (Only required for WPF projects)
InfragisticsWPF4.dll

If you want to use Gantt control from Visual Studio toolbox all references will be added automatically.

Infragistics Gantt Control Data Binding

The XamGantt control provides two options for data binding:

Via the XamGantt Project property set to a Project instance
Via the ListBackedProject and its TaskItemsSource property set to arbitrary custom tasks collection

Binding to Arbitrary Tasks Collection Using ListBackedProject

In many real life cases you can have own model for the tasks (for example when we have data stored in database and use ORM to create classes for your model) The XamGantt control can be bound to a collection of custom tasks. In this case, create an instance of ListBackedProject and set it to the XamGantt Project property.

To be possible to use custom tasks you need to:

Create a custom task Model class
Create a ViewModel class
Create a ListBackedProject and bind it to data
Create project task property to custom task property mappings
Set the XamGantt Project property to the created ListBackedProject

Create a custom task Model class

Create an additional class named ObservableModel, that implements INotifyPropertyChanged

public class ObservableModel : INotifyPropertyChanged

{

    #region NotifyPropertyChanged

    public event PropertyChangedEventHandler PropertyChanged;

    protected void NotifyPropertyChanged(String info)

    {

        if (PropertyChanged != null)

        {

            PropertyChanged(this, new PropertyChangedEventArgs(info));

        }

    }

    #endregion NotifyPropertyChanged

}

Create a custom task model

class TaskModel : ObservableModel

{

    #region ConstraintType

    private ProjectTaskConstraintType _constraintType;

    public ProjectTaskConstraintType ConstraintType

    {

        get

        {

            return _constraintType;

        }

        set

        {

            if (_constraintType != value)

            {

                _constraintType = value;

                this.NotifyPropertyChanged("ConstraintType");

            }

        }

    }

    #endregion ConstraintType

 

    #region ConstraintDate

    private DateTime _constraintDate;

    public DateTime ConstraintDate

    {

        get

        {

            return _constraintDate;

        }

        set

        {

            if (_constraintDate != value)

            {

                _constraintDate = value;

                this.NotifyPropertyChanged("ConstraintDate");

            }

        }

    }

    #endregion ConstraintDate

 

    #region DeadlineDate

    private DateTime? _deadlineDate;

    public DateTime? DeadlineDate

    {

        get

        {

            return _deadlineDate;

        }

        set

        {

            if (_deadlineDate != value)

            {

                _deadlineDate = value;

                this.NotifyPropertyChanged("DeadlineDate");

            }

        }

    }

    #endregion //DeadlineDate

 

    #region DurationFormat

    private ProjectDurationFormat _durationFormat;

    public ProjectDurationFormat DurationFormat

    {

        get

        {

            return _durationFormat;

        }

        set

        {

            if (_durationFormat != value)

            {

                _durationFormat = value;

                this.NotifyPropertyChanged("DurationFormat");

            }

        }

    }

    #endregion DurationFormat

 

    #region Duration

    private TimeSpan _duration;

    public TimeSpan Duration

    {

        get

        {

            return _duration;

        }

        set

        {

            if (_duration != value)

            {

                _duration = value;

                this.NotifyPropertyChanged("Duration");

            }

        }

    }

    #endregion Duration

 

    #region IsMilestone

    private bool _isMilestone = false;

    public bool IsMilestone

    {

        get

        {

            return _isMilestone;

        }

        set

        {

            if (_isMilestone != value)

            {

                _isMilestone = value;

                this.NotifyPropertyChanged("IsMilestone");

            }

        }

    }

    #endregion IsMilestone

 

    #region IsInProgress

    private bool _isInProgress = true;

    public bool IsInProgress

    {

        get

        {

            return _isInProgress;

        }

        set

        {

            if (_isInProgress != value)

            {

                _isInProgress = value;

                this.NotifyPropertyChanged("IsInProgress");

            }

        }

    }

    #endregion IsInProgress

 

    #region IsUndetermined

    private bool _isUndetermined = false;

    public bool IsUndetermined

    {

        get

        {

            return _isUndetermined;

        }

        set

        {

            if (_isUndetermined != value)

            {

                _isUndetermined = value;

                this.NotifyPropertyChanged("IsUndetermined");

            }

        }

    }

    #endregion //IsUndetermined

 

    #region Predecessors

    private string _predecesors;

    public string Predecessors

    {

        get { return _predecesors; }

        set

        {

            if (value != _predecesors)

            {

                _predecesors = value;

                this.NotifyPropertyChanged("Predecessors");

            }

        }

    }

    #endregion //Predecessors

 

    #region Successors

    private string _successors;

    public string Successors

    {

        get { return _successors; }

        set

        {

            if (value != _successors)

            {

                _successors = value;

                this.NotifyPropertyChanged("Successors");

            }

        }

    }

    #endregion //Successors

 

    #region Start

    private DateTime _start;

    public DateTime Start

    {

        get

        {

            return _start;

        }

        set

        {

            if (_start != value)

            {

                _start = value;

                this.NotifyPropertyChanged("Start");

            }

        }

    }

    #endregion Start

 

 

    #region TaskID

    private string _taskId;

    public string TaskID

    {

        get

        {

            return _taskId;

        }

        set

        {

            if (_taskId != value)

            {

                _taskId = value;

                this.NotifyPropertyChanged("TaskID");

            }

        }

    }

    #endregion TaskID

 

    #region Tasks

    private string _tasks;

    public string Tasks

    {

        get

        {

            return _tasks;

        }

        set

        {

            if (_tasks != value)

            {

                _tasks = value;

                this.NotifyPropertyChanged("Tasks");

            }

        }

    }

    #endregion Tasks

 

    #region TaskName

    private string _name;

    public string TaskName

    {

        get

        {

            return _name;

        }

        set

        {

            if (_name != value)

            {

                _name = value;

                this.NotifyPropertyChanged("TaskName");

            }

        }

    }

    #endregion TaskName

 

    #region ResourceName

    private string _resourceName;

    public string ResourceName

    {

        get

        {

            return _resourceName;

        }

        set

        {

            if (_resourceName != value)

            {

                _resourceName = value;

                this.NotifyPropertyChanged("ResourceName");

            }

        }

    }

    #endregion ResourceName

 

}

Implement a ViewModel to present the whole project and the selected task in a Gantt control

class ProjectViewModel : ObservableModel

{

    #region Constructor

    public ProjectViewModel()

    {

        this.Tasks = new ObservableCollection();

    }

    #endregion Constructor

  

    #region SelectedTask

    private TaskModel _selectedTask;

    public TaskModel SelectedTask

    {

        get

        {

            return _selectedTask;

        }

        set

        {

            if (value != null)

            {

                _selectedTask = value;

            }

  

            NotifyPropertyChanged("SelectedTask");

        }

    }

    #endregion SelectedTask

  

    #region Tasks

    private ObservableCollection _tasks;

    public ObservableCollection Tasks

    {

        get

        {

            return _tasks;

        }

        set

        {

            if (value != null)

            {

                _tasks = value;

            }

  

            NotifyPropertyChanged("Tasks");

        }

    }

    #endregion //Tasks

  

}

Create a ListBackedProject and bind it to data

<ig:ListBackedProject x:Name="dataProvider" TaskItemsSource="{Binding Tasks}">

   <ig:ListBackedProject.TaskPropertyMappings>

       <ig:ProjectTaskPropertyMappingCollection UseDefaultMappings="True">

  

           

  

  

       ig:ProjectTaskPropertyMappingCollection>

   ig:ListBackedProject.TaskPropertyMappings>

   <ig:ListBackedProject.TaskSettings>

       <ig:ProjectTaskSettings AllowChangeIndentation="True" 

                   AllowDelete="True"

                   AllowDragDeadline="True"

                   AllowDragMilestone="True"

                   AllowDragPercentComplete="True"

                   AllowDragSummary="Always"

                   AllowDragTask="True"                              

                   AllowInsert="True" 

                   AllowResizeSummary="Always"                                        

                   AllowResizeTask="True"/>

   ig:ListBackedProject.TaskSettings>

  

ig:ListBackedProject>

Set XamGantt Column Settings (optional)

These settings are used to define how to maintain task settings in Gantt control

<ig:XamGantt Margin="10" x:Name="xamGantt" VerticalAlignment="Top" ActiveCellChanged="xamGantt_ActiveCellChanged"  Project="{Binding ElementName=dataProvider}">

    <ig:XamGantt.DefaultColumnSettings>

        <ig:ProjectColumnSettings AllowHide="True"

                      AllowMove="True"

                      AllowResize="True"

                      AllowShow="True"  />

    ig:XamGantt.DefaultColumnSettings>

ig:XamGantt>

Create a mappings collection using TaskPropertyMappings

In every ProjectTaskPropertyMapping, the TaskProperty specifies a ProjectTask property and the DataObjectProperty specifies the corresponding custom task property.

Mandatory Mappings:

The following mappings are mandatory:

DataItemId – to uniquely identify the task
Tasks – to store the child tasks of a task
ConstraintType/ConstraintDate
DurationFormat – to specify the units for the duration and to track whether the duration is an elapsed duration.



<ig:ProjectTaskPropertyMapping TaskProperty="DataItemId" 

                   DataObjectProperty="TaskID" />

<ig:ProjectTaskPropertyMapping TaskProperty="ConstraintType" 

                   DataObjectProperty="ConstraintType" />

<ig:ProjectTaskPropertyMapping TaskProperty="DurationFormat" 

                   DataObjectProperty="DurationFormat" />

<ig:ProjectTaskPropertyMapping TaskProperty="Tasks" 

                   DataObjectProperty="Tasks" />



Mandatory mappings are required to have an own project ViewModel with custom task. These mapping don’t allow to maintain tasks activation and to schedule manually tasks.

Schedule manually tasks in the project.

To support manual tasks scheduling you need to map property from your custom task model to IsManual property from ProjectTask class



  

<ig:ProjectTaskPropertyMapping TaskProperty="IsManual" 

                   DataObjectProperty="IsUndetermined" />

  



In this case you can change the state of the task schedule between manual and automatic.

Maintain task active/inactive state

You need to map ProjectTask.IsActive property to a property from your custom task model



  

<ig:ProjectTaskPropertyMapping TaskProperty="IsActive" 

                   DataObjectProperty="IsInProgress" />

  



In this case you can change the state of the task schedule between manual and automatic.

Other task property mappings.

The sample below shows other property mappings. If you need to change some task properties via ViewModel you need to implement an appropriate mapping.

<ig:ListBackedProject.TaskPropertyMappings>

    <ig:ProjectTaskPropertyMappingCollection UseDefaultMappings="True">

  

        

        <ig:ProjectTaskPropertyMapping TaskProperty="DataItemId" 

                           DataObjectProperty="TaskID" />

        <ig:ProjectTaskPropertyMapping TaskProperty="ConstraintType" 

                           DataObjectProperty="ConstraintType" />

        <ig:ProjectTaskPropertyMapping TaskProperty="ConstraintDate" 

                           DataObjectProperty="ConstraintDate" />

        <ig:ProjectTaskPropertyMapping TaskProperty="DurationFormat" 

                           DataObjectProperty="DurationFormat" />

        <ig:ProjectTaskPropertyMapping TaskProperty="Tasks" 

                           DataObjectProperty="Tasks" />

        

  

        

  

        <ig:ProjectTaskPropertyMapping TaskProperty="IsManual" 

                           DataObjectProperty="IsUndetermined" />

  

        

  

        

  

        <ig:ProjectTaskPropertyMapping TaskProperty="Predecessors" DataObjectProperty="Predecessors" />

  

        

        

        

  

        <ig:ProjectTaskPropertyMapping TaskProperty="IsActive" 

                           DataObjectProperty="IsInProgress" />

  

        

  

        

  

        <ig:ProjectTaskPropertyMapping TaskProperty="TaskName" 

                           DataObjectProperty="TaskName" />

  

        <ig:ProjectTaskPropertyMapping TaskProperty="Start" 

                           DataObjectProperty="Start" />

  

  

        <ig:ProjectTaskPropertyMapping TaskProperty="Duration" 

                           DataObjectProperty="Duration" />

  

  

        <ig:ProjectTaskPropertyMapping TaskProperty="IsMilestone" 

                           DataObjectProperty="IsMilestone" />

  

        <ig:ProjectTaskPropertyMapping TaskProperty="Deadline" 

                           DataObjectProperty="DeadlineDate" />

  

        

  

  

    ig:ProjectTaskPropertyMappingCollection>

ig:ListBackedProject.TaskPropertyMappings>

Binding to Data Using Project

If you want to load a data from external source like a Microsoft Project 2010 XML file or you want to create an empty project and fill the tasks later, you may use the XamGantt Project property. In this scenario you can maintain data using XamGantt built-in classes and import/export projects using other formats.

To be possible to use built-in project tasks you need to:

Create an instance of the XamGantt
Create an instance of Project
Set the XamGantt Project property to the created Project instance

Create a ViewModel with a property representing a Gantt Project

class NativeProjectViewModel : ObservableModel

{

    #region Constructor

    public NativeProjectViewModel()

    {

        this._project = new Project(); 

        ProjectTask root = new ProjectTask { TaskName = "Root Task", IsManual = false, Duration = new TimeSpan(3, 0, 0, 0) };

  

        Project.RootTask.Tasks.Add(root);

    }

    #endregion //Constructor

  

    #region SelectedTask

    private ProjectTask _selectedTask;

    public ProjectTask SelectedTask

    {

        get

        {

            return _selectedTask;

        }

        set

        {

            if (value != null)

            {

                _selectedTask = value;

            }

  

            NotifyPropertyChanged("SelectedTask");

        }

    }

    #endregion SelectedTask

  

    #region Project

    private Project _project;

    public Project Project

    {

        get

        {

            return this._project;

        }

        set

        {

            if (this._project != value)

            {

                this._project = value;

                this.NotifyPropertyChanged("Project");

            }

        }

    }

    #endregion //Project

  

}

Create an instance of Project



    "nativeviewmodel" />



Set the XamGantt Project property to the created Project instance

"{StaticResource nativeviewmodel}">

    "10" x:Name="nativeGantt" ActiveCellChanged="nativeGantt_ActiveCellChanged" Project="{Binding Project}"/>



Create Task

You can create a task programmatically or via XamGantt UI (Context menu)

Create Tasks (Using ListBackedProject, Arbitrary Tasks Collection and Custom Tasks)

The sample below demonstrates how to create a custom task and add it to Tasks collection of your ViewModel (using C#)

TaskModel newTask = new TaskModel();

  

newTask.DurationFormat = Infragistics.Controls.Schedules.ProjectDurationFormat.ElapsedDays;

newTask.Duration = new TimeSpan(8, 0, 0);

newTask.IsMilestone = false;

newTask.TaskName = "CustomTask";

newTask.Start = DateTime.Now;

newTask.IsUndetermined = true;

  

model.Tasks.Add(newTask);

model.SelectedTask = newTask;

Create Tasks (Using Project and ProjectTask)

The sample below demonstrates how to create a ProjectTask instance task and add it to RootTask.Tasks collection of your the Project instance (using C#)

ProjectTask newTask = new ProjectTask();

  

newTask.DurationFormat = Infragistics.Controls.Schedules.ProjectDurationFormat.ElapsedDays;

newTask.Duration = new TimeSpan(8, 0, 0);

newTask.IsMilestone = false;

IEnumerable existingTasks = null;

newTask.TaskName = "MyTask";

newTask.Start = DateTime.Now;

  

model.Project.RootTask.Tasks.Add(newTask);

model.SelectedTask = newTask;

Create a task programmatically or via XamGantt UI (Context menu –> Insert Task)

Maintain Tasks Links (Tasks Dependencies)

The XamGantt control provides functionality for creating dependency links between tasks within a project and supports the link types available in Microsoft Project 2010. You can specify a lead and lag time of the dependency as well.

You create tasks dependencies programmatically using collections of tasks’ predecessors and successors. Use the ProjectTask Predecessors and Successors properties to create a collection of ProjectTaskDependency objects.

The Successors and Predecessors collections expose two overload methods of the Add method.
The first one takes as parameters ProjectTask and ProjectTaskLinkType.
The second one takes as parameters ProjectTask, ProjectTaskLinkType and ProjectDuration.

Link type notation	Link type	Description
FS	Finish To Start	If not otherwise specified this is the default link type. The successor's Start date is dependent upon the predecessor's Finish date.
FF	Finish To Finish	The successor's Finish date is dependent upon the predecessor's Finish date.
SF	Start To Finish	The successor's Finish date is dependent upon the predecessor's Start date.
SS	Start To Start	The successor's Start date is dependent upon the predecessor's Start date.

Create Links (Using ListBackedProject, Arbitrary Tasks Collection and Custom Tasks)

To be possible to maintain task links using custom tasks you need to have at least one of these properties (Predecessors and Successors) or to have an appropriate custom properties that you can map to ProjectTask.Predecessors and/or ProjectTask.Successors.

#region Predecessors

private string _predecesors;

public string Predecessors

{

    get { return _predecesors; }

    set

    {

        if (value != _predecesors)

        {

            _predecesors = value;

            this.NotifyPropertyChanged("Predecessors");

        }

    }

}

#endregion //Predecessors

 

#region Successors

private string _successors;

public string Successors

{

    get { return _successors; }

    set

    {

        if (value != _successors)

        {

            _successors = value;

            this.NotifyPropertyChanged("Successors");

        }

    }

}

#endregion //Successors

You can maintain tasks dependencies also from XamGantt UI

Create Links (Using Project and ProjectTask)

Build-in ProjectTask class contains own Predecessors and Successors properties. You can use these properties in this case instead mapped properties of custom tasks.

ProjectTask task = new ProjectTask();

task.DurationFormat = Infragistics.Controls.Schedules.ProjectDurationFormat.ElapsedDays;

task.ConstraintDate = new DateTime(2012, 10, 10, 8, 0, 0);

task.ConstraintType = ProjectTaskConstraintType.FinishNoLaterThan;

task.Duration = new TimeSpan(80, 0, 0);

 

task.IsMilestone = false;

task.TaskName = "Sample task";

task.TaskName = "Sample task"

task.Start = new DateTime(2012, 10, 2);

 

model.Project.RootTask.Tasks.Add(task);

 

ProjectTask lastTask = this.nativeGantt.Project.RootTask.Tasks.Last();

 

if (!task.Equals(lastTask))

{

    lastTask.Predecessors.Add(task, ProjectTaskLinkType.FinishToStart, ProjectDuration.FromFormatUnits(-2, ProjectDurationFormat.Days));

 

}

Edit Task

To edit tasks you can use Infragistics Gantt UI or to change tasks properties with code.

Delete Task

You can create a task programmatically with code or via XamGantt UI (Context menu)

Delete Custom Task

To delete custom tasks it is enough to remove the task from Arbitrary Tasks Collection

var model = this.Root.Resources["viewmodel"] as ProjectViewModel;

if (model != null)

{

    DeleteCustomTask(model);

  

} 

  

//Delete custom task

  

 private void DeleteCustomTask(ProjectViewModel model)

 {

     if (model.SelectedTask != null)

     {

         model.Tasks.Remove(model.SelectedTask);

         model.SelectedTask = null;

     }

 }

Delete Project Task

To delete a built-in ProjectTask instance you need to remove the task from Project.RootTask.Tasks collection

var model = this.Root.Resources["nativeviewmodel"] as NativeProjectViewModel;

if (model != null)

{

    DeleteNativeTask(model);

  

}

  

//Delete project task

  

private void DeleteNativeTask(NativeProjectViewModel model)

  {

      if (model.SelectedTask != null && model.SelectedTask != model.Project.RootTask)

      {

          model.Project.RootTask.Tasks.Remove(model.SelectedTask);

          model.SelectedTask = null;

      }

  }

You can look at the sample application to see how to delete task in both cases

Delete Task from XamGantt UI (Context menu –> Delete Task)

Infragistics Gantt control is outright AWESOME! You can have almost everything from Microsoft Project, getting rid of all the useless stuff, and cramming it into a beautiful, lightweight, and high performance control that can be dragged into your WPF and Silverlight applications. Expect soon a new amazing Infragistics NetAdvantage Vol.12.2.

Follow news from Infragistics for more information about new Infragistics products.

Source code is available here. Sample project is created with Visual Studio 2012, but you can use NetAdvantage 12.2 controls with both: Visual Studio 2012 and Visual Studio 2012. As always, you can follow us on Twitter @mihailmateev and @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!