Skip to content

Commit 51718b5

Browse files
Vignesh-SivalingamVignesh-Sivalingam
committed
908232: Added PDF UG
1 parent 72a3beb commit 51718b5

File tree

2 files changed

+323
-73
lines changed

2 files changed

+323
-73
lines changed

‎blazor/gantt-chart/events.md‎

Lines changed: 303 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4022,6 +4022,309 @@ The [PdfExported](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.
40224022
}
40234023
}
40244024
```
4025+
## PdfColumnHeaderQueryCellInfo
4026+
4027+
The [PdfColumnHeaderQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfColumnHeaderQueryCellInfo) event is triggered each time a column header is drawn in PDF document export. By handling this event, you can define how each column header in the Gantt chart is rendered in the exported PDF, including the addition of images, background colors, and custom text.
4028+
4029+
``` cshtml
4030+
@using Syncfusion.Blazor.Gantt
4031+
@using Syncfusion.Blazor.Grids
4032+
@using Syncfusion.Blazor.Navigations
4033+
@using Syncfusion.PdfExport
4034+
@using System.Net
4035+
4036+
<SfGantt @ref="Gantt" ID="GanttExport" DataSource="@TaskCollection" Height="450px" Width="900px" AllowPdfExport="true" Toolbar="toolbarItem">
4037+
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Dependency="Predecessor"
4038+
Duration="Duration" Progress="Progress" ParentID="ParentId">
4039+
</GanttTaskFields>
4040+
<GanttColumns>
4041+
<GanttColumn Field="TaskId" HeaderText="Task Id" Width="100" HeaderTextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GanttColumn>
4042+
<GanttColumn Field="TaskName" HeaderText="Task Name"></GanttColumn>
4043+
<GanttColumn Field="StartDate" HeaderText="Start Date" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GanttColumn>
4044+
<GanttColumn Field="EndDate" HeaderText="End Date"></GanttColumn>
4045+
<GanttColumn Field="Duration" HeaderText="Duration"></GanttColumn>
4046+
<GanttColumn Field="Predecessor" HeaderText="Dependency"></GanttColumn>
4047+
</GanttColumns>
4048+
<GanttEvents OnToolbarClick="ToolbarClickHandler" PdfColumnHeaderQueryCellInfo="PdfHeaderQueryCellInfoHandler" TValue="TaskData"></GanttEvents>
4049+
</SfGantt>
4050+
4051+
@code {
4052+
private List<TaskData> TaskCollection { get; set; }
4053+
private SfGantt<TaskData> Gantt;
4054+
private List<object> toolbarItem = new List<Object>() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
4055+
4056+
protected override void OnInitialized()
4057+
{
4058+
this.TaskCollection = GetTaskCollection();
4059+
}
4060+
public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
4061+
{
4062+
if (args.Item.Id == "PdfExport")
4063+
{
4064+
await Gantt.ExportToPdfAsync();
4065+
}
4066+
}
4067+
public void PdfHeaderQueryCellInfoHandler(Syncfusion.Blazor.Gantt.PdfHeaderQueryCellInfoEventArgs args)
4068+
{
4069+
// Here, you can customize your code.
4070+
}
4071+
public class TaskData
4072+
{
4073+
public int TaskId { get; set; }
4074+
public string TaskName { get; set; }
4075+
public DateTime StartDate { get; set; }
4076+
public DateTime? EndDate { get; set; }
4077+
public string Duration { get; set; }
4078+
public int Progress { get; set; }
4079+
public int? ParentId { get; set; }
4080+
public string Predecessor { get; set; }
4081+
}
4082+
4083+
public static List<TaskData> GetTaskCollection()
4084+
{
4085+
List<TaskData> Tasks = new List<TaskData>()
4086+
{
4087+
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), },
4088+
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 },
4089+
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1, Predecessor = "2" },
4090+
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 , Predecessor = "3" },
4091+
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), },
4092+
new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 },
4093+
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 },
4094+
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }
4095+
};
4096+
return Tasks;
4097+
}
4098+
}
4099+
```
4100+
4101+
## PdfQueryCellInfo
4102+
4103+
The [PdfQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfQueryCellInfo) event is triggered each time a cell is drawn in PDF document. By handling this event, you can define how each cell in the Gantt chart is rendered in the exported PDF, including the addition of images, background colors, and custom text.
4104+
4105+
```cshtml
4106+
@using Syncfusion.Blazor.Gantt
4107+
@using Syncfusion.Blazor.Grids
4108+
@using Syncfusion.Blazor.Navigations
4109+
@using Syncfusion.PdfExport
4110+
4111+
<SfGantt @ref="Gantt" ID="GanttExport" DataSource="@TaskCollection" Height="450px" Width="900px" AllowPdfExport="true" Toolbar="toolbarItem">
4112+
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Dependency="Predecessor"
4113+
Duration="Duration" Progress="Progress" ParentID="ParentId">
4114+
</GanttTaskFields>
4115+
<GanttColumns>
4116+
<GanttColumn Field="TaskId" HeaderText="Task Id" Width="100" HeaderTextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GanttColumn>
4117+
<GanttColumn Field="TaskName" HeaderText="Task Name"></GanttColumn>
4118+
<GanttColumn Field="StartDate" HeaderText="Start Date" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GanttColumn>
4119+
<GanttColumn Field="EndDate" HeaderText="End Date"></GanttColumn>
4120+
<GanttColumn Field="Duration" HeaderText="Duration"></GanttColumn>
4121+
<GanttColumn Field="Predecessor" HeaderText="Dependency"></GanttColumn>
4122+
</GanttColumns>
4123+
<GanttEvents OnToolbarClick="ToolbarClickHandler" PdfQueryCellInfo="PdfQueryCellInfoHandler" TValue="TaskData"></GanttEvents>
4124+
</SfGantt>
4125+
4126+
@code {
4127+
private List<TaskData> TaskCollection { get; set; }
4128+
private SfGantt<TaskData> Gantt;
4129+
private List<object> toolbarItem = new List<Object>() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
4130+
4131+
protected override void OnInitialized()
4132+
{
4133+
this.TaskCollection = GetTaskCollection();
4134+
}
4135+
public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
4136+
{
4137+
if (args.Item.Id == "PdfExport")
4138+
{
4139+
await Gantt.ExportToPdfAsync();
4140+
}
4141+
}
4142+
public void PdfQueryCellInfoHandler(Syncfusion.Blazor.Gantt.PdfQueryCellInfoEventArgs<TaskData> args)
4143+
{
4144+
// Here, you can customize your code.
4145+
}
4146+
public class TaskData
4147+
{
4148+
public int TaskId { get; set; }
4149+
public string TaskName { get; set; }
4150+
public DateTime StartDate { get; set; }
4151+
public DateTime? EndDate { get; set; }
4152+
public string Duration { get; set; }
4153+
public int Progress { get; set; }
4154+
public int? ParentId { get; set; }
4155+
public string Predecessor { get; set; }
4156+
}
4157+
4158+
public static List<TaskData> GetTaskCollection()
4159+
{
4160+
List<TaskData> Tasks = new List<TaskData>()
4161+
{
4162+
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), },
4163+
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 },
4164+
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1, Predecessor = "2" },
4165+
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 , Predecessor = "3" },
4166+
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), },
4167+
new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 },
4168+
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 },
4169+
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }
4170+
};
4171+
return Tasks;
4172+
}
4173+
}
4174+
```
4175+
4176+
## PdfQueryTimelineCellInfo
4177+
4178+
The [PdfQueryTimelineCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfQueryTimelineCellInfo) event is triggered each time a timeline cell is drawn in PDF document. Handling this event allows you to specify how individual timeline cells in the Gantt chart are rendered in the exported PDF document, including the addition of images, background colors, and custom text to the timeline cell.
4179+
4180+
The following code snippet demonstrates how to use the `PdfQueryTimelineCellInfo` event to add custom text to the Gantt chart timeline cells in the exported PDF document:
4181+
4182+
```cshtml
4183+
@using Syncfusion.Blazor.Gantt
4184+
@using Syncfusion.Blazor.Grids
4185+
@using Syncfusion.Blazor.Navigations
4186+
@using Syncfusion.PdfExport
4187+
4188+
<SfGantt @ref="Gantt" ID="GanttExport" DataSource="@TaskCollection" Height="450px" Width="900px" AllowPdfExport="true" Toolbar="toolbarItem">
4189+
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Dependency="Predecessor"
4190+
Duration="Duration" Progress="Progress" ParentID="ParentId">
4191+
</GanttTaskFields>
4192+
<GanttColumns>
4193+
<GanttColumn Field="TaskId" HeaderText="Task Id" Width="100" HeaderTextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GanttColumn>
4194+
<GanttColumn Field="TaskName" HeaderText="Task Name"></GanttColumn>
4195+
<GanttColumn Field="StartDate" HeaderText="Start Date" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GanttColumn>
4196+
<GanttColumn Field="EndDate" HeaderText="End Date"></GanttColumn>
4197+
<GanttColumn Field="Duration" HeaderText="Duration"></GanttColumn>
4198+
<GanttColumn Field="Predecessor" HeaderText="Dependency"></GanttColumn>
4199+
</GanttColumns>
4200+
<GanttEvents OnToolbarClick="ToolbarClickHandler" PdfQueryTimelineCellInfo="PPdfQueryTimelineCellInfoHandler" TValue="TaskData"></GanttEvents>
4201+
</SfGantt>
4202+
4203+
@code {
4204+
private List<TaskData> TaskCollection { get; set; }
4205+
private SfGantt<TaskData> Gantt;
4206+
private List<object> toolbarItem = new List<Object>() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
4207+
protected override void OnInitialized()
4208+
{
4209+
this.TaskCollection = GetTaskCollection();
4210+
}
4211+
public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
4212+
{
4213+
if (args.Item.Id == "PdfExport")
4214+
{
4215+
await Gantt.ExportToPdfAsync();
4216+
}
4217+
}
4218+
public void PPdfQueryTimelineCellInfoHandler(Syncfusion.Blazor.Gantt.PdfQueryTimelineCellInfoEventArgs args)
4219+
{
4220+
if (args.Value == "S")
4221+
{
4222+
args.Value = "O";
4223+
}
4224+
}
4225+
public class TaskData
4226+
{
4227+
public int TaskId { get; set; }
4228+
public string TaskName { get; set; }
4229+
public DateTime StartDate { get; set; }
4230+
public DateTime? EndDate { get; set; }
4231+
public string Duration { get; set; }
4232+
public int Progress { get; set; }
4233+
public int? ParentId { get; set; }
4234+
public string Predecessor { get; set; }
4235+
}
4236+
4237+
public static List<TaskData> GetTaskCollection()
4238+
{
4239+
List<TaskData> Tasks = new List<TaskData>()
4240+
{
4241+
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), },
4242+
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 },
4243+
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1, Predecessor = "2" },
4244+
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 , Predecessor = "3" },
4245+
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), },
4246+
new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 },
4247+
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 },
4248+
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }
4249+
};
4250+
return Tasks;
4251+
}
4252+
}
4253+
```
4254+
4255+
## PdfQueryTaskbarInfo
4256+
4257+
The [PdfQueryTaskbarInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfQueryTaskbarInfo) event triggers each time a taskbar is drawn in the PDF document. This event provides the flexibility to customize and format the appearance of taskbars, including parent taskbars, individual taskbars, and milestone templates.
4258+
4259+
``` cshtml
4260+
@using Syncfusion.Blazor.Gantt
4261+
@using Syncfusion.Blazor.Grids
4262+
@using Syncfusion.Blazor.Navigations
4263+
@using Syncfusion.PdfExport
4264+
4265+
<SfGantt @ref="Gantt" ID="GanttExport" DataSource="@TaskCollection" Height="450px" Width="900px" AllowPdfExport="true" Toolbar="toolbarItem">
4266+
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Dependency="Predecessor"
4267+
Duration="Duration" Progress="Progress" ParentID="ParentId">
4268+
</GanttTaskFields>
4269+
<GanttColumns>
4270+
<GanttColumn Field="TaskId" HeaderText="Task Id" Width="100" HeaderTextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GanttColumn>
4271+
<GanttColumn Field="TaskName" HeaderText="Task Name"></GanttColumn>
4272+
<GanttColumn Field="StartDate" HeaderText="Start Date" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GanttColumn>
4273+
<GanttColumn Field="EndDate" HeaderText="End Date"></GanttColumn>
4274+
<GanttColumn Field="Duration" HeaderText="Duration"></GanttColumn>
4275+
<GanttColumn Field="Predecessor" HeaderText="Dependency"></GanttColumn>
4276+
</GanttColumns>
4277+
<GanttEvents OnToolbarClick="ToolbarClickHandler" PdfQueryTaskbarInfo="PdfQueryTaskbarInfoHandler" TValue="TaskData"></GanttEvents>
4278+
</SfGantt>
4279+
4280+
@code {
4281+
private List<TaskData> TaskCollection { get; set; }
4282+
private SfGantt<TaskData> Gantt;
4283+
private List<object> toolbarItem = new List<Object>() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
4284+
protected override void OnInitialized()
4285+
{
4286+
this.TaskCollection = GetTaskCollection();
4287+
}
4288+
public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
4289+
{
4290+
if (args.Item.Id == "PdfExport")
4291+
{
4292+
await Gantt.ExportToPdfAsync();
4293+
}
4294+
}
4295+
public void PdfQueryTaskbarInfoHandler(PdfQueryTaskbarInfoEventArgs<TaskData> args)
4296+
{
4297+
// Here, you can customize your code.
4298+
}
4299+
public class TaskData
4300+
{
4301+
public int TaskId { get; set; }
4302+
public string TaskName { get; set; }
4303+
public DateTime StartDate { get; set; }
4304+
public DateTime? EndDate { get; set; }
4305+
public string Duration { get; set; }
4306+
public int Progress { get; set; }
4307+
public int? ParentId { get; set; }
4308+
public string Predecessor { get; set; }
4309+
}
4310+
4311+
public static List<TaskData> GetTaskCollection()
4312+
{
4313+
List<TaskData> Tasks = new List<TaskData>()
4314+
{
4315+
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), },
4316+
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 },
4317+
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1, Predecessor = "2" },
4318+
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 , Predecessor = "3" },
4319+
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), },
4320+
new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 },
4321+
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 },
4322+
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }
4323+
};
4324+
return Tasks;
4325+
}
4326+
}
4327+
```
40254328

40264329

40274330
N> We are not going to limit Gantt Chart with these events, we will be adding new events in the future based on the user requests. If the event, you are looking for is not on the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).

0 commit comments

Comments
 (0)