1007166: Modified Blazor Gantt UG Documentation Part-2

blazor-toc.html

@@ -3140,9 +3140,6 @@
 						<li> <a href="/blazor/gantt-chart/custom-binding">Custom Binding</a></li>
 				</ul>
 			</li>
-			<li>
-				<a href="/blazor/gantt-chart/resource-allocation">Resource Allocation</a>
-			</li>
 			<li>
 				<a href="/blazor/gantt-chart/performance">Performance Best Practices</a>
 			</li>

blazor/gantt-chart/adding-new-tasks.md

@@ -20,7 +20,7 @@ Enable task addition through the toolbar by setting [EditSettings.AllowAdding](h
 
 @using Syncfusion.Blazor.Gantt
 <SfGantt DataSource="@TaskCollection" Toolbar="@(new List<string>() { "Add" })" Height="450px" Width="900px">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
+    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId">
     </GanttTaskFields>
     <GanttEditSettings AllowAdding="true"></GanttEditSettings>
 </SfGantt>
@@ -41,7 +41,7 @@ Enable task addition through the toolbar by setting [EditSettings.AllowAdding](h
         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<TaskData> GetTaskCollection()
@@ -66,7 +66,7 @@ Enable task addition through the toolbar by setting [EditSettings.AllowAdding](h
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hZLIjkMxqOcLSDUD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-> **Note**: A unique `TaskID` is required to avoid silent failures. Use the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_OnActionFailure) event to handle errors like invalid input or duplicate IDs.
+> **Note**: A unique `TaskID` is required to avoid silent failures. Use the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_OnActionFailure) event to handle errors like invalid input or duplicate IDs.
 
 ## Adding tasks via context menu
 
@@ -77,7 +77,7 @@ Enable context menu task addition by setting [EnableContextMenu](https://help.sy
 
 @using Syncfusion.Blazor.Gantt
 <SfGantt DataSource="@TaskCollection" Height="450px" EnableContextMenu="true" Width="900px" HighlightWeekends="true">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" Dependency="Predecessor" ParentID="ParentID"></GanttTaskFields>
+    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" Dependency="Predecessor" ParentID="ParentId"></GanttTaskFields>
     <GanttEditSettings AllowAdding="true"></GanttEditSettings>
 </SfGantt>
 
@@ -98,7 +98,7 @@ Enable context menu task addition by setting [EnableContextMenu](https://help.sy
         public string Duration { get; set; }
         public int Progress { get; set; }
         public string Predecessor { get; set; }
-        public int? ParentID { get; set; }
+        public int? ParentId { get; set; }
     }
 
     public static List<TaskData> GetTaskCollection()
@@ -127,7 +127,7 @@ Enable context menu task addition by setting [EnableContextMenu](https://help.sy
 
 ## Adding tasks programmatically
 
-Tasks can be added programmatically using the [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AddRecordAsync__0_System_Nullable_System_Double__System_Nullable_Syncfusion_Blazor_Gantt_RowPosition__) method, specifying the task’s position with the [RowPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.RowPosition.html) enum (**Top**, **Bottom**, **Above**, **Below**, or **Child**) and an optional `RowIndex`. The task data must include a unique `TaskID`. For example, adding a task as a child creates a subtask under a parent row, updating the project hierarchy. Verify dependencies to avoid issues like circular references.
+Tasks can be added programmatically using the [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AddRecordAsync__0_System_Nullable_System_Int32__System_Nullable_Syncfusion_Blazor_Gantt_RowPosition__System_Object_) method, specifying the task’s position with the [RowPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.RowPosition.html) enum (**Top**, **Bottom**, **Above**, **Below**, or **Child**) and an optional `RowIndex`. The task data must include a unique `TaskID`. For example, adding a task as a child creates a subtask under a parent row, updating the project hierarchy. Verify dependencies to avoid issues like circular references.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -136,7 +136,7 @@ Tasks can be added programmatically using the [AddRecordAsync](https://help.sync
 @using Syncfusion.Blazor.Buttons
 <SfButton @onclick="AddRow">Add Row</SfButton>
 <SfGantt @ref="Gantt" DataSource="@TaskCollection" Height="450px" Width="900px">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
+    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId">
     </GanttTaskFields>
     <GanttEditSettings AllowAdding="true"></GanttEditSettings>
 </SfGantt>
@@ -165,7 +165,7 @@ Tasks can be added programmatically using the [AddRecordAsync](https://help.sync
         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<TaskData> GetTaskCollection()

blazor/gantt-chart/column-chooser.md

@@ -390,14 +390,14 @@ public class DataModel
 
 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 string Predecessor { get; set; }
-    public int? ParentId { get; set; }
+    public int? ParentID { get; set; }
     public bool IsExpanded { get; set; }
     public string Done { get; set; }
     public bool IsMilestone { get; set; }

blazor/gantt-chart/column-reordering.md

@@ -11,7 +11,7 @@ documentation: ug
 
 The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt Chart component supports column reordering by dragging a column header to a new position. 
 
-To enable column reordering, set the [GanttColumn.AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowReordering) property to **true** in the Gantt configuration.
+To enable column reordering, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowReordering) property to **true** in the Gantt configuration.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -63,7 +63,7 @@ To enable column reordering, set the [GanttColumn.AllowReordering](https://help.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rXBoNaBoLtfvtQLH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-> You can disable the reordering of a particular column by setting the `GanttColumn.AllowReordering` property to **false**.
+> You can disable the reordering of a particular column by setting the [GanttColumn.AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_AllowReordering) property to **false**.
 
 ## Reorder columns programmatically
 
@@ -109,9 +109,9 @@ The following demonstrates how to reorder columns by placing **Progress** before
         await this.GanttInstance.ReorderColumnsAsync(new List<string>() { "Duration" }, "Progress");
     }
 
-    public void ReorderColumn()
+    public async Task ReorderColumn()
     {
-        this.GanttInstance.ReorderColumnsAsync(new List<string>(){"TaskName", "StartDate"},"Duration");
+        await GanttInstance.ReorderColumnsAsync(new List<string>(){"TaskName", "StartDate"},"Duration");
     }
 
     public static List<TaskData> GetTaskCollection()

blazor/gantt-chart/column-resizing.md

@@ -11,7 +11,7 @@ documentation: ug
 
 The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt Chart component allows you to resize columns dynamically by dragging the edges of column headers. This feature enhances readability and layout flexibility, especially when working with large datasets. To enable this feature, set the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowResizing) property to **true** in the Gantt configuration. 
 
-Column width can be adjusted by dragging the right edge of the header, with changes applied immediately.   
+Column width can be adjusted by dragging the right edge of the header, changes are applied immediately. 
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -64,7 +64,7 @@ Column width can be adjusted by dragging the right edge of the header, with chan
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BtrojaByrMWhLdCJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 >* In RTL mode, you can click and drag the left edge of header cell to resize the column.
->* The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Width) property of the column can be set initially to define the default width of the column. However, when column resizing is enabled, you can override the default width by manually resizing the columns.
+>* The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Width) property of the column can be set initially to define the default width of the column. However, when column resizing is enabled, you can override the default width by manually resizing the columns.
 
 ## Restrict the resizing based on minimum and maximum width
 

blazor/gantt-chart/column-template.md

@@ -7,15 +7,15 @@ control: Gantt Chart
 documentation: ug
 ---
 
-# Column template in Blazor Gantt Chart component
+# Column Template in Blazor Gantt Chart component
 
 The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt Chart component supports column templates, allowing custom content to be displayed in a column instead of the default field value. You can render custom components or HTML elements using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Template) property to include elements such as images, buttons, or other UI controls within a column.
 
 > When using template columns, they are primarily meant for rendering custom content and may not provide built-in support for gantt actions like sorting, filtering, editing unless [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Field) property of the column is specified.
 
 ## Render Button in a column
 
-You can render the Syncfusion<sup style="font-size:70%">&reg;</sup> [Button](https://blazor.syncfusion.com/documentation/button/getting-started-with-web-app) component inside a Gantt column by using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Template) property.. 
+You can render the Syncfusion<sup style="font-size:70%">&reg;</sup> [Button](https://blazor.syncfusion.com/documentation/button/getting-started-with-web-app) component inside a Gantt column by using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Template) property.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}

blazor/gantt-chart/columns.md

@@ -11,7 +11,7 @@ documentation: ug
 
 The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt Chart component displays task data in a tabular format using columns. Columns organize task data efficiently and enable user interactions such as sorting, filtering, and formatting within the Gantt chart.
 
-Each column is defined using the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property, which maps values from the data source. This mapping ensures accurate data binding and enables formatting and customization for each column.
+Each column is defined using the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Field) property, which maps values from the data source. This mapping ensures accurate data binding and enables formatting and customization for each column.
 
 > If the column `Field` is not specified in the data source, the column values will be empty.
 
@@ -234,7 +234,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Gantt Chart component for B
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rXVICZWpUlnjXERR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 >* The Gantt uses the `Internalization` library to format values based on the specified format and culture.
->* By default, the number and date values are formatted in **en-US** locale. You can localize the currency and date in different locale as explained [here](https://www.syncfusion.com/blazor-components/blazor-gantt-chart).
+>* By default, the number and date values are formatted in **en-US** locale. You can localize the currency and date to a different locale as explained [here](https://www.syncfusion.com/blazor-components/blazor-gantt-chart).
 >* The available format codes may vary depending on the data type of the column.
 >* You can also customize the formatting further by providing a custom function to the `GanttColumn.Format` property, instead of a format string.
 >* Make sure that the format string is valid and compatible with the data type of the column, to avoid unexpected results.
@@ -454,7 +454,7 @@ The Syncfusion<sup style="font-size:70%">®</sup> Gantt component for Blazor sup
 
 ### Resizing a column to fit its content using method
 
-You can resize a column in Gantt Chart to fit its content using the [AutoFitColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AutoFitColumnsAsync) method. This adjusts the column width based on the widest cell without wrapping. To apply this during initial rendering, call the method in the [DataBound](https://blazor.syncfusion.com/documentation/gantt-chart/events#databound) event.
+You can resize a column in Gantt Chart to fit its content using the [AutoFitColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AutoFitColumnsAsync_System_String___) method. This adjusts the column width based on the widest cell without wrapping. To apply this during initial rendering, call the method in the [DataBound](https://blazor.syncfusion.com/documentation/gantt-chart/events#databound) event.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -531,7 +531,7 @@ You can resize a column in Gantt Chart to fit its content using the [AutoFitColu
 
 ## Change tree column
 
-The Syncfusion<sup style="font-size:70%">®</sup> Blazor Gantt Chart component displays hierarchical task relationships using expand/collapse icons. These icons help users navigate parent and child tasks efficiently. To configure their position, set the `treeColumnIndex` property to the index of the column where the icons should appear. By default, the value is **0**, which places them in the first column.
+The Syncfusion<sup style="font-size:70%">®</sup> Blazor Gantt Chart component displays hierarchical task relationships using expand/collapse icons. These icons help users navigate parent and child tasks efficiently. To configure their position, set the [TreeColumnIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_TreeColumnIndex) property to the index of the column where the icons should appear. By default, the value is **0**, which places them in the first column.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -625,12 +625,12 @@ The following example demonstrates hiding and showing the **Duration** column us
     private List<TaskData> TaskCollection { get; set; }
     private string[] ColumnList = {"Duration"};
 
-    public void show() {
-        this.Gantt.ShowColumnsAsync(ColumnList, "HeaderText");
+    public async Task show() {
+        await Gantt.ShowColumnsAsync(ColumnList, "HeaderText");
     }
 
-    public void hide() {
-        this.Gantt.HideColumnsAsync(ColumnList, "HeaderText");
+    public async Task hide() {
+        await Gantt.HideColumnsAsync(ColumnList, "HeaderText");
     }
 
     protected override void OnInitialized()
@@ -829,7 +829,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt Chart componen
 
 ## Responsive columns
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup>  Blazor Gantt Chart component provides a built-in feature to control column visibility based on media queries using the `HideAtMedia` property in the column object. This method can be used to hide columns automatically when the screen width matches specified [media query](http://cssmediaqueries.com/what-are-css-media-queries.html) conditions.
+The Syncfusion<sup style="font-size:70%">&reg;</sup>  Blazor Gantt Chart component provides a built-in feature to control column visibility based on media queries using the [HideAtMedia](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_HideAtMedia) property in the column object. This method can be used to hide columns automatically when the screen width matches specified [media query](http://cssmediaqueries.com/what-are-css-media-queries.html) conditions.
 
 The following example demonstrates a Gantt chart where the **Job Name** column is set to `(min-width: 700px)`, meaning it will be hidden when the browser width is less than or equal to 700px. Similarly, the **Duration** column is set to `(max-width: 500px)`, so it will be hidden when the browser width exceeds 500px.