diff --git a/blazor/gantt-chart/column-menu.md b/blazor/gantt-chart/column-menu.md index aeb630a54b..ce716d4f85 100644 --- a/blazor/gantt-chart/column-menu.md +++ b/blazor/gantt-chart/column-menu.md @@ -26,11 +26,13 @@ The default menu items are: | `Column Chooser` | Choose column visibility. | | `Filter` | Show the filter menu based on column type. | -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + @code { @@ -43,34 +45,36 @@ The default menu items are: public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime? EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21) }, - new TaskData() { TaskId = 2, TaskName = "Identify site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21) }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21) }, + new TaskData() { TaskID = 2, TaskName = "Identify site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Blazor Gantt Chart showing column menu with sorting, filtering, and autofit options](images/blazor-gantt-chart-column-menu.png) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVoMXiticGodFzW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} > **Note**: Disable the column menu for a specific column by setting [GanttColumn.ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_ShowColumnMenu) to `false`. diff --git a/blazor/gantt-chart/how-to/customize-expand-collapse-icon.md b/blazor/gantt-chart/how-to/customize-expand-collapse-icon.md index 97eb27dbfd..79fdbe68b9 100644 --- a/blazor/gantt-chart/how-to/customize-expand-collapse-icon.md +++ b/blazor/gantt-chart/how-to/customize-expand-collapse-icon.md @@ -11,17 +11,19 @@ documentation: ug In the Gantt Chart component, you can customize the expand and collapse icons by overriding the default icon classes `.e-treegridexpand` and `.e-treegridcollapse` with the `content` property. The below sample code demonstrates the customization of the expand and collapse icons. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + - + @@ -31,21 +33,25 @@ In the Gantt Chart component, you can customize the expand and collapse icons by - + + @code { - private DateTime ProjectStart = new DateTime(2023, 03, 25); - private DateTime ProjectEnd = new DateTime(2024, 05, 07); + private DateTime ProjectStart = new DateTime(2023, 04, 03); + private DateTime ProjectEnd = new DateTime(2023, 04, 28); + private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GanttData.EditingData().ToList(); } + public class GanttData { public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime? StartDate { get; set; } public DateTime? EndDate { get; set; } @@ -53,56 +59,39 @@ In the Gantt Chart component, you can customize the expand and collapse icons by public int Progress { get; set; } public string Predecessor { get; set; } public string Notes { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } + public static List EditingData() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Product concept", StartDate = new DateTime(2023, 04, 02), EndDate = new DateTime(2023, 04, 08), Duration = "5 days" }, - new TaskData() { TaskId = 2, TaskName = "Defining the product usage", StartDate = new DateTime(2023, 04, 02), EndDate = new DateTime(2023, 04, 08), Duration = "3", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Defining the target audience", StartDate = new DateTime(2023, 04, 02), EndDate = new DateTime(2023, 04, 04), Duration = "3", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Prepare product sketch and notes", StartDate = new DateTime(2023, 04, 05), EndDate = new DateTime(2023, 04, 08), Duration = "2", Progress = 30, ParentId = 1, Predecessor="2" }, - new TaskData() { TaskId = 5, TaskName = "Concept approval", StartDate = new DateTime(2023, 04, 08), EndDate = new DateTime(2023, 04, 08), Duration="0", Predecessor="3,4" }, - new TaskData() { TaskId = 6, TaskName = "Market research", StartDate = new DateTime(2023, 04, 09), EndDate = new DateTime(2023, 04, 18), Predecessor="2", Duration = "4",Progress = 30 }, - new TaskData() { TaskId = 7, TaskName = "Demand analysis", StartDate = new DateTime(2023, 04, 09), EndDate = new DateTime(2023, 04, 12), Duration = "4", Progress = 40, ParentId = 6 }, - new TaskData() { TaskId = 8, TaskName = "Customer strength", StartDate = new DateTime(2023, 04, 09), EndDate = new DateTime(2023, 04, 12), Duration = "4", Progress = 30, ParentId = 7, Predecessor="5" }, - new TaskData() { TaskId = 9, TaskName = "Market opportunity analysis", StartDate = new DateTime(2023, 04, 09), EndDate = new DateTime(2023, 04, 12), Duration = "4", ParentId = 7, Predecessor = "5" }, - new TaskData() { TaskId = 10, TaskName = "Competitor analysis", StartDate = new DateTime(2023, 04, 15), EndDate = new DateTime(2023, 04, 18), Duration = "4", Progress = 30, ParentId = 6, Predecessor = "7,8" }, - new TaskData() { TaskId = 11, TaskName = "Product strength analysis", StartDate = new DateTime(2023, 04, 15), EndDate = new DateTime(2023, 04, 18), Duration = "4", Progress = 40, ParentId = 6, Predecessor = "9" }, - new TaskData() { TaskId = 12, TaskName = "Research completed", StartDate = new DateTime(2023, 04, 22), EndDate = new DateTime(2023, 04, 22), Duration = "0", Progress = 30, ParentId = 6, Predecessor = "10", }, - new TaskData() { TaskId = 13, TaskName = "Product design and development", StartDate = new DateTime(2023, 04, 19), EndDate = new DateTime(2023, 05, 16), Duration = "20" }, - new TaskData() { TaskId = 14, TaskName = "Functionality design", StartDate = new DateTime(2023, 04, 19), EndDate = new DateTime(2023, 04, 23), Duration = "3", Progress = 30, ParentId = 13, Predecessor = "12" }, - new TaskData() { TaskId = 15, TaskName = "Quality design", StartDate = new DateTime(2023, 04, 19), EndDate = new DateTime(2023, 04, 23), Duration = "3", Progress = 40, ParentId = 13, Predecessor = "12" }, - new TaskData() { TaskId = 16, TaskName = "Define reliability", StartDate = new DateTime(2023, 04, 24), EndDate = new DateTime(2023, 04, 25), Duration = "2", Progress = 30, ParentId = 13, Predecessor = "15" }, - new TaskData() { TaskId = 17, TaskName = "Identifying raw materials", StartDate = new DateTime(2023, 04, 24), EndDate = new DateTime(2023, 04, 25), Duration = "2", ParentId = 13, Predecessor = "15" }, - new TaskData() { TaskId = 18, TaskName = "Define cost plan", StartDate = new DateTime(2023, 04, 26), EndDate = new DateTime(2023, 04, 29), Duration = "2", Progress = 30, ParentId = 13, Predecessor = "17" }, - new TaskData() { TaskId = 19, TaskName = "Define manufacturing cost", StartDate = new DateTime(2023, 04, 26), EndDate = new DateTime(2023, 04, 29), Duration = "2", Progress = 40, ParentId = 18, Predecessor = "17" }, - new TaskData() { TaskId = 20, TaskName = "Define selling cost", StartDate = new DateTime(2023, 04, 26), EndDate = new DateTime(2023, 04, 29), Duration = "2", Progress = 30, ParentId = 18, Predecessor = "17" }, - new TaskData() { TaskId = 21, TaskName = "Development of final design", StartDate = new DateTime(2023, 04, 30), EndDate = new DateTime(2023, 05, 08), Duration = "7", ParentId = 13 }, - new TaskData() { TaskId = 22, TaskName = "Develop dimensions and design", StartDate = new DateTime(2023, 04, 30), EndDate = new DateTime(2023, 05, 01), Duration = "2", Progress = 30, ParentId = 21, Predecessor = "19,20" }, - new TaskData() { TaskId = 23, TaskName = "Develop designs to meet industry standard", StartDate = new DateTime(2023, 05, 02), EndDate = new DateTime(2023, 05, 03), Duration = "2", Progress = 40, ParentId = 21, Predecessor = "22" }, - new TaskData() { TaskId = 24, TaskName = "Include all the details", StartDate = new DateTime(2023, 05, 06), EndDate = new DateTime(2023, 05, 08), Duration = "3", Progress = 30, ParentId = 21, Predecessor = "23" }, - new TaskData() { TaskId = 25, TaskName = "CAD - Computer Aided Design", StartDate = new DateTime(2023, 05, 09), EndDate = new DateTime(2023, 05, 13), Duration = "3", Predecessor = "24" }, - new TaskData() { TaskId = 26, TaskName = "CAM - Computer Aided Manufacturing", StartDate = new DateTime(2023, 05, 14), EndDate = new DateTime(2023, 05, 16), Duration = "3", Progress = 30, Predecessor = "25" }, - new TaskData() { TaskId = 27, TaskName = "Finalize the design", StartDate = new DateTime(2023, 04, 16), EndDate = new DateTime(2023, 04, 16), Duration = "0", Progress = 40, Predecessor = "26" }, - new TaskData() { TaskId = 28, TaskName = "Prototype testing", StartDate = new DateTime(2023, 05, 17), EndDate = new DateTime(2023, 05, 22), Duration = "4", Progress = 30, Predecessor = "27" }, - new TaskData() { TaskId = 29, TaskName = "Include feedback", StartDate = new DateTime(2023, 05, 17), EndDate = new DateTime(2023, 05, 22), Duration = "4", Predecessor = "28ss", }, - new TaskData() { TaskId = 30, TaskName = "Manufacturing", StartDate = new DateTime(2023, 05, 23), EndDate = new DateTime(2023, 05, 29), Duration = "5", Progress = 30, Predecessor = "28,29" }, - new TaskData() { TaskId = 31, TaskName = "Assembling material into finished goods", StartDate = new DateTime(2023, 05, 30), EndDate = new DateTime(2023, 06, 05), Duration = "5", Progress = 40, Predecessor = "30" }, - new TaskData() { TaskId = 32, TaskName = "Final product development", StartDate = new DateTime(2023, 06, 06), EndDate = new DateTime(2023, 06, 13), Duration = "6", Progress = 30 }, - new TaskData() { TaskId = 33, TaskName = "Important improvement", StartDate = new DateTime(2023, 06, 06), EndDate = new DateTime(2023, 06, 10), Duration = "3", ParentId = 32, Predecessor = "31" }, - new TaskData() { TaskId = 34, TaskName = "Customer testing and feedback", StartDate = new DateTime(2023, 06, 11), EndDate = new DateTime(2023, 06, 13), Duration = "3", Progress = 30, ParentId = 32, Predecessor = "33" }, - new TaskData() { TaskId = 35, TaskName = "Final product development", StartDate = new DateTime(2023, 06, 14), EndDate = new DateTime(2023, 06, 19), Duration = "4", Progress = 40 }, - new TaskData() { TaskId = 36, TaskName = "Important improvement", StartDate = new DateTime(2023, 06, 14), EndDate = new DateTime(2023, 06, 19), Duration = "4", Progress = 30, ParentId = 35, Predecessor = "34" }, - new TaskData() { TaskId = 37, TaskName = "Address any unforeseen issues", StartDate = new DateTime(2023, 06, 14), EndDate = new DateTime(2023, 06, 19), Duration = "4", Progress = 30, Predecessor = "36ss", ParentId = 35, }, - new TaskData() { TaskId = 38, TaskName = "Finalize the product ", StartDate = new DateTime(2023, 06, 20), EndDate = new DateTime(2023, 07, 01), Duration = "8", Progress = 40 }, - new TaskData() { TaskId = 39, TaskName = "Branding the product", StartDate = new DateTime(2023, 06, 20), EndDate = new DateTime(2023, 06, 25), Duration = "4", Progress = 30, ParentId = 38, Predecessor = "37" }, - new TaskData() { TaskId = 40, TaskName = "Marketing and Presales", StartDate = new DateTime(2023, 06, 26), EndDate = new DateTime(2023, 07, 01), ParentId = 38, Duration = "4", Predecessor = "39" } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Product concept", StartDate = new DateTime(2023, 04, 03), EndDate = new DateTime(2023, 04, 07), Duration = "5 days", Progress = 30 }, + new TaskData() { TaskID = 2, TaskName = "Defining the product usage", StartDate = new DateTime(2023, 04, 03), EndDate = new DateTime(2023, 04, 05), Duration = "3", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Defining the target audience", StartDate = new DateTime(2023, 04, 03), EndDate = new DateTime(2023, 04, 05), Duration = "3", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Prepare product sketch and notes", StartDate = new DateTime(2023, 04, 06), EndDate = new DateTime(2023, 04, 07), Duration = "2", Progress = 30, ParentID = 1, Predecessor = "2" }, + new TaskData() { TaskID = 5, TaskName = "Concept approval", StartDate = new DateTime(2023, 04, 07), EndDate = new DateTime(2023, 04, 07), Duration = "0", Progress = 0, Predecessor = "3,4" }, + new TaskData() { TaskID = 6, TaskName = "Market research", StartDate = new DateTime(2023, 04, 10), EndDate = new DateTime(2023, 04, 14), Duration = "5", Progress = 30 }, + new TaskData() { TaskID = 7, TaskName = "Demand analysis", StartDate = new DateTime(2023, 04, 10), EndDate = new DateTime(2023, 04, 12), Duration = "3", Progress = 40, ParentID = 6 }, + new TaskData() { TaskID = 8, TaskName = "Customer strength", StartDate = new DateTime(2023, 04, 10), EndDate = new DateTime(2023, 04, 12), Duration = "3", Progress = 30, ParentID = 7, Predecessor = "5" }, + new TaskData() { TaskID = 9, TaskName = "Market opportunity analysis", StartDate = new DateTime(2023, 04, 10), EndDate = new DateTime(2023, 04, 12), Duration = "3", ParentID = 7, Predecessor = "5" }, + new TaskData() { TaskID = 10, TaskName = "Competitor analysis", StartDate = new DateTime(2023, 04, 13), EndDate = new DateTime(2023, 04, 14), Duration = "2", Progress = 30, ParentID = 6, Predecessor = "7,8" }, + new TaskData() { TaskID = 11, TaskName = "Product strength analysis", StartDate = new DateTime(2023, 04, 13), EndDate = new DateTime(2023, 04, 14), Duration = "2", Progress = 40, ParentID = 6, Predecessor = "9" }, + new TaskData() { TaskID = 12, TaskName = "Research completed", StartDate = new DateTime(2023, 04, 14), EndDate = new DateTime(2023, 04, 14), Duration = "0", Progress = 0, ParentID = 6, Predecessor = "10,11" }, + new TaskData() { TaskID = 13, TaskName = "Product design and development", StartDate = new DateTime(2023, 04, 17), EndDate = new DateTime(2023, 04, 28), Duration = "10", Progress = 30 }, + new TaskData() { TaskID = 14, TaskName = "Functionality design", StartDate = new DateTime(2023, 04, 17), EndDate = new DateTime(2023, 04, 19), Duration = "3", Progress = 30, ParentID = 13, Predecessor = "12" }, + new TaskData() { TaskID = 15, TaskName = "Quality design", StartDate = new DateTime(2023, 04, 17), EndDate = new DateTime(2023, 04, 19), Duration = "3", Progress = 40, ParentID = 13, Predecessor = "12" }, + new TaskData() { TaskID = 16, TaskName = "Define reliability", StartDate = new DateTime(2023, 04, 20), EndDate = new DateTime(2023, 04, 21), Duration = "2", Progress = 30, ParentID = 13, Predecessor = "15" }, + new TaskData() { TaskID = 17, TaskName = "Identifying raw materials", StartDate = new DateTime(2023, 04, 20), EndDate = new DateTime(2023, 04, 21), Duration = "2", Progress = 0, ParentID = 13, Predecessor = "15" }, + new TaskData() { TaskID = 18, TaskName = "Define cost plan", StartDate = new DateTime(2023, 04, 24), EndDate = new DateTime(2023, 04, 26), Duration = "3", Progress = 30, ParentID = 13, Predecessor = "17" }, + new TaskData() { TaskID = 19, TaskName = "Define manufacturing cost", StartDate = new DateTime(2023, 04, 24), EndDate = new DateTime(2023, 04, 26), Duration = "3", Progress = 40, ParentID = 18 }, + new TaskData() { TaskID = 20, TaskName = "Define selling cost", StartDate = new DateTime(2023, 04, 24), EndDate = new DateTime(2023, 04, 26), Duration = "3", Progress = 30, ParentID = 18, Predecessor = "17" } }; return Tasks; } } } + -``` -![Hiding Blazor Gantt Chart Part](../images/blazor-gantt-chart-expand-collapse-icon-change.gif) \ No newline at end of file +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBeWjNigogyJNzl?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/gantt-chart/how-to/hide-chart-part.md b/blazor/gantt-chart/how-to/hide-chart-part.md index f83620ff70..6fbb760d0c 100644 --- a/blazor/gantt-chart/how-to/hide-chart-part.md +++ b/blazor/gantt-chart/how-to/hide-chart-part.md @@ -11,10 +11,12 @@ documentation: ug In the Gantt Chart component, you can hide chart part and display Tree Grid part alone by setting the value of [GanttSplitterSettings.View](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSplitterSettings.html#Syncfusion_Blazor_Gantt_GanttSplitterSettings_View) property as `Grid`. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + @@ -28,27 +30,27 @@ In the Gantt Chart component, you can hide chart part and display Tree Grid part public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public List SubTasks { get; set; } + public int? ParentID { get; set; } } private static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 23), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 50, ParentId = 1, }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 50, ParentId = 1, } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 50, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 50, ParentID = 1, } }; return Tasks; } } -``` -The following screenshot shows the output of the above code snippet. +{% endhighlight %} +{% endtabs %} -![Hiding Blazor Gantt Chart Part](../images/blazor-hide-gantt-chart-part.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVetkLHARucneHx?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-GetRowTaskModel.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-GetRowTaskModel.PNG deleted file mode 100644 index d18546a5a4..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-GetRowTaskModel.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-clear-sorting.png b/blazor/gantt-chart/images/blazor-gantt-chart-clear-sorting.png deleted file mode 100644 index b6d5a0621f..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-clear-sorting.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-menu.png b/blazor/gantt-chart/images/blazor-gantt-chart-column-menu.png deleted file mode 100644 index 940e23a872..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-column-menu.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-expand-collapse-icon-change.gif b/blazor/gantt-chart/images/blazor-gantt-chart-expand-collapse-icon-change.gif deleted file mode 100644 index 92d6edfc22..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-expand-collapse-icon-change.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-initial-search.png b/blazor/gantt-chart/images/blazor-gantt-chart-initial-search.png deleted file mode 100644 index 2b0cc749ff..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-initial-search.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-initial-selection.png b/blazor/gantt-chart/images/blazor-gantt-chart-initial-selection.png deleted file mode 100644 index 50b2fc28e0..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-initial-selection.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multi-column-sorting.png b/blazor/gantt-chart/images/blazor-gantt-chart-multi-column-sorting.png deleted file mode 100644 index ac36736140..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-multi-column-sorting.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multi-row-selection.png b/blazor/gantt-chart/images/blazor-gantt-chart-multi-row-selection.png deleted file mode 100644 index 92425a4edd..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-multi-row-selection.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-row-selection.png b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-row-selection.png deleted file mode 100644 index f88657110c..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-row-selection.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-row-height.png b/blazor/gantt-chart/images/blazor-gantt-chart-row-height.png deleted file mode 100644 index 4b4b6029e3..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-row-height.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-row-hover-selection.gif b/blazor/gantt-chart/images/blazor-gantt-chart-row-hover-selection.gif deleted file mode 100644 index 242566040a..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-row-hover-selection.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-row-selection.png b/blazor/gantt-chart/images/blazor-gantt-chart-row-selection.png deleted file mode 100644 index 28cf8e8631..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-row-selection.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-row-style.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-row-style.PNG deleted file mode 100644 index c6f2fd503a..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-row-style.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-search.png b/blazor/gantt-chart/images/blazor-gantt-chart-search.png deleted file mode 100644 index 23ecb1dceb..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-search.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-searching.png b/blazor/gantt-chart/images/blazor-gantt-chart-searching.png deleted file mode 100644 index 68c72d6a02..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-searching.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-sorting.png b/blazor/gantt-chart/images/blazor-gantt-chart-sorting.png deleted file mode 100644 index 958c7ff1c1..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-sorting.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-split-task-context.png b/blazor/gantt-chart/images/blazor-gantt-chart-split-task-context.png deleted file mode 100644 index e3b6d0814a..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-split-task-context.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-split-task-dialog.png b/blazor/gantt-chart/images/blazor-gantt-chart-split-task-dialog.png deleted file mode 100644 index f4a012fc40..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-split-task-dialog.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-split-task-event.gif b/blazor/gantt-chart/images/blazor-gantt-chart-split-task-event.gif deleted file mode 100644 index 9c6a0aa002..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-split-task-event.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-split-task-method.gif b/blazor/gantt-chart/images/blazor-gantt-chart-split-task-method.gif deleted file mode 100644 index 279f0241e8..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-split-task-method.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-split-task-template.png b/blazor/gantt-chart/images/blazor-gantt-chart-split-task-template.png deleted file mode 100644 index 747b71f7e8..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-split-task-template.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-split-task.png b/blazor/gantt-chart/images/blazor-gantt-chart-split-task.png deleted file mode 100644 index b7db7ee2ea..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-split-task.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-with-collapse-row.png b/blazor/gantt-chart/images/blazor-gantt-chart-with-collapse-row.png deleted file mode 100644 index fafdd00ef5..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-with-collapse-row.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-hide-gantt-chart-part.png b/blazor/gantt-chart/images/blazor-hide-gantt-chart-part.png deleted file mode 100644 index 181e332d83..0000000000 Binary files a/blazor/gantt-chart/images/blazor-hide-gantt-chart-part.png and /dev/null differ diff --git a/blazor/gantt-chart/images/expandState.png b/blazor/gantt-chart/images/expandState.png deleted file mode 100644 index 28b2ada155..0000000000 Binary files a/blazor/gantt-chart/images/expandState.png and /dev/null differ diff --git a/blazor/gantt-chart/images/gantt-allow-drag-selection.gif b/blazor/gantt-chart/images/gantt-allow-drag-selection.gif deleted file mode 100644 index efc089ff39..0000000000 Binary files a/blazor/gantt-chart/images/gantt-allow-drag-selection.gif and /dev/null differ diff --git a/blazor/gantt-chart/responsive-columns.md b/blazor/gantt-chart/responsive-columns.md index bfc900e445..fcf30a0839 100644 --- a/blazor/gantt-chart/responsive-columns.md +++ b/blazor/gantt-chart/responsive-columns.md @@ -11,13 +11,15 @@ documentation: ug You can toggle the column visibility based on media queries, which are defined in the `HideAtMedia`. The `HideAtMedia` accepts valid [Media Queries]( http://cssmediaqueries.com/what-are-css-media-queries.html ). -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + - + @@ -32,29 +34,33 @@ You can toggle the column visibility based on media queries, which are defined i public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime? EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhyiNDuKAHMJvWZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/gantt-chart/row-selection.md b/blazor/gantt-chart/row-selection.md index da561a69e6..a8a5231dd3 100644 --- a/blazor/gantt-chart/row-selection.md +++ b/blazor/gantt-chart/row-selection.md @@ -11,10 +11,12 @@ documentation: ug The row selection in the Gantt Chart component can be enabled or disabled using the `AllowSelection` property. You can get the selected row object using the [GetSelectedRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetSelectedRecordsAsync) method. The following code example shows how to disable the row selection in Gantt Chart. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + @@ -27,32 +29,36 @@ The row selection in the Gantt Chart component can be enabled or disabled using public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime? EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 02), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 07), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 02), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrSiZtusYuuRsAU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> `Row` selection is the default type of Gantt Chart selection mode. @@ -60,10 +66,12 @@ N> `Row` selection is the default type of Gantt Chart selection mode. You can select a row at the time of loading by setting the index of the row to the [SelectedRowIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SelectedRowIndex) property. Find the following code example for details. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + @@ -76,47 +84,51 @@ You can select a row at the time of loading by setting the index of the row to t public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime? EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 02), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 04), EndDate = new DateTime(2022, 04, 07), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 02), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Initial Selection in Blazor Gantt Chart](images/blazor-gantt-chart-initial-selection.png) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBSsXZaVthZuiLH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Selecting a row dynamically You can select a single row dynamically using the [SelectRowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowAsync_System_Double_System_Nullable_System_Boolean__) method. Similarly, you can use the [SelectRowsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowAsync_System_Double_System_Nullable_System_Boolean__) method to dynamically select multiple rows. The following code demonstrates how to select a single or multiple rows dynamically by clicking the custom button. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Buttons Select Row Select Rows - + @@ -139,46 +151,48 @@ You can select a single row dynamically using the [SelectRowAsync](https://help. public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime? EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Row Selection in Blazor Gantt Chart](images/blazor-gantt-chart-row-selection.png) +{% endhighlight %} +{% endtabs %} -![Selecting Multiple Rows Dynamically in Blazor Gantt Chart](images/blazor-gantt-chart-multiple-row-selection.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNryiZNaVtmBfDkH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Multiple row selection You can select multiple rows by setting the `SelectionSettings.Type` property to [Multiple](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SelectionType.html#Syncfusion_Blazor_Grids_SelectionType_Multiple). You can select more than one row by holding down the CTRL key while selecting multiple rows. The following code example explains how to enable multiple selection in Gantt Chart. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids - + @@ -192,31 +206,33 @@ You can select multiple rows by setting the `SelectionSettings.Type` property to public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime? EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Multiple Row Selection in Blazor Gantt Chart](images/blazor-gantt-chart-multi-row-selection.png) \ No newline at end of file +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVeMtXaLtvMvIVa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/gantt-chart/rows.md b/blazor/gantt-chart/rows.md index f89977d8d6..bf667a9345 100644 --- a/blazor/gantt-chart/rows.md +++ b/blazor/gantt-chart/rows.md @@ -15,12 +15,14 @@ Row represents task information from the data source, and it is possible to perf It is possible to change the height of the row in Gantt Chart by setting row height in pixels to the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.IGantt.html#Syncfusion_Blazor_Gantt_IGantt_RowHeight) property. The following code example explains how to change the row height in Gantt Chart at load time. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + @@ -34,34 +36,36 @@ It is possible to change the height of the row in Gantt Chart by setting row hei public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime? EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } private static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentId = 1, }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentId = 5, }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentId = 5, }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentId = 5, } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } }; return Tasks; } } -``` -![Changing Row Height in Blazor Gantt Chart](images/blazor-gantt-chart-row-height.png) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVSMXZuVCvrYhhK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Expand or collapse row @@ -71,12 +75,14 @@ In Gantt Chart, parent tasks are expanded/collapsed by using expand/collapse ico All tasks available in Gantt Chart are rendered in collapsed state by setting the [CollapseAllParentTasks](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_CollapseAllParentTasks) property as `true`. The following code example shows how to use this property. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + @@ -90,45 +96,49 @@ All tasks available in Gantt Chart are rendered in collapsed state by setting th public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime? EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } private static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentId = 1, }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentId = 5, }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentId = 5, }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentId = 5, } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } }; return Tasks; } } -``` -![Blazor Gantt Chart with Collapsed Row](images/blazor-gantt-chart-with-collapse-row.png) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrIsNXEVMOywXCX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Define Expand/Collapse Status of Tasks In Gantt Chart, you can render some tasks in collapsed state and some tasks in expanded state by defining expand status of the task in the data source. This value was mapped to Gantt Chart component by using [GanttTaskFields.ExpandState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_ExpandState) property. The following code example shows how to use this property. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + @@ -142,13 +152,13 @@ In Gantt Chart, you can render some tasks in collapsed state and some tasks in e public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime? EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } public bool isExpand { get; set; } } @@ -156,32 +166,36 @@ In Gantt Chart, you can render some tasks in collapsed state and some tasks in e { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), isExpand = true }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentId = 1, }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), isExpand = false }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentId = 5, }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentId = 5, }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentId = 5, } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), isExpand = true }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), isExpand = false }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } }; return Tasks; } } -``` -![Alt text](images/expandState.png) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBoiXZEhBXdHTvb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Customize expand and collapse action You can use [GanttEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html) to handle on expand action, `Expanding` and `Expanded` events will be triggered with current expanding row’s information. Similarly, on collapse action, `Collapsing` and `Collapsed` events will be triggered. Using these events and their arguments, you can customize the expand/collapse action. The following code example shows how to prevent the particular row from expand/collapse action using the `Expanding` and `Collapsing` events. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + @@ -190,14 +204,14 @@ You can use [GanttEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo public void Collapsing(Syncfusion.Blazor.TreeGrid.RowCollapsingEventArgs args) { - if (args.Data.TaskId == 1) + if (args.Data.TaskID == 1) { args.Cancel = true; } } public void Expanding(Syncfusion.Blazor.TreeGrid.RowExpandingEventArgs args) { - if (args.Data.TaskId == 5) + if (args.Data.TaskID == 5) { args.Cancel = true; } @@ -212,13 +226,13 @@ You can use [GanttEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime? EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } @@ -226,34 +240,40 @@ You can use [GanttEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentId = 1, }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentId = 5, }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentId = 5, }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentId = 5, } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthIWDZOLVCYxrbg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Customize rows and cells While rendering the Tree Grid part in Gantt Chart, the [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_RowDataBound) and [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_QueryCellInfo) events trigger for every row and cell. Using these events, you can customize the rows and cells. To customize the appearance of a row on the chart side by using the [QueryChartRowInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_QueryChartRowInfo) event. The following code example shows how to customize the cell and row elements using these events. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids - + - + @@ -276,7 +296,7 @@ While rendering the Tree Grid part in Gantt Chart, the [RowDataBound](https://he } @code{ - public void QueryCellInfo(QueryCellInfoEventArgs args) + public void QueryCellInfo(Syncfusion.Blazor.Grids.QueryCellInfoEventArgs args) { if (args.Column.Field == "Progress") { @@ -292,14 +312,14 @@ While rendering the Tree Grid part in Gantt Chart, the [RowDataBound](https://he } public void RowDataBound(RowDataBoundEventArgs args) { - if (args.Data.TaskId == 4) + if (args.Data.TaskID == 4) { args.Row.AddClass(new string[] { "custom-row" }); } } public void queryChart(QueryChartRowInfoEventArgs args) { - if (args.Data.TaskId == 4) + if (args.Data.TaskID == 4) { args.Row.AddClass(new string[] { "custom-row" }); } @@ -313,34 +333,36 @@ While rendering the Tree Grid part in Gantt Chart, the [RowDataBound](https://he public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime? EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } private static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentId = 1, }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentId = 5, }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentId = 5, }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentId = 5, } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } }; return Tasks; } } -``` -![Customizing Rows and Cells in Blazor Gantt Chart](images/blazor-gantt-chart-row-cell-customization.png) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhIsDNuLVgNyliS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Styling alternate rows @@ -352,12 +374,14 @@ While rendering the Tree Grid part in Gantt Chart, the [RowDataBound](https://he } ``` -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - +