Custom Gantt Control to mimic a timeline
Hello, I have a question concerning a feature I have to develop with one of the syncfusion control.
The problem is that I don't know what control is the most suitable.
Can you help me to find the right control to use ?
Business class looks like :
public class Activity
{
public int Id { get; set; }
public string Name { get; set; }
public decimal TotalDistance { get; set; }
public List<ActivityRange> Ranges { get; set; }
}
public class ActivityRange
{
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public TimeSpan TotalTime { get { return EndDate - StartDate; } }
public int StatusActivity { get; set; }
public SolidColorBrush StatusColor { get; set; }
}
--> The Activity Range represents some range per day, a color is associate with the range (I can use a converter to put the color with a particular status).
Here is a screenshot of what it should look like :
Thank you very much for the support.
Best Regards,
Nicolas
We have analysed your requirement and prepared a sample for your requirement by using gantt control,
In the sample, we have customized the Gantt node by using the below code snippet
[MainPage.Xaml]:
|
<Style x:Key="TaskNode" TargetType="{x:Type gchart:GanttNode}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type gchart:GanttNode}">
<Border Name="PART_Border"
Height="22"
VerticalAlignment="Center"
BorderThickness="1"
ClipToBounds="True"
Opacity="0.8"
Background="{Binding StatusColor}">
<Grid>
....
<ToolTipService.ToolTip> <ToolTip Content="{TemplateBinding DataContext}"
ContentTemplate="{TemplateBinding ToolTipTemplate}" />
</ToolTipService.ToolTip>
<Thumb x:Name="PART_DragDropThumb"
....
</Thumb>
<Thumb x:Name="PART_LeftThumb"
....
/>
</Thumb.Template>
</Thumb>
<Thumb x:Name="PART_RightThumb">
...
</Thumb.Template> </Thumb>
...
</Style>
.... <gantt:GanttControl x:Name="Gantt" Loaded="Gantt_Loaded" ....
<gantt:GanttControl.Resources>
<Style BasedOn="{StaticResource TaskNode}"
TargetType="gchart:GanttNode" />
</gantt:GanttControl.Resources>
</gantt:GanttControl> |
In the Grid loaded event, we changed the column name, added a new column, and removed the StartDate and EndDate columns.
|
private void Gantt_Loaded(object sender, RoutedEventArgs e)
{
Gantt.GanttGrid.Loaded += GanttGrid_Loaded;
}
private void GanttGrid_Loaded(object sender, RoutedEventArgs e)
{
for(int i=0;i<Gantt.GanttGrid.Columns.Count; i++)
{
if(Gantt.GanttGrid.Columns[i].HeaderText == "Start"|| Gantt.GanttGrid.Columns[i].HeaderText == "Finish")
{
Gantt.GanttGrid.Columns.RemoveAt(i);
i--;
}
else if(Gantt.GanttGrid.Columns[i].HeaderText == "Task Name")
{
Gantt.GanttGrid.Columns[i].HeaderText = "Activity";
}
else if (Gantt.GanttGrid.Columns[i].HeaderText =="Duration")
{
Gantt.GanttGrid.Columns[i].HeaderText = "Tots.";
}
}
GridTreeColumn column = new GridTreeColumn
{
MappingName = "TotalDistance",
HeaderText = "Distance",
Width = 100,
StyleInfo=new GridStyleInfo() {ReadOnly=true}
};
// adding the custom columns to GanttGrid(Table)
Gantt.GanttGrid.Columns.Add(column);
} |
please have the sample from the below link
For more information about customizing the node:
https://help.syncfusion.com/wpf/gantt/custom-node-style
For more information about resource view Gantt
Let us know if you need any further.
Regards,
Sridevi S.
Hello Sridevi Sivakumar ,
Thank you for your help on this.
I need two more things :
1) my previous explanation was not detailed, I need to have a schedule view of the hours in one day. For that I used "ScheduleType="DayWithHours""
It works well, but when I start the application, I need to have a view of one particular day and the numbers of hours like this :
How can I always show all the hours of a day when the application start and still be able to navigate to the previous or next day in runtime.
2) in the preview screenshot, the day is represented by the first letter of it's name. I need 2 options here :
a) How can I show the entire word of the day ?
b) How can I hide this header ?
Thank you and best regards.
Nicolas
Attachment: Sample722401911_e9f160f5.rar
Query: How can I always show all the hours of a day when the application starts and still be able to navigate to the previous or next day in runtime.
This update is mainly to get the confirmation of your reported issue to proceed with this without any misleading?
We have checked your requirement and we can change the start date of the gantt by setting the expected date in the Gantt StartTime property.
[Xaml]:
|
<gantt:GanttControl x:Name="Gantt" Loaded="Gantt_Loaded"
ItemsSource="{Binding Ranges}"
ShowDateWithTime="True"
ShowNonWorkingHoursBackground="False"
ShowChartLines="False"
ToolTipTemplate="{StaticResource toolTipTemplate}"
VisualStyle="Metro"
RowHeight="25" StartTime="01/07/2021"
ScheduleType="DayWithHours"
ScheduleCellCreated="Gantt_ScheduleCellCreated"> |
Or else
we can scroll the Gantt chart in expected date by using Gantt ScrollGanttChartTo() method
|
Gantt.ScrollGanttChartTo("Add your expected date here"); |
Or
Are you expecting the Gantt chart to show only one day with hours and the following day to be a load when you scroll to view it?
Query 2: How can I show the entire word of the day
We can show the entire word of the day by customizing the schedule cell content in the ScheduleCellCreated as per below code snippet
|
<gantt:GanttControl x:Name="Gantt" Loaded="Gantt_Loaded"
ItemsSource="{Binding Ranges}"
ShowDateWithTime="True"
ShowNonWorkingHoursBackground="False"
ShowChartLines="False"
ToolTipTemplate="{StaticResource toolTipTemplate}"
VisualStyle="Metro"
RowHeight="25"
ScheduleType="DayWithHours"
ScheduleCellCreated="Gantt_ScheduleCellCreated"> |
[C#]:
|
private void Gantt_ScheduleCellCreated(object sender, Syncfusion.Windows.Controls.Gantt.ScheduleCellCreatedEventArgs args)
{
List<string> list = new List<string>() { "M", "T", "W", "S", "F" };
if (list.Contains(args.CurrentCell.Content.ToString()))
{
args.CurrentCell.Content = (args.CurrentCell.CellDate).DayOfWeek;
}
} |
Screenshot:
Query 3:How can I hide this header
Are you expecting to remove all schedules in the Gantt chart?
or
Want to customize the schedule?
Please refer to the below UG document to customize the schedule
https://help.syncfusion.com/wpf/gantt/custom-schedule#custom-numeric
Regards,
Sridevi S.
Hello,
I still have a strange behavior about the sample we used in this thread and it seems to occur with .netcore 3.1 and .net 5.
Th project in .net framework 4.6 actually works.
In 3.1 or .net 5 (dll version : 19.2.0.44 .NET Core 3.1 and .net5), when I want to delete or create new columns in the gant grid, it seems that the columns are not initialized yet.
When I debug, the loaded event is fired on the ganttcontrol then in the gantcontrol.GantGrid but the columns are not initialized yet...
Can you check this sample and tell me what I do wrong ?
Thank you very much
Best Regards,
Nicolas
Attachment: TestGantt_4d139693.rar
Hello Vignesh Ramesh,
Thank you that's perfect.
I think that there is a last question for you about my requirement.
I have improved the sample to ask you how to achieve a final behavior: is it possible to hide the ScheduleHeader?
See in the attached sample, the second Gantt control have to be as simple as possible and I have to hide the ScheduleHeader like the header of the GanttGrid.
Is it possible?
If not, Is there a workaround? For example go back to one GanttControl and insert a blank row?
Thank you for your advice !
Have a great day,
Best Regards
Nicolas
Attachment: SampleGantt_b7bd35f1.rar
|
[C#]
private void GanttGrid_Loaded1(object sender, RoutedEventArgs e)
{
GanttSchedule ganttSchedule = GanttB.FindElementOfType<GanttSchedule>() ;
if (ganttSchedule != null)
{
ganttSchedule.Height = 0;
}
} |
