()
+ {
+ new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 7), },
+ 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;
+ }
+
+ 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; }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBeCjZUpcIouXer?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Hide default filter icon while perform filtering through method
+
+To remove the default filter icon from the UI, apply the following CSS:
+
+```css
+.e-filtermenudiv.e-icons.e-icon-filter {
+ display: none;
+}
+
+```
+
+You can perform filtering programmatically using the [FilterByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_FilterByColumnAsync_System_String_System_String_System_String_System_String_System_Nullable_System_Boolean__System_Nullable_System_Boolean__) method, and reset it using [ClearFilteringAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ClearFilteringAsync) through button actions.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Gantt
+@using Syncfusion.Blazor.Buttons
+
+
+ Filter Task Name Column
+ Clear Filter
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private List TaskCollection { get; set; } = new();
+ private SfGantt GanttInstance;
+
+ protected override void OnInitialized()
+ {
+ TaskCollection = GetTaskCollection();
+ }
+
+ private async Task PerformFilter()
+ {
+ await GanttInstance.FilterByColumnAsync("TaskName", "startswith", "Project");
+ }
+
+ private async Task ClearFilter()
+ {
+ await GanttInstance.ClearFilteringAsync();
+ }
+
+ 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, 7), },
+ 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;
+ }
+
+ 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; }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrysXXUTPPCTyhw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Customize the default input component of filter menu dialog
+
+You can customize the input components in the filter menu of the Syncfusion Blazor Gantt Chart by using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_FilterItemTemplate) property in `GanttColumn`. This enables column-specific customization and precise control over the behavior of individual filter components.
+
+| Column Type | Default component |Customization | API Reference |
+| ----------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| String | [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) | Eg: Autofill="false" | [AutoComplete API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) |
+| Number | [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) | Eg: ShowSpinButton="false" | [NumericTextBox API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html) |
+| Boolean | [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) | Eg: SortOrder="SortOrder.Ascending" | [DropDownList API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) |
+| Date | [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started) | Eg: WeekNumber="true" | [DatePicker API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html) |
+| DateTime | [DateTimePicker](https://blazor.syncfusion.com/documentation/datetime-picker/getting-started) | Eg: ShowClearButton="true" | [DateTimePicker API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html) |
+
+The following sample demonstrates how to disable the autofill feature by setting the `Autofill` parameter to **false** for the **TaskName** column, and how to configure a `NumericTextBox` without a spin button (`ShowSpinButton` set to **false**) for the **TaskID** column.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Gantt
+@using Syncfusion.Blazor.Inputs
+@using Syncfusion.Blazor.DropDowns
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+ @{
+ var contextModel = context as PredicateModel;
+ }
+
+
+
+
+
+
+ @{
+ var contextModel = context as PredicateModel;
+ }
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private List TaskCollection { get; set; } = new();
+ private List CustomerData { get; set; } = new();
+
+ protected override void OnInitialized()
+ {
+ TaskCollection = GetTaskCollection();
+ CustomerData = TaskCollection.Select(t => t.TaskName).Distinct().ToList();
+ }
+
+ 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, 7), },
+ 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;
+ }
+
+ 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; }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhosZjKTkWPUTuQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
diff --git a/blazor/gantt-chart/split-task.md b/blazor/gantt-chart/splitting-and-merging-tasks.md
similarity index 89%
rename from blazor/gantt-chart/split-task.md
rename to blazor/gantt-chart/splitting-and-merging-tasks.md
index be7d165faf..a59bf4e4c4 100644
--- a/blazor/gantt-chart/split-task.md
+++ b/blazor/gantt-chart/splitting-and-merging-tasks.md
@@ -1,23 +1,27 @@
---
layout: post
-title: Split task in Blazor Gantt Chart component | Syncfusion
-description: Checkout and learn here all about split task in Syncfusion Blazor Gantt Chart component and much more.
+title: Splitting and merging tasks in Syncfusion Blazor Gantt Chart component
+description: Learn how to split and merge tasks in the Syncfusion Blazor Gantt Chart component for flexible task management in project timelines.
platform: Blazor
-control: Gantt Chart
+control: Splitting and merging tasks
documentation: ug
---
-# Split task in Blazor Gantt Chart component
+# Splitting and merging tasks in Blazor Gantt Chart component
-In [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart), the split task feature enables you to divide a task or pause work when necessary, whether it's planned or unexpected. This feature adds dynamism and interactivity to the view, enhancing the visualization of project tasks on the timeline. The divided parts of a task's bar in the Gantt Chart are referred to as **segments**. You have the flexibility to both split and merge multiple segments within a taskbar.
+Splitting and merging tasks in the Blazor Gantt Chart component enhances project management by allowing tasks to be divided into segments or recombined, representing breaks or continuous work periods. This feature enables dividing a task or pausing work when necessary, whether planned or unexpected, and adds dynamism to the timeline view for better visualization.
-
+The divided parts of a taskbar are referred to as **segments**. Tasks can be split at load time using [GanttSegmentFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSegmentFields-2.html), ensuring segments fit within the task's start and end dates. Dynamic splitting is supported via the dialog's Segments tab or the context menu's Split Task option, which requires valid [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) mappings.
+
+Merging can be done using the context menu's Merge Task option or by dragging segments together in the UI. To enable these actions, set the [EnableContextMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableContextMenu) property to **true**. Tasks must have sufficient width relative to the timeline unit and must not be parent or milestone tasks. Avoid using split tasks with multi-taskbar features to maintain compatibility.
## Binding segments data source
-In the Blazor Gantt chart, the [GanttSegmentFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSegmentFields-2.html) component plays a vital role in managing segmented tasks. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSegmentFields-2.html#Syncfusion_Blazor_Gantt_GanttSegmentFields_2_DataSource) property of `GanttSegmentFields` determines the segment data source collection. It is essential that this collection be structured in such a way that the [ForeignKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSegmentFields-2.html#Syncfusion_Blazor_Gantt_GanttSegmentFields_2_ForeignKey) property of `GanttSegmentFields` and the [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id) property value of [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) act as a foreign key relationship between the task collection [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DataSource) and the segment collection `DataSource`. Additionally, the start date, end date, and duration field mappings of the segment collection can be defined in `GanttSegmentFields`.
+In the Blazor Gantt Chart, the [GanttSegmentFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSegmentFields-2.html) component plays a vital role in managing segmented tasks. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSegmentFields-2.html#Syncfusion_Blazor_Gantt_GanttSegmentFields_2_DataSource) property of `GanttSegmentFields` defines the segment data source collection.
+This collection must be structured so that the [ForeignKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSegmentFields-2.html#Syncfusion_Blazor_Gantt_GanttSegmentFields_2_ForeignKey) property of `GanttSegmentFields` and the [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id) property of [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) form a foreign key relationship between the task collection `DataSource` and the segment collection `DataSource`.
+Additionally, the start date, end date, and duration field mappings of the segment collection can be defined using the corresponding properties in `GanttSegmentFields`.
-The below code snippet visualizes the task's segments in gantt chart.
+The following code snippet demonstrates how to visualize task segments in the Gantt Chart.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -118,15 +122,15 @@ The below code snippet visualizes the task's segments in gantt chart.
## Split and merge tasks dynamically
-In the Gantt Chart, you can enable dynamic splitting or merging of segments by setting the [AllowTaskbarEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowTaskbarEditing) and [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowEditing) properties to true in the [GanttEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html) component. Tasks or segments can be dynamically split into multiple segments, and also the existing segments can be merged together. Segments can be merged by simply dragging a segment of taskbar and dropping it over another segment of same task. Additionally, the split and merge actions can be performed in the Gantt Chart in the following three ways:
+In the Gantt Chart, dynamic splitting and merging of segments can be enabled by setting the [AllowTaskbarEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowTaskbarEditing) and [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowEditing) properties to true in the [GanttEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html) component. Tasks or segments can be dynamically split into multiple segments, and existing segments can be merged. Merging can be performed by dragging a segment and dropping it over another segment of the same task. Additionally, split and merge actions can be performed in the Gantt Chart using the following three methods:
### Through context menu
-To split and merge tasks using the context menu, set the [EnableContextMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableContextMenu) property to true in the `SfGantt` component. By using the context menu items, such as **Split Task** and **Merge Task** the taskbar can be split and merged respectively.
+To split and merge tasks using the context menu, set the [EnableContextMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableContextMenu) property to **true** in the `SfGantt` component. Once enabled, context menu items such as **Split Task** and **Merge Task** allow taskbars to be split and merged directly from the UI.
+
+Right-clicking on a taskbar or segment element in the Gantt Chart displays the context menu with the **Split Task** option. Selecting this option divides the taskbar or segment at the timeline cell where the right-click occurred.
-When you right-click on a taskbar or segment element in the Gantt chart, the context menu will display the **Split Task** option. Clicking on it will divide the taskbar or segment at the timeline cell where the right-click occurred.
-
-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.
+Segmented taskbars can be merged using the **Merge Task** context menu item. Its sub-menu includes **Right** and **Left** options. Selecting **Right** merges the current segment with the one to its right, while selecting **Left** merges it with the segment to its left.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -228,7 +232,7 @@ The segmented taskbars can be merged together using **Merge Task** context menu
### Through dialog box
-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.
+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 segments details such as the start date, end date, and duration. However, It is important to note that a segment's start and end dates must fall within the task's overall start and end dates..
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -335,9 +339,9 @@ In the segments tab of the [add/edit dialog](https://blazor.syncfusion.com/docum
### Through method
-You can split or merge taskbars externally by using the methods [SplitTaskAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SplitTaskAsync_System_Int32_System_Collections_Generic_List_System_DateTime__) and [MergeTaskAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_MergeTaskAsync_System_Int32_System_Collections_Generic_List_System_ValueTuple_System_Int32_System_Int32___) respectively. These methods provide a way to manipulate taskbars programmatically, allowing for efficient splitting and merging operations.
+Taskbars can be split or merged externally using the [SplitTaskAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SplitTaskAsync_System_Int32_System_Collections_Generic_List_System_DateTime__) and [MergeTaskAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_MergeTaskAsync_System_Int32_System_Collections_Generic_List_System_ValueTuple_System_Int32_System_Int32___) methods. These provide a programmatic way to perform efficient splitting and merging operations on taskbars.
-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.
+In the following code snippet, clicking an external button merges the segments of the taskbar at index 1 into a single segment and splits the taskbar at index 2 into two segments.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -455,8 +459,6 @@ In the following code snippet, upon external button click, segments of the 1st i
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXresXZYqLhJtdVC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
## Segment event
The [SegmentChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSegmentFields-2.html#Syncfusion_Blazor_Gantt_GanttSegmentFields_2_SegmentChanging) event is triggered in the Blazor Gantt chart when split and merge actions occur, or when there are changes in the scheduling dates of tasks. Using this event, any custom actions can be performed or even the split or merge action can be canceled by setting the [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SegmentEventArgs-1.html#Syncfusion_Blazor_Gantt_SegmentEventArgs_1_Cancel) property of the even argument to `true`.
@@ -590,7 +592,7 @@ In the below code snippet, using the `SegmentChanging` event a customized messag
## Segment customization with template
-The segments appearance can be customized by using the [TaskbarTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTemplates-1.html#Syncfusion_Blazor_Gantt_GanttTemplates_1_TaskbarTemplate) property. By passing the template context to the `GetRowTaskModel`, the collection of [Segments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.IGanttTaskModel-1.html#Syncfusion_Blazor_Gantt_IGanttTaskModel_1_Segments) are obtained which holds the details like left position, width, and progress width for each segment. The segments can be rendered at the required timeline position and dimensions within the template container using these details.
+In the Blazor Gantt Chart, the appearance of segments can be customized by using the [TaskbarTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTemplates-1.html#Syncfusion_Blazor_Gantt_GanttTemplates_1_TaskbarTemplate) property. By passing the template context to the `GetRowTaskModel`, the collection of [Segments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.IGanttTaskModel-1.html#Syncfusion_Blazor_Gantt_IGanttTaskModel_1_Segments) is obtained, which contains details like left position, width, and progress width for each segment. The segments can be rendered at the appropriate timeline position and dimensions within the template container using these details.
In the code snippet below, the segments are customized based on template context data, and the segment count text is added inside each segment.
@@ -747,4 +749,11 @@ In the code snippet below, the segments are customized based on template context
## Limitation
-* Parent and milestone tasks cannot be split into segments.
\ No newline at end of file
+1. Parent and milestone tasks cannot be split into segments.
+2. The task must have a width greater than the timeline unit cell in order to be split.
+3. Split task is not supported with `Multi taskbar`.
+
+## See also
+- [How to bind data in Gantt?](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding)
+- [How to configure task editing?](https://blazor.syncfusion.com/documentation/gantt-chart/editing-tasks)
+- [How to manage task dependencies?](https://blazor.syncfusion.com/documentation/gantt-chart/task-dependencies)
diff --git a/blazor/visual-studio-code-integration/upgrade-project.md b/blazor/visual-studio-code-integration/upgrade-project.md
index b081715e76..70af54c052 100644
--- a/blazor/visual-studio-code-integration/upgrade-project.md
+++ b/blazor/visual-studio-code-integration/upgrade-project.md
@@ -1,36 +1,36 @@
---
layout: post
-title: Upgrade a project to the latest version | Syncfusion
-description: Learn here about how to upgrade the project to the latest version using the Syncfusion Blazor extension for Visual Studio Code. Explore to more details
+title: Upgrade Project to Latest Version in Blazor | Syncfusion
+description: Learn here about how to upgrade the project to the latest version using the Syncfusion Blazor extension for Visual Studio Code. Explore to more details.
platform: Blazor
-control: Common
+component: Common
documentation: ug
---
-# Upgrading Syncfusion® Blazor application
+# Upgrading Syncfusion® Blazor application to updated version
-The Syncfusion® Blazor migration add-in for Visual Studio Code enables upgrading an existing Syncfusion® Blazor web application from one Essential Studio® version to another.
+The Syncfusion® Blazor Migration is an add-in for Visual Studio Code allows you to migrate an existing Syncfusion® Blazor Web Application from one Essential Studio® version to another.
-N> The Syncfusion Blazor Web Application project migration utility is available from version `v17.4.0.39`.
+ N> The Syncfusion® Blazor Web Application Project Migration utility is available from `v17.4.0.39`.
-Use the following steps to migrate an existing Syncfusion® Blazor Web Application.
+The steps below assist you to migrating existing Syncfusion® Blazor Web Application.
-1. In Visual Studio Code, open an existing Syncfusion® Blazor Web Application or create a new one.
+1. Open an existing Syncfusion® Blazor Web Application or create a new Syncfusion® Blazor Web Application in Visual Studio Code.
-2. In Explorer (Workspace), right-click the project file and select **Migrate Syncfusion® Blazor Application to another version...** from the context menu. Refer to the screenshot below.
+2. Select **Migrate Syncfusion® Blazor Application to another version...** from the context menu when you right-click on the **Project file** from Explorer (Workspace). Refer to the screenshot below.
- 
+ 
- N> The Migration option is available only when the application already references Syncfusion® Blazor packages.
+ N> If you have a Syncfusion® Blazor reference in your application, the Migration option will be enabled.
-3. From the Command Palette, choose **Select Blazor Version** and pick the required Syncfusion® Blazor package version published on `nuget.org`.
+3. **Select Blazor Version** (which published in `nuget.org`) from the palette appears.
- 
+ 
-4. The Syncfusion® Blazor NuGet package references and theme links are updated to the selected version in the application.
+4. The Syncfusion® NuGet packages references and themes are updated to the selected version in the application.
- 
+ 
- 
+ 
5. If you installed the trial setup or NuGet packages from nuget.org you must register the Syncfusion® license key to your application since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key to your application. Refer to this [UG](https://blazor.syncfusion.com/documentation/getting-started/license-key/overview) topic for understanding the licensing details in Essential Studio® for Blazor.
\ No newline at end of file