diff --git a/blazor/gantt-chart/data-binding.md b/blazor/gantt-chart/data-binding.md
index e75ae0bc56..69777f92b1 100644
--- a/blazor/gantt-chart/data-binding.md
+++ b/blazor/gantt-chart/data-binding.md
@@ -67,10 +67,10 @@ N> * Indent/Outdent is not supported for Hierarchy Data.
### Self-Referential / Flat Data Binding
-The Gantt Chart component can be bound with self-referential data by mapping the data source field values to the `Id` and `ParentID` properties.
+The Gantt Chart component uses a self-referential data binding model to represent hierarchical tasks, in which two key fields from your data source has to be mapped to the [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id) field and the [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_ParentID) field of [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html). Together, these two fields define the parent-child relationship between tasks.
-* ID field: This field contains unique values used to identify each individual task and it is mapped to the `Id` property.
-* Parent ID field: This field contains values that indicate parent tasks and it is mapped to the `ParentID` property.
+* **Id field**: A field in each data object of the data source that uniquely identifies the task. This field name is mapped to the `Id` property of `GanttTaskFields`.
+* **ParentID field**: A field in each data object of the data source that contains a value corresponding to the **Id Field** to establish a parent-child relationship between tasks. This field name is mapped to the `ParentID` property of `GanttTaskFields`.
```cshtml
@using Syncfusion.Blazor.Gantt
diff --git a/blazor/gantt-chart/getting-started-with-web-app.md b/blazor/gantt-chart/getting-started-with-web-app.md
index 7134b2812e..9fc71fa6d2 100644
--- a/blazor/gantt-chart/getting-started-with-web-app.md
+++ b/blazor/gantt-chart/getting-started-with-web-app.md
@@ -95,33 +95,16 @@ Add the Syncfusion Blazor Gantt Chart component in `.razor` file inside the `Pag
{% tabs %}
{% highlight razor %}
-
-
-
-@code{
- 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 %}
-
-## Binding Blazor Gantt Chart with Data
-
-Bind data with the Gantt Chart component by using the `DataSource` property. It accepts the list objects or the DataManager instance.
-
-{% tabs %}
-{% highlight razor %}
-
+
+
+
+
+
+
+
+
+
@code{
@@ -156,9 +139,13 @@ Bind data with the Gantt Chart component by using the `DataSource` property. It
{% endhighlight %}
{% endtabs %}
-## Mapping task fields
+## Binding Gantt Chart with Data and Mapping Task Fields
+
+Bind data with the Gantt Chart component by using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DataSource) property. It accepts the list objects or the DataManager instance.
+
+Additionally, task-related fields from the data source are mapped to the Gantt Chart component using the [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) property. This property ensures that the necessary task fields, such as [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id), [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Name), [StartDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_StartDate), [EndDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_EndDate), [Duration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Duration), and [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_ParentID) are properly linked to the corresponding data source fields, allowing the Gantt Chart to render tasks accurately. The columns in the Gantt Chart are automatically rendered based on the properties specified in `GanttTaskFields`, ensuring that the necessary columns are displayed to represent the task data.
-The data source fields that are required to render the tasks are mapped to the Gantt Chart component using the [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) property.
+This following sample shows self-referential data binding in the Gantt Chart by mapping the data source fields to the `Id` and `ParentID` properties. For more detailed information, refer to the [documentation](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#self-referential--flat-data-binding).
{% tabs %}
{% highlight razor %}
@@ -202,12 +189,14 @@ The data source fields that are required to render the tasks are mapped to the G
## Defining columns
-Gantt Chart has an option to define columns as an array. You can customize the Gantt Chart columns using the following properties:
+Gantt Chart has an option to define columns as an array. You can manage the order and customize the Gantt Chart columns using the following properties:
* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Field): Maps the data source fields to the columns.
* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_HeaderText): Changes the title of columns.
* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_TextAlign): Changes the alignment of columns. By default, columns will be left aligned. To change the columns to right align, set `TextAlign` to right.
* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Format): Formats the number and date values to standard or custom formats. Here, it is defined for the conversion of numeric values to currency.
+* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Visible): Show or hide a particular column. By default, columns are visible. Set this property to **false** to hide the column or **true** to make it visible.
+* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Width): To specify the width of the column, which can be defined in **pixels** or as a **percentage** of the total column width.
{% tabs %}
{% highlight razor %}
@@ -259,7 +248,7 @@ Gantt Chart has an option to define columns as an array. You can customize the G
{% endhighlight %}
{% endtabs %}
-For further details regarding Columns, refer [here](https://blazor.syncfusion.com/documentation/gantt-chart/columns).
+For further details regarding columns, refer [here](https://blazor.syncfusion.com/documentation/gantt-chart/columns).
## Enable editing
diff --git a/blazor/gantt-chart/getting-started.md b/blazor/gantt-chart/getting-started.md
index 58e1734ed7..cc318efa48 100644
--- a/blazor/gantt-chart/getting-started.md
+++ b/blazor/gantt-chart/getting-started.md
@@ -112,33 +112,16 @@ Add the Syncfusion Blazor Gantt Chart component in the **~/Pages/Index.razor** f
{% tabs %}
{% highlight razor %}
-
-
-
-@code{
- 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 %}
-
-## Binding Blazor Gantt Chart with Data
-
-Bind data with the Gantt Chart component by using the `DataSource` property. It accepts the list objects or the DataManager instance.
-
-{% tabs %}
-{% highlight razor %}
-
+
+
+
+
+
+
+
+
+
@code{
@@ -169,13 +152,16 @@ Bind data with the Gantt Chart component by using the `DataSource` property. It
return Tasks;
}
}
-
{% endhighlight %}
{% endtabs %}
-## Mapping task fields
+## Binding Gantt Chart with Data and Mapping Task Fields
+
+Bind data with the Gantt Chart component by using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DataSource) property. It accepts the list objects or the DataManager instance.
+
+Additionally, task-related fields from the data source are mapped to the Gantt Chart component using the [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) property. This property ensures that the necessary task fields, such as [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id), [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Name), [StartDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_StartDate), [EndDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_EndDate), [Duration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Duration), and [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_ParentID) are properly linked to the corresponding data source fields, allowing the Gantt Chart to render tasks accurately. The columns in the Gantt Chart are automatically rendered based on the properties specified in `GanttTaskFields`, ensuring that the necessary columns are displayed to represent the task data.
-The data source fields that are required to render the tasks are mapped to the Gantt Chart component using the [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) property.
+This following sample shows self-referential data binding in the Gantt Chart by mapping the data source fields to the `Id` and `ParentID` properties. For more detailed information, refer to the [documentation](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#self-referential--flat-data-binding).
{% tabs %}
{% highlight razor %}
@@ -219,12 +205,14 @@ The data source fields that are required to render the tasks are mapped to the G
## Defining columns
-Gantt Chart has an option to define columns as an array. You can customize the Gantt Chart columns using the following properties:
+Gantt Chart has an option to define columns as an array. You can manage the order and customize the Gantt Chart columns using the following properties:
* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Field): Maps the data source fields to the columns.
* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_HeaderText): Changes the title of columns.
* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_TextAlign): Changes the alignment of columns. By default, columns will be left aligned. To change the columns to right align, set `TextAlign` to right.
* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Format): Formats the number and date values to standard or custom formats. Here, it is defined for the conversion of numeric values to currency.
+* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Visible): Show or hide a particular column. By default, columns are visible. Set this property to **false** to hide the column or **true** to make it visible.
+* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Width): To specify the width of the column, which can be defined in **pixels** or as a **percentage** of the total column width.
{% tabs %}
{% highlight razor %}
@@ -276,7 +264,7 @@ Gantt Chart has an option to define columns as an array. You can customize the G
{% endhighlight %}
{% endtabs %}
-For further details regarding Columns, refer [here](https://blazor.syncfusion.com/documentation/gantt-chart/columns).
+For further details regarding columns, refer [here](https://blazor.syncfusion.com/documentation/gantt-chart/columns).
## Enable editing
@@ -477,7 +465,7 @@ You can find the full information regarding Predecessors from [here](https://bla
## Handling exceptions
Exceptions that occur during Gantt actions can be handled without stopping the application. These error messages or exception details can be acquired using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_OnActionFailure) event.
-The argument passed to the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_OnActionFailure)event contains the error details returned from the server.
+The argument passed to the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_OnActionFailure) event contains the error details returned from the server.
N> We recommend you bind the `OnActionFailure` event during your application development phase, this helps you to find any exceptions. You can pass these exception details to our support team to get a solution as early as possible.