How to customize UI like this using Syncfusion lib?

[Sharath Gangadhar]

Hi Team,

Please find attached Image- how to design XAML code as per image-?

the first column data from database, and remaining things are with respective start datetime and end datetime.

 

[Muneesh Kumar G]

Hi Sharath, 

 

Greeting from Syncfusion. Please find the response below.  

 

Query 1: Changing each node background color 

 

You can change the background color for each GanttNode by using interaction behavior in GanttNode style as per the below code snippet. 

 

XAML: 

… 

<!--To change the background of node--> 

<i:Interaction.Behaviors> 

    <local:GanttNodeCustomizationBehavior /> 

</i:Interaction.Behaviors> 

… 

 

C# : 

void AssociatedObject_Loaded(object sender, RoutedEventArgs e) 

{ 

    Border node = sender as Border; 

    node.Background = (Brush)new BrushConverter().ConvertFromString(GetColor()); 

    node.BorderBrush = node.Background; 

} 

 

 

Query 2 : Corner edges on both ends of the task. 

 

We have achieved your requirement by applying corner radius in GanttNode style. Please find the snippet as below 

 

<ControlTemplate TargetType="{x:Type chart:GanttNode}"> 

    <Border Name="PART_Border" 

            Height="18" 

            VerticalAlignment="Center" 

            BorderBrush="#FF4D4D4D" 

            BorderThickness="0.5" 

            CornerRadius="10"> 

 

For more information about GanttNode styles. Please refer the following User Guide link  

 

UG link : https://help.syncfusion.com/wpf/gantt/custom-node-style  

 

Query 3 : Changing the schedule text format 

 

We have achieved your requirement by changing the CellTextFormat in custom schedule source. Please find the snippet as below 

 

XAML: 

<gantt:GanttControl x:Name="Gantt" 

                    ScheduleType="CustomDateTime" 

                    CustomScheduleSource="{Binding CustomScheduleSource}"/> 

 

C#: 

public IList<GanttScheduleRowInfo> GetCustomScheduleSource() 

{ 

    return new List<GanttScheduleRowInfo> 

               { 

                   new GanttScheduleRowInfo 

                       { 

                           TimeUnit = TimeUnit.Days, 

                           PixelsPerUnit = 45, 

                           CellTextFormat = "MMM dd" 

                       } 

               }; 

} 

 

For more information about custom schedules. Please refer the following User Guide link  

 

UG link : https://help.syncfusion.com/wpf/gantt/custom-schedule  

 

Query 4: Showing custom column in Gantt grid 

 

We have achieved this requirement by defining new property (Range) in Model and also by adding corresponding column in GanttGrid columns while loading. Please find the code snippet as below. 

 

XAML Code :
<gantt:GanttControl x:Name="Gantt" 

                    ItemsSource="{Binding TaskDetails}" 

                    GridWidth="100" 

                   ScheduleType="CustomDateTime" 

                    CustomScheduleSource="{Binding CustomScheduleSource}"> 

     

    <i:Interaction.Behaviors> 

        <local:InitialSetupBehavior /> 

    </i:Interaction.Behaviors> 

</gantt:GanttControl> 

 

C#: 

In Model: 

public string Range 

{ 

    get 

    { 

        return this.range; 

    } 

 

    set 

    { 

        this.range = value; 

        this.OnPropertyChanged("Range"); 

    } 

} 

 

In View Model: 

task[0].Child.Add(new Model { TaskId = 2, TaskName = "Determine project office scope", StartDate = new DateTime(2011, 7, 3), FinishDate = new DateTime(2011, 7, 5), Range = "10-3" }); 

 

In Grid loaded: 

// Remove all the columns 

this.AssociatedObject.GanttGrid.Columns.Clear(); 

 

GridTreeColumn column = new GridTreeColumn 

{ 

    MappingName = "Range", 

    HeaderText = "Range", 

    Width = 100 

}; 

 

// adding the custom columns to GanttGrid(Table) 

this.AssociatedObject.GanttGrid.Columns.Add(column); 

 

Please find the sample from the below link. 

 

Sample Link : http://www.syncfusion.com/downloads/support/directtrac/general/ze/BindingTaskDetails144276537  

 

Output:  

 

 

Please let us know if you have any queries.  

 

Regards, 

Muneesh Kumar G. 

[Sharath Gangadhar]

Hi Sharath, 

 

Greeting from Syncfusion. Please find the response below.  

 

Query 1: Changing each node background color 

 

You can change the background color for each GanttNode by using interaction behavior in GanttNode style as per the below code snippet. 

 

XAML: 

… 

<!--To change the background of node--> 

<i:Interaction.Behaviors> 

    <local:GanttNodeCustomizationBehavior /> 

</i:Interaction.Behaviors> 

… 

 

C# : 

void AssociatedObject_Loaded(object sender, RoutedEventArgs e) 

{ 

    Border node = sender as Border; 

    node.Background = (Brush)new BrushConverter().ConvertFromString(GetColor()); 

    node.BorderBrush = node.Background; 

} 

 

 

Query 2 : Corner edges on both ends of the task. 

 

We have achieved your requirement by applying corner radius in GanttNode style. Please find the snippet as below 

 

<ControlTemplate TargetType="{x:Type chart:GanttNode}"> 

    <Border Name="PART_Border" 

            Height="18" 

            VerticalAlignment="Center" 

            BorderBrush="#FF4D4D4D" 

            BorderThickness="0.5" 

            CornerRadius="10"> 

 

For more information about GanttNode styles. Please refer the following User Guide link  

 

UG link : https://help.syncfusion.com/wpf/gantt/custom-node-style  

 

Query 3 : Changing the schedule text format 

 

We have achieved your requirement by changing the CellTextFormat in custom schedule source. Please find the snippet as below 

 

XAML: 

<gantt:GanttControl x:Name="Gantt" 

                    ScheduleType="CustomDateTime" 

                    CustomScheduleSource="{Binding CustomScheduleSource}"/> 

 

C#: 

public IList<GanttScheduleRowInfo> GetCustomScheduleSource() 

{ 

    return new List<GanttScheduleRowInfo> 

               { 

                   new GanttScheduleRowInfo 

                       { 

                           TimeUnit = TimeUnit.Days, 

                           PixelsPerUnit = 45, 

                           CellTextFormat = "MMM dd" 

                       } 

               }; 

} 

 

For more information about custom schedules. Please refer the following User Guide link  

 

UG link : https://help.syncfusion.com/wpf/gantt/custom-schedule  

 

Query 4: Showing custom column in Gantt grid 

 

We have achieved this requirement by defining new property (Range) in Model and also by adding corresponding column in GanttGrid columns while loading. Please find the code snippet as below. 

 

XAML Code :
<gantt:GanttControl x:Name="Gantt" 

                    ItemsSource="{Binding TaskDetails}" 

                    GridWidth="100" 

                   ScheduleType="CustomDateTime" 

                    CustomScheduleSource="{Binding CustomScheduleSource}"> 

     

    <i:Interaction.Behaviors> 

        <local:InitialSetupBehavior /> 

    </i:Interaction.Behaviors> 

</gantt:GanttControl> 

 

C#: 

In Model: 

public string Range 

{ 

    get 

    { 

        return this.range; 

    } 

 

    set 

    { 

        this.range = value; 

        this.OnPropertyChanged("Range"); 

    } 

} 

 

In View Model: 

task[0].Child.Add(new Model { TaskId = 2, TaskName = "Determine project office scope", StartDate = new DateTime(2011, 7, 3), FinishDate = new DateTime(2011, 7, 5), Range = "10-3" }); 

 

In Grid loaded: 

// Remove all the columns 

this.AssociatedObject.GanttGrid.Columns.Clear(); 

 

GridTreeColumn column = new GridTreeColumn 

{ 

    MappingName = "Range", 

    HeaderText = "Range", 

    Width = 100 

}; 

 

// adding the custom columns to GanttGrid(Table) 

this.AssociatedObject.GanttGrid.Columns.Add(column); 

 

Please find the sample from the below link. 

 

Sample Link : http://www.syncfusion.com/downloads/support/directtrac/general/ze/BindingTaskDetails144276537  

 

Output:  

 

 

Please let us know if you have any queries.  

 

Regards, 

Muneesh Kumar G. 

Thanks Muneesh,

When i tried to integrate in my application , i'm facing issues.. can you please have a look on this. so please find attached zip file for more information.

In my code having 3 TabItems, i wanted above Gantt control  in middle Tab, when is was trying to integrate gantt code in my app.. 

facing problem..

Please find below code in xaml file of the zip project

 <TabItem >

                    <TabItem.Header>

                        <Image Margin="10" Height="20" Width="20" Source="/assest/2.png"/>

                    </TabItem.Header>

                    <Canvas>

                   <!-- iam expecting Gantt Control code here,

                        

                        When i was tried for integrating to this code facing error or build fail.

                        

                        

                        -->

                    </Canvas>

                </TabItem>

MY QUESTION :

I can't able to insert my custom gantt control in my TabItem.?

Thanks,

Sharath

Attachment: WpfAppCamboApp_11a0f4e8.zip

[Muneesh Kumar G]

Hi Sharath, 

 

Thanks for your update. We have analyzed application and we suspect that you are trying to access the resource key before its definition. We were also got the compilation issue in this scenario. To avoid this problem please define the Grid.Resources at starting place as per the below code snippet.  

 

Code snippet 

  <Grid.Resources> 

                            <!--To change the appearence of Gantt Node--> 

                            <Style x:Key="TaskNode" TargetType="{x:Type chart:GanttNode}"> 

                                <Setter Property="Template"> 

                                        . 

                                </Setter> 

                            </Style> 

                        </Grid.Resources> 

 

  <gantt:GanttControl x:Name="Gantt" 

                                            ItemsSource="{Binding TaskDetails}" 

                                            VisualStyle="Metro" 

                                            ScheduleRangePadding="3" 

                                            GridWidth="100" 

                                            ScheduleType="CustomDateTime" 

                                            CustomScheduleSource="{Binding CustomScheduleSource}" 

                                            > 

                             

                            <gantt:GanttControl.Resources> 

                                <Style BasedOn="{StaticResource TaskNode}" TargetType="chart:GanttNode" /> 

                            </gantt:GanttControl.Resources> 

 

Now the sample works fine with the tab item. Please find the sample from the following location.  

 

Sample link : http://www.syncfusion.com/downloads/support/directtrac/general/ze/ModifiedSample-483326736  

 

Output: 

 

 

Please let us know if you have any queries. 

 

Regards, 

Muneesh Kumar G. 

[Sharath Gangadhar]

Yes Perfect..!

Thanku So much..!

[Muneesh Kumar G]

Hi Sharath, 

 

Thanks for your update.  

 

We are glad to know that the given works. Please let us know if you have any other queries.  

 

Thanks, 

Muneesh Kumar G. 

[Sharath Gangadhar]

Hello Muneesh,

I have one more question,  If i have more data, left side table gets scrollable but i'm expecting right side view(i.e ganttview). how can i achieve?

Thanks, 

[Muneesh Kumar G]

Hi Sharath, 

 

Thanks for your update. We have analyzed your requirement and we would like to inform you that currently we don’t have support to move the scroll bar position to the right side. GanttControl is the combination of GanttGrid and GanttChart control. In source level, we have enabled the scroll viewer for GanttGrid and sync its vertical offset with GanttChart scroll view. 

 

Can you please share us your application usage scenario for moving scrollbar position to right side? It will help for us to provide you the better solution. 

 

Regards, 

Muneesh Kumar G. 

[Sharath Gangadhar]

Hi,

Please find attached code for more information?

--> Left side table gets scroll-able but i'm expecting right side view(i.e ganttview) should be scroll-able. how can i achieve?

Attachment: ModifiedSample483326736_a439e44.zip

[Muneesh Kumar G]

Hi Sharath, 

 

We have achieved your requirement by setting our internal gantt view scrollbar visibility and syncing it’s VerticalOffset with GanttGrid’s scrollbar VerticalOffset in GanttControl loaded event. Please find the code snippet below 

 

Code Snippet:  

void AssociatedObject_Loaded(object sender, RoutedEventArgs e) 

{ 

    GanttChart chart = this.AssociatedObject.FindName<GanttChart>("PART_GanttChart"); 

    if (chart != null) 

    { 

        ScrollViewer chartScrollViewer = 

            chart.FindName<ScrollViewer>("PART_GanttChartScrollViewer"); 

        if (chartScrollViewer != null) 

        { 

            // To make the GanttChart's Vertical Scroll bar visible. 

            chartScrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Visible; 

            chartScrollViewer.ScrollChanged += this.ChartScrollViewer_ScrollChanged; 

        } 

    } 

} 

 

private void ChartScrollViewer_ScrollChanged(object sender, ScrollChangedEventArgs e) 

{ 

    // To sync the GanttGrid's vertical scroll with GanttChart's Vertical scroll offset. 

    this.AssociatedObject.GanttGrid.InternalGrid.SetVerticalOffset(e.VerticalOffset); 

} 

 

Also, we have modified the provided sample. Please find it from the below link 

 

Sample link : http://www.syncfusion.com/downloads/support/directtrac/general/ze/GanttChartScrollSync-1948138572  

 

Output: 

 

 

Please let us know if you have any other queries.  

 

Regards, 

Muneesh Kumar G.