RadiantQ WPF Gantt
Creating Dependency Lines Dynamically
Previous Topic  Next Topic 

Creating Dependency Lines Dynamically


In FlexyGantt, setup the gantt like this to allow the end-users to create a new dependency line by simply dragging and dropping a connection line from one task to another.


1) Create a connector cue line to show when the user starts to drag vertically from a task to create a new dependency line.

In your xaml,

  <Canvas>

      <Line x:Name="ConnectorCueLine" Stroke="Red" StrokeThickness="1" />

  </Canvas>

2) Then design a popup content to show the details of dependency line being constructed. Note that the bindings below assume certain properties like "TaskName" being available in your data model. Change it to the appropriate property name, if necessary.

  <Popup Name="ConnectingInfoPopup" Width="240" Height="65" Placement="Mouse" IsOpen="False">

            <Border BorderBrush="DarkGray" BorderThickness="1" Height="Auto" >

                <Grid>

                    <Grid.RowDefinitions>

                        <RowDefinition Height="*"></RowDefinition>

                        <RowDefinition Height="*"></RowDefinition>

                        <RowDefinition Height="*"></RowDefinition>

                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="*"></ColumnDefinition>

                        <ColumnDefinition Width="*"></ColumnDefinition>

                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Row="0" Grid.ColumnSpan="2" Text="Finish-to-Start Link"

            Background="#fafafa" FontWeight="Bold" TextAlignment="Center">

                    </TextBlock>

                    <TextBlock Grid.Row="1" Grid.Column="0" Text="From finish of :"

            Background="#fafafa" FontWeight="Bold" TextAlignment="Right">

                    </TextBlock>

                    <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding StartTask.TaskName}"

            Background="#fafafa" TextAlignment="Center">

                    </TextBlock>

                    <TextBlock Grid.Row="2" Grid.Column="0" Text="To start of:"

            Background="#fafafa" FontWeight="Bold" TextAlignment="Right">

                    </TextBlock>

                    <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding EndTask.TaskName}"

            Background="#fafafa" TextAlignment="Center">

                    </TextBlock>

                </Grid>

            </Border>

  </Popup>



3) Create an instance of FlexyGanttDependencyLineConnectionUtility to enable connecting two tasks. It has below two events,

CanConnectTasks - This event will be triggered after vertical drag is started from one task and when the mouse is over another task. Here you can decide whether a new dependency line can be drawn between the selected tasks or not.

AfterConnectingTasks - This event will be triggered after the user has connected two tasks in the view dynamically. Here, you can should create a new dependency line based on the selected tasks.

Here is sample code,

In your cs,

  FlexyGanttDependencyLineConnectionUtility FGDepConnect = new FlexyGanttDependencyLineConnectionUtility(this.fxgantt, this.ConnectingInfoPopup);

  FGDepConnect.CanConnectTasks += FGDepConnect_CanConnectTasks;

  FGDepConnect.AfterConnectingTasks += FGDepConnect_AfterConnectingTasks;

  private void FGDepConnect_CanConnectTasks(object sender, FlexyGanttDependencyLineConnectionUtility.CanConnectTaskEventArgs e)

  {

      if ((e.FromTask != null && !(e.FromTask is Task)) ||

          e.ToTask != null && !(e.ToTask is Task))

          e.Cancel = true; // To cancel the dependency line creation.

  }


  private void FGDepConnect_AfterConnectingTasks(object sender, FlexyGanttDependencyLineConnectionUtility.AfterConnectingTaskEventArgs e)

  {

      Task FromTask = e.FromTask as Task;

      Task ToTask = e.ToTask as Task;

      // It creates dependency line between two tasks based on the selected tasks and adding it to the collection.

      SampleResourcesData.DepLinesList.Add(new DependencyInfo() { StartTask = e.FromTask as Task, EndTask = e.ToTask as Task, DependencyType = DependencyType.FinishToStart });

  }



Note:

A sample that illustrates this feature can be located here in the install:

..\Samples\FlexyGantt\Appearance\FlexyGanttWithDepLines.



� RadiantQ 2009 - 2019. All Rights Reserved.