From 34c925c97d5258fff001907213ef9456ed0fcb11 Mon Sep 17 00:00:00 2001 From: TamilRamGanesan-SF5080 Date: Mon, 8 Sep 2025 10:49:26 +0530 Subject: [PATCH 1/2] 977092: Updation concerns in md file --- blazor/chat-ui/mention.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/blazor/chat-ui/mention.md b/blazor/chat-ui/mention.md index 2bb7b5fab6..dc918a08dc 100644 --- a/blazor/chat-ui/mention.md +++ b/blazor/chat-ui/mention.md @@ -9,8 +9,6 @@ documentation: ug # Mention Integration in Blazor Chat UI component -## Mention Integration in Syncfusion Chat UI - The Syncfusion ChatUI allows users to mention others in messages using the `@` character, with an dropdown for selecting users. The following sections explain how to configure mentions ## Configure Mention Users @@ -143,4 +141,4 @@ You can use the [ValueSelecting](https://help.syncfusion.com/cr/blazor/Syncfusio } } -``` \ No newline at end of file +``` From ca84f7b5774d5599f8e538958ce146971e46b6e3 Mon Sep 17 00:00:00 2001 From: Vignesh Sivalingam Date: Mon, 8 Sep 2025 11:42:51 +0530 Subject: [PATCH 2/2] 977520: Added WBS column documentation --- blazor-toc.html | 2 + blazor/gantt-chart/excel-like-filter.md | 427 ++++++++++++++++++++++++ blazor/gantt-chart/timezone.md | 19 +- blazor/gantt-chart/wbs-column.md | 207 ++++++++++++ 4 files changed, 646 insertions(+), 9 deletions(-) create mode 100644 blazor/gantt-chart/excel-like-filter.md create mode 100644 blazor/gantt-chart/wbs-column.md diff --git a/blazor-toc.html b/blazor-toc.html index 449aedec2c..993c0cae00 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -2960,6 +2960,7 @@
  • Column Menu
  • Column Chooser
  • Responsive Column
    • +
  • WBS Column
  • Timeline @@ -3011,6 +3012,7 @@
  • Filtering
    • diff --git a/blazor/gantt-chart/excel-like-filter.md b/blazor/gantt-chart/excel-like-filter.md new file mode 100644 index 0000000000..724394d127 --- /dev/null +++ b/blazor/gantt-chart/excel-like-filter.md @@ -0,0 +1,427 @@ +--- +layout: post +title: Excel Like Filter in Blazor Gantt Chart | Syncfusion +description: Checkout and learn here all about Excel like filter in Syncfusion Blazor Gantt Chart and much more details. +platform: Blazor +control: Gantt Chart +documentation: ug +--- + +# Excel like filter in Blazor Gantt Chart + +The Syncfusion Blazor Gantt Chart offers an Excel-like filter feature, providing a familiar and intuitive interface for filtering project data within the Gantt Chart. This feature simplifies complex filtering operations on specific columns, allowing for quick task location and manipulation, similar to Microsoft Excel. Excel like filtering is especially useful when dealing with large project datasets and complex filtering requirements for project management scenarios. + +Here is an example that showcasing how to render the Excel like filter within the Gantt Chart: + +```cshtml +@using Syncfusion.Blazor.Gantt + + + + + + + +@code { + private List TaskCollection { get; set; } = new(); + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + public class TaskData + { + 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 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 }, + }; + return Tasks; + } +} +``` + +> * The Excel-like filter feature supports various filter conditions, including text-based filters for task names, number-based filters for task Id and progress, and date-based filters for project timelines. +> * The filter dialog provides additional options, such as searching for specific task values, and clearing applied project filters. + +## Customize the filter choice count + +By default, the filter choice count is set to 1000, which means that the filter dialog will display a maximum of 1000 distinct values for each column as a checkbox list data. This default value ensures that the filter operation remains efficient, even with large project datasets. Additionally, the filter dialog retrieves and displays distinct data from the first 1000 task records bound to the Syncfusion Blazor Gantt Chart to optimize performance, while the remaining records are returned as a result of the search option within the filter dialog. + +The Gantt Chart allows customization of the number of distinct data displayed in the checkbox list of the Excel type filter dialog. This can be useful when working with large project datasets and wanting to customize the default filter choice count values. + +However, there is flexibility to increase or decrease the filter choice count based on specific project requirements. This can be achieved by adjusting the [FilterChoiceCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.FilterDialogOpeningEventArgs.html#Syncfusion_Blazor_Gantt_FilterDialogOpeningEventArgs_FilterChoiceCount) value in the filter dialog opening event. + +The following example demonstrates how to customize the filter choice count in the checkbox list of the filter dialog. In the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_FilterDialogOpening) event, the `FilterChoiceCount` property can be set to the desired value: + +```cshtml +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Grids + + + + + + + + +@code { + private List TaskCollection { get; set; } = new(); + SfGantt? Gantt { get; set; } + + public void FilterDialogOpeningHandler(FilterDialogOpeningEventArgs args) + { + args.FilterChoiceCount = 100; + } + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + private List GetTaskCollection() + { + List tasks = new List(); + int taskId = 1; + + // Generate larger dataset for demonstration + for (int i = 1; i <= 50; i++) + { + tasks.Add(new TaskData() { TaskId = taskId++, TaskName = $"Project Phase {i}", StartDate = new DateTime(2023, 04, 02), Duration = 10, Progress = 25, ParentId = null }); + tasks.Add(new TaskData() { TaskId = taskId++, TaskName = $"Task A-{i}", StartDate = new DateTime(2023, 04, 02), Duration = 3, Progress = 50, ParentId = taskId - 2 }); + tasks.Add(new TaskData() { TaskId = taskId++, TaskName = $"Task B-{i}", StartDate = new DateTime(2023, 04, 05), Duration = 4, Progress = 75, ParentId = taskId - 3 }); + tasks.Add(new TaskData() { TaskId = taskId++, TaskName = $"Task C-{i}", StartDate = new DateTime(2023, 04, 09), Duration = 3, Progress = 30, ParentId = taskId - 4 }); + } + + return tasks; + } + + public class TaskData + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public DateTime StartDate { get; set; } + public DateTime EndDate { get; set; } + public int Duration { get; set; } + public int Progress { get; set; } + public int? ParentId { get; set; } + } +} +``` + +> The specified filter choice count value determines the display of unique items as a checkbox list in the Excel type filter dialog. This can result in a delay in rendering these checkbox items when opening the filter dialog. Therefore, it is advisable to set a restricted filter choice count value for optimal project management performance. + +## Show customized text in filter dialog + +The Syncfusion Blazor Gantt Chart provides flexibility to customize the text displayed in the Excel filtering options. This allows modification of the default text and provides more meaningful and contextual labels for project filtering, enhancing the project management experience. + +To customize the text in the Excel filter, define a `FilterItemTemplate` and bind it to the desired column. The `FilterItemTemplate` property allows creation of custom templates for filter items. Any logic and HTML elements can be used within this template to display the desired text or content relevant to project management scenarios. + +In the example below, customization of the text displayed in the filter checkbox list for a **Status** column is demonstrated. This is achieved by defining a `FilterItemTemplate` within the column element. Inside the template, FilterItemTemplateContext can be used to conditionally display **Completed** if the data value is true and **In Progress** if the value is false: + +```cshtml +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + @{ + var filterContext = (context as FilterItemTemplateContext); + var itemTemplateValue = "DefaultText"; + + if (filterContext.Value.ToString() == "False") + { + itemTemplateValue = "In Progress"; + } + else + { + itemTemplateValue = "Completed"; + } + } + @itemTemplateValue + + + + + + +@code { + private List TaskCollection { get; set; } = new(); + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + private List GetTaskCollection() + { + return new List() + { + new TaskData() { TaskId = 1, TaskName = "Project Management", StartDate = new DateTime(2023, 04, 02), Duration = 10, Progress = 40, IsCompleted = true, ParentId = null }, + new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 100, IsCompleted = true, ParentId = 1 }, + new TaskData() { TaskId = 3, TaskName = "Perform Soil test", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, IsCompleted = true, ParentId = 1 }, + new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 100, IsCompleted = true, ParentId = 1 }, + new TaskData() { TaskId = 5, TaskName = "Project Estimation", StartDate = new DateTime(2023, 04, 02), Duration = 8, Progress = 60, IsCompleted = false, ParentId = null }, + new TaskData() { TaskId = 6, TaskName = "Develop floor plan", StartDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 100, IsCompleted = false, ParentId = 5 }, + new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 40, IsCompleted = false, ParentId = 5 } + }; + } + + public class TaskData + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public DateTime StartDate { get; set; } + public DateTime EndDate { get; set; } + public int Duration { get; set; } + public int Progress { get; set; } + public bool IsCompleted { get; set; } + public int? ParentId { get; set; } + } +} +``` + +## Customize the Excel filter using CSS + +In the Syncfusion Blazor Gantt Chart, there is flexibility to enhance the visual presentation of the Excel filter dialog. This can be achieved by utilizing CSS styles to modify the dialog's appearance according to specific project management needs and application aesthetics. + +**1. Removing context menu option** + +The Excel filter dialog includes several features such as **context menu**, **search box**, and **checkbox list** that may not be required in some project management scenarios. These options can be removed using CSS classes applied to the Gantt Chart. + +```cshtml + +``` + +The following example demonstrates how to remove the context menu option in the Excel filter dialog using the above mentioned CSS for the Gantt Chart: + +```cshtml +@using Syncfusion.Blazor.Gantt + + + + + + + + + +@code { + private List TaskCollection { get; set; } = new(); + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + 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 }, + }; + return Tasks; + } + + public class TaskData + { + 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; } + } +} +``` + +**2. Customize the height and width of filter dialog** + +The height and width of each column's filter dialog can be customized using CSS styles in the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_FilterDialogOpening) event. + +Before opening a filter dialog for each column, the `FilterDialogOpening` event will be triggered. At that point, based on the column name, the height and width of the columns can be set using CSS styles in the following sample. + +```cshtml +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Grids + + + + + + + +@if (IsLarge) +{ + +} +@if (IsSmall) +{ + +} + +@code { + private List TaskCollection { get; set; } = new(); + public bool IsLarge; + public bool IsSmall; + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + public void FilterDialogOpeningHandler(FilterDialogOpeningEventArgs args) + { + if (args.ColumnName == "TaskName") + { + IsLarge = true; + IsSmall = false; + } + else if (args.ColumnName == "TaskId") + { + IsSmall = true; + IsLarge = false; + } + else + { + IsLarge = false; + IsSmall = false; + } + } + 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 }, + }; + return Tasks; + } + + public class TaskData + { + 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; } + } +} +``` + +**3. Customize filter icon for filtered columns** + +After filtering the column, the Gantt Chart will display the built-in filtered icon with predefined styles by default. The filtered icon can also be customized using the `.e-gantt .e-filtered::before` class for enhanced project visualization. + +```cshtml +@using Syncfusion.Blazor.Gantt + + + + + + + + + +@code { + private List TaskCollection { get; set; } = new(); + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + public class TaskData + { + 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 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 }, + }; + return Tasks; + } +} +``` + +> The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page provides comprehensive feature representations. The [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/overview?theme=bootstrap4) demonstrates how to present and manipulate project data effectively. \ No newline at end of file diff --git a/blazor/gantt-chart/timezone.md b/blazor/gantt-chart/timezone.md index 361d492241..a5d0882a3b 100644 --- a/blazor/gantt-chart/timezone.md +++ b/blazor/gantt-chart/timezone.md @@ -1,7 +1,7 @@ --- layout: post title: Timezone Support in Blazor Gantt Chart Component | Syncfusion -description: Checkout and learn here all about Timezone support in Syncfusion Blazor Gantt Chart component and much more details. +description: Learn about timezone support in the Syncfusion Blazor Gantt Chart, including configuration and behavior details. platform: Blazor control: Gantt Chart documentation: ug @@ -9,16 +9,15 @@ documentation: ug # Timezone support in Blazor Gantt Chart -The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component schedules and displays dates and times based on the system timezone. To configure the Gantt Chart to use a specific timezone, assign the desired value to the [Timezone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Timezone) property. This ensures that all task dates and times are interpreted and rendered according to the specified timezone. +The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component schedules and displays dates and times based on the system timezone. To configure the Gantt Chart to use a specific timezone, assign the desired value to the [Timezone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Timezone) property accepts a standard IANA timezone string, such as `UTC` or `America/New_York`. This ensures that task dates, event markers, baseline dates, and indicators are interpreted and rendered in the specified timezone, with automatic handling of daylight saving time (DST) transitions. -## Timezone conversion behavior in the Gantt chart +## Timezone date conversion -The Gantt chart component provides a `Timezone` property that accepts a string value defining the desired time zone (such as "UTC" or "America/New_York"). When this property is set, all relevant dates including those used in tasks, event markers, baseline dates, and indicators are converted and displayed according to the specified timezone. +The `Timezone` property enables the Gantt Chart to convert and display all task-related dates, including start dates, end dates, event markers, and baseline dates, in the specified timezone. For example, a `DateTime` value defined as `new DateTime(2025, 2, 4, 8, 0, 0)` in a system set to Pacific Standard Time (PST, UTC-08:00) will be adjusted to `2025-02-03 09:30 PM` when the `Timezone` property is set to `America/New_York` (ET, UTC-05:00 during standard time). This conversion ensures accurate scheduling and visualization of tasks across different timezones, accounting for DST where applicable. -When a `DateTime` value is defined as `new DateTime(2019, 2, 4, 8, 0, 0)` and the `Timezone` property is set to `America/New_York`, the time is automatically converted from the local system timezone to the target timezone. For example, if the local system timezone is `Indian Standard Time` (IST, UTC+05:30), the date and time `2019-02-04 08:00 AM` will be displayed as `2019-02-03 09:30 PM` in `Eastern Time` (ET, UTC-05:00 during standard time). +## Setting the timezone -## Setting the Timezone -The `Timezone` property can be set directly when defining the Gantt Chart component. For consistent handling, standard IANA time zone names (such as `UTC`, `America/New_York`, `Europe/London`) are supported. +The `Timezone` property can be assigned a standard IANA timezone string, such as `UTC`, `America/New_York`, or `Europe/London`, to control how dates are displayed. The following example demonstrates configuring the Gantt Chart with the `America/New_York` timezone and includes a dropdown to dynamically update the timezone, triggering a re-render of all task dates. ```cshtml @using Syncfusion.Blazor.Gantt @@ -134,9 +133,11 @@ The `Timezone` property can be set directly when defining the Gantt Chart compon ``` ![Timezone in Blazor Gantt Chart](./images/gantt-timezone.gif) -### CRUD Operations with Timezone +### CRUD operations with timezone -All crud operations in the Gantt chart are performed according to the configured `Timezone` property. When adding a record, the start date is determined based on the minimum start date in the current data set and applied as per the specified timezone. Similarly, editing and exporting records use the date and time values as displayed in the defined timezone, ensuring consistency in user interaction, data storage, and output. +CRUD operations in the Blazor Gantt Chart respect the configured `Timezone` property, ensuring consistent date and time handling. When adding a task, the start date is calculated based on the minimum start date in the dataset and converted to the specified timezone. Editing or deleting tasks processes `StartDate` and `EndDate` values in the configured timezone, maintaining consistency in visualization, data storage, and export operations. + +This following code enables adding, editing, and deleting tasks in the Blazor Gantt Chart, with all operations processed in the `America/New_York` timezone. The `GanttEditSettings` properties (`AllowAdding`, `AllowEditing`, `AllowDeleting`, `AllowTaskbarEditing`) enable CRUD functionality, while the `Timezone` property ensures that task dates are converted and displayed consistently. The `GanttTaskFields` map nullable `StartDate` and `EndDate` properties to handle optional date values, and the `GanttDayWorkingTimeCollection` supports 24-hour scheduling in the specified timezone. ```cshtml @using Syncfusion.Blazor.Gantt diff --git a/blazor/gantt-chart/wbs-column.md b/blazor/gantt-chart/wbs-column.md new file mode 100644 index 0000000000..05b353937b --- /dev/null +++ b/blazor/gantt-chart/wbs-column.md @@ -0,0 +1,207 @@ +--- +layout: post +title: WBS Column in Blazor Gantt Chart Component | Syncfusion +description: Checkout and learn here all about WBS Column in Syncfusion Blazor Gantt Chart component and much more details. +platform: Blazor +control: Gantt Chart +documentation: ug +--- + +# Work Breakdown Structure (WBS) in Blazor Gantt component + +The Work Breakdown Structure (WBS) organizes project tasks hierarchically in the Gantt component by assigning unique codes to each task. This system enhances visualization and management by clearly reflecting task relationships and levels through a structured numbering scheme (1, 1.1, 1.1.1, etc.). It proves especially valuable in complex environments like construction projects or enterprise-scale software development. + +WBS provides a structured coding system for tasks, enabling clear hierarchy and predecessor relationships. The automatic code generation ensures efficient task organization, while auto-updates maintain accuracy during sorting, filtering, editing, and row operations. This enhances project tracking in hierarchical structures with event-driven control for performance optimization. + +## Configuration and implementation + +To enable WBS in the Blazor Gantt component, set the [ShowWbsColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ShowWbsColumn) property to `true`. This displays the WBS column in the treegrid area of the Gantt chart. + +The [AutoGenerateWbs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AutoGenerateWbs) property handles WBS code generation automatically. When enabled, the component creates WBS codes based on the task hierarchy and maintains updated codes when tasks are added, deleted, moved, edited, indented, outdented, sorted, filtered, or searched. + +To render the WBS and WBS Predecessor columns, you need to bind the `WbsCode` and `WbsPredecessor` fields in `GanttTaskFields`. + +The WBS code generation follows a hierarchical numbering pattern where parent tasks receive sequential numbers (1, 2, 3), and child tasks append decimal notation (1.1, 1.2, 1.1.1). This automatic generation recalculates codes whenever the task hierarchy changes through operations like indenting, outdenting, or reordering tasks. + +```cshtml +@using Syncfusion.Blazor.Gantt + + + + + + + + + + + + + + + +@code { + private List TaskCollection { get; set; } = new(); + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + private List GetTaskCollection() + { + return new List() + { + new TaskData() { TaskId = 1, TaskName = "Project Management", StartDate = new DateTime(2023, 04, 02), Duration = 5, Progress = 40, ParentId = null }, + new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, ParentId = 1 }, + new TaskData() { TaskId = 3, TaskName = "Perform Soil test", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, ParentId = 1 }, + new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, ParentId = 1, Predecessor = "3FS" }, + new TaskData() { TaskId = 5, TaskName = "Project Estimation", StartDate = new DateTime(2023, 04, 02), Duration = 5, Progress = 40, ParentId = null }, + new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 30, ParentId = 5 }, + new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 40, ParentId = 5, Predecessor = "6FS" } + }; + } + + public class TaskData + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public DateTime StartDate { get; set; } + public DateTime EndDate { get; set; } + public int Duration { get; set; } + public int Progress { get; set; } + public int? ParentId { get; set; } + public string Predecessor { get; set; } + public string? WbsCode { get; set; } + public string? WbsPredecessor { get; set; } + } +} +``` +> The WBS column in Gantt chart currently supports string data types for both WBS codes and WBS predecessor values, ensuring consistent text-based representation across all project hierarchy levels and dependency relationships. + +## Performance optimization with conditional updates + +For enhanced performance in large datasets, controlling when WBS codes are recalculated by through the [DataBound](https://blazor.syncfusion.com/documentation/gantt-chart/events#databound) and [RowDropped](https://blazor.syncfusion.com/documentation/gantt-chart/events#rowdropped) events. This approach optimizes performance during intensive operations like drag-and-drop by enabling auto-update only when necessary. + +The following example demonstrates conditional WBS auto-update activation specifically during row drag and drop operations, preventing unnecessary recalculations during other interactions. + +```cshtml +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + + + + + +@code { + private SfGantt GanttRef; + private List TaskCollection { get; set; } = new(); + private bool EnableAutoUpdate { get; set; } = true; + private bool IsRowDragged{ get; set; } + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + private void DataBoundHandler() + { + // Disable auto-update after row drag operation completes + if (IsRowDragged) + { + EnableAutoUpdate = false; + IsRowDragged = false; + } + + } + + private void RowDragStartHandler(RowDragStartingEventArgs args) + { + // Enable auto-update when row drag begins + EnableAutoUpdate = true; + IsRowDragged = true; + } + + private List GetTaskCollection() + { + return new List() + { + new TaskData() { TaskId = 1, TaskName = "Project Management", StartDate = new DateTime(2023, 04, 02), Duration = 5, Progress = 40, ParentId = null }, + new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, ParentId = 1 }, + new TaskData() { TaskId = 3, TaskName = "Perform Soil test", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, ParentId = 1 }, + new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, ParentId = 1 }, + new TaskData() { TaskId = 5, TaskName = "Project Estimation", StartDate = new DateTime(2023, 04, 02), Duration = 5, Progress = 40, ParentId = null }, + new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 30, ParentId = 5 }, + new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 40, ParentId = 5 } + }; + } + + public class TaskData + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public DateTime StartDate { get; set; } + public DateTime EndDate { get; set; } + public int Duration { get; set; } + public int Progress { get; set; } + public int? ParentId { get; set; } + public string? WbsCode { get; set; } + public string? WbsPredecessor { get; set; } + } +} +``` + +## Limitations + +The WBS feature has a few limitations in the Gantt component: + +* Editing of the WBS code and WBS predecessor columns is not supported. +* Load on demand is not supported with the WBS feature. +* WBS Code and WBS Predecessor fields cannot be mapped directly from the data source as they are generated dynamically by the component based on task hierarchy. + +## See Also +- [How to define columns manually in Blazor Gantt Chart](https://ej2.syncfusion.com/blazor/documentation/gantt-chart/columns/column) +- [How to customize column headers in Blazor Gantt Chart](https://ej2.syncfusion.com/blazor/documentation/gantt-chart/columns/column-headers) +- [How to use the column menu in Blazor Gantt Chart](https://ej2.syncfusion.com/blazor/documentation/gantt-chart/columns/column-menu) +- [How to reorder columns in Blazor Gantt Chart](https://ej2.syncfusion.com/blazor/documentation/gantt-chart/columns/column-reorder) +- [How to resize columns in Blazor Gantt Chart](https://ej2.syncfusion.com/blazor/documentation/gantt-chart/columns/column-resizing) +- [How to use column templates in Blazor Gantt Chart](https://ej2.syncfusion.com/blazor/documentation/gantt-chart/columns/column-template) \ No newline at end of file