diff --git a/blazor/gantt-chart/column-menu.md b/blazor/gantt-chart/column-menu.md index b39224761f..0f5ac8af9c 100644 --- a/blazor/gantt-chart/column-menu.md +++ b/blazor/gantt-chart/column-menu.md @@ -22,11 +22,13 @@ The default items are displayed in the following table: | `ColumnChooser` | Choose the column visibility. | | `Filter` | Shows the filter menu based on column type. | -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + @code{ @@ -38,34 +40,36 @@ The default items are displayed in the following table: 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, 06), 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, 05), 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; } } -``` -![Blazor Gantt Chart with Column Menu](images/blazor-gantt-chart-column-menu.png) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLINkBxKQKsPDis?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} N> You can disable the column menu for a particular column by setting the `GanttColumn.ShowColumnMenu` to `false`. \ No newline at end of file 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..dbb5360aa7 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,18 @@ 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 +32,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 +58,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-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-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/responsive-columns.md b/blazor/gantt-chart/responsive-columns.md index bfc900e445..9f353226b3 100644 --- a/blazor/gantt-chart/responsive-columns.md +++ b/blazor/gantt-chart/responsive-columns.md @@ -57,4 +57,4 @@ You can toggle the column visibility based on media queries, which are defined i return Tasks; } } -``` +``` \ No newline at end of file diff --git a/blazor/gantt-chart/rows.md b/blazor/gantt-chart/rows.md index f89977d8d6..2af49d4461 100644 --- a/blazor/gantt-chart/rows.md +++ b/blazor/gantt-chart/rows.md @@ -15,7 +15,9 @@ 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 @@ -71,7 +73,9 @@ 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 @@ -123,7 +127,9 @@ All tasks available in Gantt Chart are rendered in collapsed state by setting th 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 @@ -176,7 +182,9 @@ In Gantt Chart, you can render some tasks in collapsed state and some tasks in e 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 @@ -244,7 +252,9 @@ You can use [GanttEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo 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 @@ -352,7 +362,9 @@ While rendering the Tree Grid part in Gantt Chart, the [RowDataBound](https://he } ``` -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @@ -409,7 +421,9 @@ The Blazor Gantt Chart Component provides a method called [GetRowTaskModel](http This is demonstrated in the below sample code, where the [GetRowTaskModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetRowTaskModel__0_) method is called on selecting the row, which returns the value of the task model details of the selected record. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids;
@@ -496,7 +510,9 @@ This is demonstrated in the below sample code, where the [GetRowTaskModel](https The `EnableRowHover` feature allows users to easily identify the current row by highlighting it when the mouse hovers over it. This feature can be activated by setting the [EnableRowHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableRowHover) property to true. The following code example explains how to enable row hover selection in Gantt Chart. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @@ -557,7 +573,9 @@ N> By default, all the column's `ClipMode` property is defined as `EllipsisWithT You can enable the Grid cell tooltip by setting the [GanttColumn.ClipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_ClipMode) property to `EllipsisWithTooltip`. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids diff --git a/blazor/gantt-chart/searching.md b/blazor/gantt-chart/searching.md index 52ea6cb68d..c2c92984bf 100644 --- a/blazor/gantt-chart/searching.md +++ b/blazor/gantt-chart/searching.md @@ -11,7 +11,9 @@ documentation: ug You can search for records in the Gantt Chart component by using the [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SearchAsync_System_String_) method with search key as a parameter. The Gantt Chart component provides an option to integrate the search text box in the toolbar by adding the search item to the `Toolbar` property. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @@ -62,7 +64,9 @@ The following screenshot shows the output of searching for string in Gantt Chart In the Gantt Chart component, you can load a task with some search criteria by using the [GanttSearchSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSearchSettings.html) property. To apply a search at initial rendering, set the value for `Fields`, `Operator`, `Key`, and `IgnoreCase` in the `GanttSearchSettings` property. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor @using Syncfusion.Blazor.Gantt @@ -130,7 +134,9 @@ N> By default, the `GanttSearchSettings.Operator` value is *contains*. To search the Gantt Chart records from an external button, invoke the `SearchAsync` method. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Buttons Search @@ -187,7 +193,9 @@ N> You should set the `AllowFiltering` property to `true` for searching the cont By default, the Gantt Chart component searches all the columns. You can search specific columns by defining the specific columns' field names in the [GanttSearchSettings.Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSearchSettings.html#Syncfusion_Blazor_Gantt_GanttSearchSettings_Fields) property. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @@ -239,7 +247,9 @@ N> In above sample, you can search only `TaskName` and `Duration` column values. You can pass the `empty` string to the `SearchAsync` method to clear the searched Gantt records from the external button. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Buttons diff --git a/blazor/gantt-chart/selection.md b/blazor/gantt-chart/selection.md index 73aed22d55..fdde14a391 100644 --- a/blazor/gantt-chart/selection.md +++ b/blazor/gantt-chart/selection.md @@ -24,7 +24,9 @@ The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gan * `Cell`: Allows you to select only cells. * `Both`: Allows you to select rows and cells at the same time. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids @@ -75,7 +77,9 @@ The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gan The toggle selection allows you to select and deselect a specific row or cell. To enable toggle selection, set the [EnableToggle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_EnableToggle) property of the `SelectionSettings` to `true`. If you click the selected row or cell, then it will be deselected and vice versa. By default, the `EnableToggle` property is set to `false`. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons @@ -137,7 +141,9 @@ The Gantt Chart allows to select range of cells or rows by mouse or touch draggi * GanttChart supports drag selection in both [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_CellSelectionMode) `Flow` and `Box` when cell selection enabled. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids @@ -188,7 +194,9 @@ The Gantt Chart allows to select range of cells or rows by mouse or touch draggi You can clear the selected cells and selected rows by using a method called [ClearSelectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ClearSelectionAsync). The following code example demonstrates how to clear the selected rows in Gantt Chart. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons @@ -248,7 +256,9 @@ You can clear the selected cells and selected rows by using a method called [Cle You can get the selected row indexes by using the [GetSelectedRowIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetSelectedRowIndexesAsync) method. And by using [GetSelectedRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetSelectedRecordsAsync) method, you can get the selected record details. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids diff --git a/blazor/gantt-chart/sorting.md b/blazor/gantt-chart/sorting.md index feb49a42fb..a740c7b65b 100644 --- a/blazor/gantt-chart/sorting.md +++ b/blazor/gantt-chart/sorting.md @@ -13,7 +13,9 @@ Sorting enables you to sort data in the ascending or descending order. To sort a To enable sorting in the Gantt Chart component, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowSorting) property to true. Sorting options can be configured through the [GanttSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSortSettings.html) property. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @@ -67,7 +69,9 @@ N> * Gantt Chart columns are sorted in the ascending order. If you click the alr The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component can be rendered with sorted columns initially, and this can be achieved by using the `GanttSortSettings` property. You can add columns that are sorted initially in the `GanttSortSettings.GanttSortDescriptors` collection defined with `Field` and `Direction` properties. The following code example shows how to add the sorted column to Gantt Chart initialization. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids @@ -121,7 +125,9 @@ The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gan Columns in the Gantt Chart component can be sorted dynamically using the [SortByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SortByColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) method. The following code example demonstrates how to invoke the `SortByColumnAsync` method by clicking the custom button. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @@ -176,7 +182,9 @@ Columns in the Gantt Chart component can be sorted dynamically using the [SortBy In the Gantt Chart component, you can clear all the sorted columns and return to previous position using the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ClearSortingAsync) public method. The following code snippet shows how to clear all the sorted columns by clicking the custom button. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @@ -237,7 +245,9 @@ In the Gantt Chart component, you can clear all the sorted columns and return to During the sort action, the Gantt Chart component triggers two events. The [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) event triggers before the sort action starts, and the [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted) event triggers after the sort action is completed. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids @@ -296,7 +306,9 @@ In Gantt, you can sort custom columns of different types like string, numeric, e The following code snippets explains how to achieve this. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt diff --git a/blazor/gantt-chart/split-task.md b/blazor/gantt-chart/split-task.md index 3a760b61e1..a91d36a5ff 100644 --- a/blazor/gantt-chart/split-task.md +++ b/blazor/gantt-chart/split-task.md @@ -19,7 +19,9 @@ In the Blazor Gantt chart, the [GanttSegmentFields](https://help.syncfusion.com/ The below code snippet visualizes the task's segments in gantt chart. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @@ -123,7 +125,9 @@ When you right-click on a taskbar or segment element in the Gantt chart, the con The segmented taskbars can be merged together using **Merge Task** context menu item. The sub context menu of **Merge Task** item includes options for **Right** and **Left**. When the **Right** submenu item is selected, the current segment and the segment to the right of the selected segment gets merged. Similarly, when the **Left** submenu item is selected, the current segment and the segment to the left of the selected segment gets merged. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @@ -221,7 +225,9 @@ The segmented taskbars can be merged together using **Merge Task** context menu In the segments tab of the [add/edit dialog](https://blazor.syncfusion.com/documentation/gantt-chart/editing-tasks#dialog-editing), taskbars can be split or merged by providing the segments details such as the start date, end date, and duration. However, it's important to note that the segment start date and end date cannot exceed the task's start date and end date. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using System.ComponentModel.DataAnnotations @@ -327,7 +333,9 @@ You can split or merge taskbars externally by using the methods [SplitTaskAsync] In the following code snippet, upon external button click, segments of the 1st index record are merged into a single taskbar, and the taskbar in the 2nd index record is split into two segments. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Buttons @@ -446,7 +454,9 @@ The [SegmentChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ga In the below code snippet, using the `SegmentChanging` event a customized message is displayed when doing split or merge actions. Moreover, segment deletion is prevented to the 1st index task. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @segmetEventMessage @@ -573,7 +583,9 @@ The segments appearance can be customized by using the [TaskbarTemplate](https:/ In the code snippet below, the segments are customized based on template context data, and the segment count text is added inside each segment. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt