Skip to content

Commit f770839

Browse files
Vignesh-SivalingamVignesh-Sivalingam
committed
908232: Added PDF UG
1 parent c4fe957 commit f770839

File tree

1 file changed

+74
-73
lines changed

1 file changed

+74
-73
lines changed

‎blazor/gantt-chart/pdf-export.md‎

Lines changed: 74 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -476,6 +476,7 @@ The following code demonstrates how to change the page size to A4 for the export
476476
}
477477
}
478478
```
479+
479480
## Customize columns in exported PDF document
480481

481482
### How to export the Gantt chart with specific columns
@@ -710,22 +711,32 @@ The following code demonstrates how to customize the columns and set their width
710711
}
711712
```
712713

713-
## Customizing taskbar appearance in exported PDF document
714+
## Customizing taskbar appearance
714715

715-
### Task appearance through event
716+
### Through property
716717

717-
The PDF export functionality allows you to customize taskbar appearance to a PDF document using the [PdfQueryTaskbarInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfQueryTaskbarInfo) event. This event provides the flexibility to customize and format the appearance of taskbars, including parent taskbars, individual taskbars, and milestone templates.
718+
The PDF export functionality allows you to customize taskbar appearance to a PDF document with customized colors using the `TaskbarColor` property in the `GanttPdfExportProperties` class. This property enables you to format various types of taskbars, including parent taskbars, child taskbars, milestones, critical paths, manual taskbars, and baselines.
718719

719-
The following sample code demonstrates how to use the `PdfQueryTaskbarInfo` event to customize the appearance of taskbars in the exported PDF document,
720+
You can use the `TaskbarColor` property to set colors for the following taskbar types:
721+
722+
* Parent Taskbar Color
723+
* Child Taskbar Color
724+
* Milestone Color
725+
* Critical Path Color
726+
* Manual Taskbar Color
727+
* Baseline Color
728+
729+
The following code demonstrates how to customize the colors of different taskbars in the exported PDF document
720730

721731
``` cshtml
722732
@using Syncfusion.Blazor.Gantt
723733
@using Syncfusion.Blazor.Grids
724734
@using Syncfusion.Blazor.Navigations
725735
@using Syncfusion.PdfExport
726736
727-
<SfGantt @ref="Gantt" ID="GanttExport" DataSource="@TaskCollection" Height="450px" Width="900px" AllowPdfExport="true" Toolbar="toolbarItem">
728-
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Dependency="Predecessor"
737+
<SfGantt @ref="Gantt" ID="GanttExport" DataSource="@TaskCollection" Height="450px" Width="900px" AllowPdfExport="true" Toolbar="toolbarItem" EnableCriticalPath="true"
738+
RenderBaseline="true">
739+
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" BaselineStartDate="BaselineStartDate" BaselineEndDate="BaselineEndDate"
729740
Duration="Duration" Progress="Progress" ParentID="ParentId">
730741
</GanttTaskFields>
731742
<GanttColumns>
@@ -734,9 +745,8 @@ The following sample code demonstrates how to use the `PdfQueryTaskbarInfo` even
734745
<GanttColumn Field="StartDate" HeaderText="Start Date" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GanttColumn>
735746
<GanttColumn Field="EndDate" HeaderText="End Date"></GanttColumn>
736747
<GanttColumn Field="Duration" HeaderText="Duration"></GanttColumn>
737-
<GanttColumn Field="Predecessor" HeaderText="Dependency"></GanttColumn>
738748
</GanttColumns>
739-
<GanttEvents OnToolbarClick="ToolbarClickHandler" PdfQueryTaskbarInfo="PdfQueryTaskbarInfoHandler" TValue="TaskData"></GanttEvents>
749+
<GanttEvents OnToolbarClick="ToolbarClickHandler" TValue="TaskData"></GanttEvents>
740750
</SfGantt>
741751
742752
@code {
@@ -751,78 +761,66 @@ The following sample code demonstrates how to use the `PdfQueryTaskbarInfo` even
751761
{
752762
if (args.Item.Id == "PdfExport")
753763
{
754-
await Gantt.ExportToPdfAsync();
755-
}
756-
}
757-
public void PdfQueryTaskbarInfoHandler(PdfQueryTaskbarInfoEventArgs<TaskData> args)
758-
{
759-
if (args.Data.TaskId == 3)
760-
{
761-
args.TaskbarStyle.Color = new PdfTaskbarColor();
762-
args.TaskbarStyle.Color.ChildProgressColor = new Syncfusion.PdfExport.PdfColor(103, 80, 164);
763-
args.TaskbarStyle.Color.ChildTaskbarColor = new Syncfusion.PdfExport.PdfColor(141, 124, 187);
764-
}
765-
if (args.Data.TaskId == 4)
766-
{
767-
args.TaskbarStyle.Color = new PdfTaskbarColor();
768-
args.TaskbarStyle.Color.MilestoneColor = new Syncfusion.PdfExport.PdfColor(103, 80, 164);
764+
GanttPdfExportProperties pdfExport = new GanttPdfExportProperties();
765+
pdfExport.Style = new PdfGanttStyle();
766+
pdfExport.Style.TaskbarColor = new PdfTaskbarColor();
767+
pdfExport.Style.TaskbarColor.ParentTaskbarColor = new PdfColor(220, 118, 51);
768+
pdfExport.Style.TaskbarColor.ParentProgressColor = new PdfColor(203, 67, 53);
769+
pdfExport.Style.TaskbarColor.ChildProgressColor = new PdfColor(35, 155, 86);
770+
pdfExport.Style.TaskbarColor.ChildTaskbarColor = new PdfColor(130, 224, 170);
771+
pdfExport.Style.TaskbarColor.CriticalPathTaskbarColor = new PdfColor(173, 121, 64);
772+
pdfExport.Style.TaskbarColor.CriticalPathProgressColor = new PdfColor(145, 76, 0);
773+
pdfExport.Style.TaskbarColor.BaselineColor = new PdfColor(179, 38, 30);
774+
pdfExport.Style.TaskbarColor.MilestoneColor = new PdfColor(141, 124, 187);
775+
await Gantt.ExportToPdfAsync(pdfExport);
769776
}
770-
771777
}
778+
772779
public class TaskData
773780
{
774781
public int TaskId { get; set; }
775782
public string TaskName { get; set; }
783+
public DateTime? BaselineStartDate { get; set; }
784+
public DateTime? BaselineEndDate { get; set; }
776785
public DateTime StartDate { get; set; }
777786
public DateTime? EndDate { get; set; }
778787
public string Duration { get; set; }
779788
public int Progress { get; set; }
780789
public int? ParentId { get; set; }
781-
public string Predecessor { get; set; }
782790
}
783791
784792
public static List<TaskData> GetTaskCollection()
785793
{
786-
List<TaskData> Tasks = new List<TaskData>()
794+
List<TaskData> Tasks = new List<TaskData>()s
787795
{
788-
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), },
789-
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 },
790-
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1, Predecessor = "2" },
791-
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 , Predecessor = "3" },
792-
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), },
793-
new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 },
794-
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 },
795-
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }
796+
new TaskData() { TaskId = 1, TaskName = "Project initiation", BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 04), StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 06) },
797+
new TaskData() { TaskId = 2, TaskName = "Identify site location", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 02), Duration = "0", BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 02), Progress = 30, ParentId = 1 },
798+
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2021, 04, 02), Duration = "5", Progress = 40, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 06), ParentId = 1 },
799+
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2021, 04, 08), Duration = "0", EndDate = new DateTime(2021, 04, 08), BaselineStartDate = new DateTime(2021, 04, 08), BaselineEndDate = new DateTime(2021, 04, 08), Progress = 30, ParentId = 1 },
800+
new TaskData() { TaskId = 5, TaskName = "Project initiation", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 08) },
801+
new TaskData() { TaskId = 6, TaskName = "Identify site location", StartDate = new DateTime(2021, 04, 02), Duration = "2", Progress = 30, ParentId = 5, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 02) },
802+
new TaskData() { TaskId = 7, TaskName = "Perform soil test", StartDate = new DateTime(2021, 04, 02), Duration = "4", Progress = 40, ParentId = 5, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 03) },
803+
new TaskData() { TaskId = 8, TaskName = "Soil test approval", StartDate = new DateTime(2021, 04, 02), Duration = "5", Progress = 30, ParentId = 5, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 04) }
796804
};
797805
return Tasks;
798806
}
799807
}
800808
```
801809

802-
### Task appearance through property
803-
804-
The PDF export functionality allows you to customize taskbar appearance to a PDF document with customized colors using the `TaskbarColor` property in the `GanttPdfExportProperties` class. This property enables you to format various types of taskbars, including parent taskbars, child taskbars, milestones, critical paths, manual taskbars, and baselines.
805-
806-
You can use the `TaskbarColor` property to set colors for the following taskbar types:
810+
### Through event
807811

808-
* Parent Taskbar Color
809-
* Child Taskbar Color
810-
* Milestone Color
811-
* Critical Path Color
812-
* Manual Taskbar Color
813-
* Baseline Color
812+
The PDF export functionality allows you to customize taskbar appearance to a PDF document using the [PdfQueryTaskbarInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfQueryTaskbarInfo) event. This event provides the flexibility to customize and format the appearance of taskbars, including parent taskbars, individual taskbars, and milestone templates.
814813

815-
The following code demonstrates how to customize the colors of different taskbars in the exported PDF document
814+
The following sample code demonstrates how to use the `PdfQueryTaskbarInfo` event to customize the appearance of taskbars in the exported PDF document,
816815

817816
``` cshtml
818817
@using Syncfusion.Blazor.Gantt
819818
@using Syncfusion.Blazor.Grids
820819
@using Syncfusion.Blazor.Navigations
821820
@using Syncfusion.PdfExport
822821
823-
<SfGantt @ref="Gantt" ID="GanttExport" DataSource="@TaskCollection" Height="450px" Width="900px" AllowPdfExport="true" Toolbar="toolbarItem" EnableCriticalPath="true"
824-
RenderBaseline="true">
825-
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" BaselineStartDate="BaselineStartDate" BaselineEndDate="BaselineEndDate"
822+
<SfGantt @ref="Gantt" ID="GanttExport" DataSource="@TaskCollection" Height="450px" Width="900px" AllowPdfExport="true" Toolbar="toolbarItem">
823+
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Dependency="Predecessor"
826824
Duration="Duration" Progress="Progress" ParentID="ParentId">
827825
</GanttTaskFields>
828826
<GanttColumns>
@@ -831,8 +829,9 @@ The following code demonstrates how to customize the colors of different taskbar
831829
<GanttColumn Field="StartDate" HeaderText="Start Date" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GanttColumn>
832830
<GanttColumn Field="EndDate" HeaderText="End Date"></GanttColumn>
833831
<GanttColumn Field="Duration" HeaderText="Duration"></GanttColumn>
832+
<GanttColumn Field="Predecessor" HeaderText="Dependency"></GanttColumn>
834833
</GanttColumns>
835-
<GanttEvents OnToolbarClick="ToolbarClickHandler" TValue="TaskData"></GanttEvents>
834+
<GanttEvents OnToolbarClick="ToolbarClickHandler" PdfQueryTaskbarInfo="PdfQueryTaskbarInfoHandler" TValue="TaskData"></GanttEvents>
836835
</SfGantt>
837836
838837
@code {
@@ -847,46 +846,48 @@ The following code demonstrates how to customize the colors of different taskbar
847846
{
848847
if (args.Item.Id == "PdfExport")
849848
{
850-
GanttPdfExportProperties pdfExport = new GanttPdfExportProperties();
851-
pdfExport.Style = new PdfGanttStyle();
852-
pdfExport.Style.TaskbarColor = new PdfTaskbarColor();
853-
pdfExport.Style.TaskbarColor.ParentTaskbarColor = new PdfColor(220, 118, 51);
854-
pdfExport.Style.TaskbarColor.ParentProgressColor = new PdfColor(203, 67, 53);
855-
pdfExport.Style.TaskbarColor.ChildProgressColor = new PdfColor(35, 155, 86);
856-
pdfExport.Style.TaskbarColor.ChildTaskbarColor = new PdfColor(130, 224, 170);
857-
pdfExport.Style.TaskbarColor.CriticalPathTaskbarColor = new PdfColor(173, 121, 64);
858-
pdfExport.Style.TaskbarColor.CriticalPathProgressColor = new PdfColor(145, 76, 0);
859-
pdfExport.Style.TaskbarColor.BaselineColor = new PdfColor(179, 38, 30);
860-
pdfExport.Style.TaskbarColor.MilestoneColor = new PdfColor(141, 124, 187);
861-
await Gantt.ExportToPdfAsync(pdfExport);
849+
await Gantt.ExportToPdfAsync();
862850
}
863851
}
864-
852+
public void PdfQueryTaskbarInfoHandler(PdfQueryTaskbarInfoEventArgs<TaskData> args)
853+
{
854+
if (args.Data.TaskId == 3)
855+
{
856+
args.TaskbarStyle.Color = new PdfTaskbarColor();
857+
args.TaskbarStyle.Color.ChildProgressColor = new Syncfusion.PdfExport.PdfColor(103, 80, 164);
858+
args.TaskbarStyle.Color.ChildTaskbarColor = new Syncfusion.PdfExport.PdfColor(141, 124, 187);
859+
}
860+
if (args.Data.TaskId == 4)
861+
{
862+
args.TaskbarStyle.Color = new PdfTaskbarColor();
863+
args.TaskbarStyle.Color.MilestoneColor = new Syncfusion.PdfExport.PdfColor(103, 80, 164);
864+
}
865+
866+
}
865867
public class TaskData
866868
{
867869
public int TaskId { get; set; }
868870
public string TaskName { get; set; }
869-
public DateTime? BaselineStartDate { get; set; }
870-
public DateTime? BaselineEndDate { get; set; }
871871
public DateTime StartDate { get; set; }
872872
public DateTime? EndDate { get; set; }
873873
public string Duration { get; set; }
874874
public int Progress { get; set; }
875875
public int? ParentId { get; set; }
876+
public string Predecessor { get; set; }
876877
}
877878
878879
public static List<TaskData> GetTaskCollection()
879880
{
880881
List<TaskData> Tasks = new List<TaskData>()
881882
{
882-
new TaskData() { TaskId = 1, TaskName = "Project initiation", BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 04), StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 06) },
883-
new TaskData() { TaskId = 2, TaskName = "Identify site location", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 02), Duration = "0", BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 02), Progress = 30, ParentId = 1 },
884-
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2021, 04, 02), Duration = "5", Progress = 40, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 06), ParentId = 1 },
885-
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2021, 04, 08), Duration = "0", EndDate = new DateTime(2021, 04, 08), BaselineStartDate = new DateTime(2021, 04, 08), BaselineEndDate = new DateTime(2021, 04, 08), Progress = 30, ParentId = 1 },
886-
new TaskData() { TaskId = 5, TaskName = "Project initiation", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 08) },
887-
new TaskData() { TaskId = 6, TaskName = "Identify site location", StartDate = new DateTime(2021, 04, 02), Duration = "2", Progress = 30, ParentId = 5, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 02) },
888-
new TaskData() { TaskId = 7, TaskName = "Perform soil test", StartDate = new DateTime(2021, 04, 02), Duration = "4", Progress = 40, ParentId = 5, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 03) },
889-
new TaskData() { TaskId = 8, TaskName = "Soil test approval", StartDate = new DateTime(2021, 04, 02), Duration = "5", Progress = 30, ParentId = 5, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 04) }
883+
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), },
884+
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 },
885+
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1, Predecessor = "2" },
886+
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 , Predecessor = "3" },
887+
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), },
888+
new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 },
889+
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 },
890+
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }
890891
};
891892
return Tasks;
892893
}

0 commit comments

Comments
 (0)