We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize UI like this using Syncfusion lib?

Thread ID:

Created:

Updated:

Platform:

Replies:

141444 Dec 12,2018 02:32 AM UTC Dec 14,2018 05:39 AM UTC WPF 9
loading
Tags: GanttControl
Sharath Gangadhar
Asked On December 12, 2018 02:32 AM UTC

Hi Team,

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

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

 

Muneesh Kumar G [Syncfusion]
Replied On December 12, 2018 06:56 AM UTC

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  
 
 
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  
 
 
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. 
 
 
Output:  
 
 
Please let us know if you have any queries.  
 
Regards, 
Muneesh Kumar G. 


Sharath Gangadhar
Replied On December 12, 2018 05:21 PM UTC

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  
 
 
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  
 
 
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. 
 
 
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 [Syncfusion]
Replied On December 13, 2018 07:34 AM UTC

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.  
 
 
Output: 
 
 
Please let us know if you have any queries. 
 
Regards, 
Muneesh Kumar G. 


Sharath Gangadhar
Replied On December 13, 2018 08:12 AM UTC

Yes Perfect..!

Thanku So much..!

Muneesh Kumar G [Syncfusion]
Replied On December 13, 2018 08:44 AM UTC

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
Replied On December 13, 2018 09:10 AM UTC

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 [Syncfusion]
Replied On December 13, 2018 12:00 PM UTC

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
Replied On December 13, 2018 12:12 PM UTC

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 [Syncfusion]
Replied On December 14, 2018 05:39 AM UTC

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 
 
 
Output: 
 
 
Please let us know if you have any other queries.  
 
Regards, 
Muneesh Kumar G. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon