From 3f198275d97dd8f21ca0161b7de00827e58f4a8c Mon Sep 17 00:00:00 2001 From: DineshVinayagam Date: Mon, 16 Sep 2024 19:10:59 +0530 Subject: [PATCH 1/7] 909736: Improve Blazor Gantt UG Documentation Content. --- .../getting-started-with-web-app.md | 47 +++++++------------ 1 file changed, 17 insertions(+), 30 deletions(-) diff --git a/blazor/gantt-chart/getting-started-with-web-app.md b/blazor/gantt-chart/getting-started-with-web-app.md index 7134b2812e..362e8bb7b1 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,11 @@ 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`, `Name`, `StartDate`, `EndDate`, `Duration`, and `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. +The Gantt Chart component binds data by mapping the `ID` field, which contains unique values for each task, to the Id property, and the ParentId property, which mapped to the `ParentID` Field. The `ParentId` property should match the Id of the parent task, establishing the hierarchical relationship between tasks. For additional information, refer to [this](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#self-referential--flat-data-binding). {% tabs %} {% highlight razor %} @@ -202,12 +187,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 +246,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 From 11f5ab5088567c3386cc02cb1e941e37e650c3c8 Mon Sep 17 00:00:00 2001 From: DineshVinayagam Date: Tue, 17 Sep 2024 17:19:37 +0530 Subject: [PATCH 2/7] 909736: Updated the PR review corrections. --- blazor/gantt-chart/getting-started-with-web-app.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/gantt-chart/getting-started-with-web-app.md b/blazor/gantt-chart/getting-started-with-web-app.md index 362e8bb7b1..ebfe21f280 100644 --- a/blazor/gantt-chart/getting-started-with-web-app.md +++ b/blazor/gantt-chart/getting-started-with-web-app.md @@ -141,9 +141,9 @@ Add the Syncfusion Blazor Gantt Chart component in `.razor` file inside the `Pag ## 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`, `Name`, `StartDate`, `EndDate`, `Duration`, and `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. +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 Gantt Chart component binds data by mapping the `ID` field, which contains unique values for each task, to the Id property, and the ParentId property, which mapped to the `ParentID` Field. The `ParentId` property should match the Id of the parent task, establishing the hierarchical relationship between tasks. For additional information, refer to [this](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#self-referential--flat-data-binding). +The Gantt Chart component binds data by mapping the [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id) field, which contains unique values for each task, to the `TaskId` property. The `ParentId` property is mapped to the [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_ParentID) field. This mapping establishes the hierarchical relationship between tasks, where child tasks reference their parent task through the `ParentID`. For additional information, refer to [this](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#self-referential--flat-data-binding). {% tabs %} {% highlight razor %} From b4e22f00fd2506f69ea883056f8fe20f4752ec7d Mon Sep 17 00:00:00 2001 From: DineshVinayagam Date: Tue, 17 Sep 2024 17:36:46 +0530 Subject: [PATCH 3/7] 909736: Resolved the review corrections. --- blazor/gantt-chart/getting-started-with-web-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/gantt-chart/getting-started-with-web-app.md b/blazor/gantt-chart/getting-started-with-web-app.md index ebfe21f280..b05590f8ef 100644 --- a/blazor/gantt-chart/getting-started-with-web-app.md +++ b/blazor/gantt-chart/getting-started-with-web-app.md @@ -143,7 +143,7 @@ Add the Syncfusion Blazor Gantt Chart component in `.razor` file inside the `Pag 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 Gantt Chart component binds data by mapping the [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id) field, which contains unique values for each task, to the `TaskId` property. The `ParentId` property is mapped to the [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_ParentID) field. This mapping establishes the hierarchical relationship between tasks, where child tasks reference their parent task through the `ParentID`. For additional information, refer to [this](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#self-referential--flat-data-binding). +The Gantt Chart component binds data by mapping the `Id` field, which contains unique values for each task, to the `TaskId` property. The `ParentId` property is mapped to the `ParentID` field. This mapping establishes the hierarchical relationship between tasks, where child tasks reference their parent task through the `ParentID`. For additional information, refer to [this](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#self-referential--flat-data-binding). {% tabs %} {% highlight razor %} From f5294515b0a5aa3da94deb8e568ada8743073bf1 Mon Sep 17 00:00:00 2001 From: DineshVinayagam Date: Tue, 17 Sep 2024 19:38:27 +0530 Subject: [PATCH 4/7] 909736: Updated the Code review corrections. --- blazor/gantt-chart/data-binding.md | 6 +++--- blazor/gantt-chart/getting-started-with-web-app.md | 6 ++++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/blazor/gantt-chart/data-binding.md b/blazor/gantt-chart/data-binding.md index e75ae0bc56..ca25502aa7 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 can be bound with self-referential data by mapping the data source field values to the [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id) and [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_ParentID) properties. -* 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: The `Id` field contains unique values for each task and is mapped to the __TaskId__ property in the Gantt Chart component. +* ParentID field: The `ParentID` field specifies the parent task for each task and is mapped to the __ParentId__ property. Each child task uses the __ParentId__ to reference its parent task, creating a hierarchical structure where the __ParentId__ of a child task matches the __TaskId__ of its parent task. ```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 b05590f8ef..c0de7853a2 100644 --- a/blazor/gantt-chart/getting-started-with-web-app.md +++ b/blazor/gantt-chart/getting-started-with-web-app.md @@ -141,9 +141,11 @@ Add the Syncfusion Blazor Gantt Chart component in `.razor` file inside the `Pag ## 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. +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. -The Gantt Chart component binds data by mapping the `Id` field, which contains unique values for each task, to the `TaskId` property. The `ParentId` property is mapped to the `ParentID` field. This mapping establishes the hierarchical relationship between tasks, where child tasks reference their parent task through the `ParentID`. For additional information, refer to [this](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#self-referential--flat-data-binding). +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. + +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 %} From 30cbf506dac6adb8c6cad0a4e69098b0ae8cb8e8 Mon Sep 17 00:00:00 2001 From: DineshVinayagam Date: Wed, 18 Sep 2024 10:34:27 +0530 Subject: [PATCH 5/7] 910690: Improve the Getting Started Section in Blazor Gantt UG Documentation. --- blazor/gantt-chart/data-binding.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/blazor/gantt-chart/data-binding.md b/blazor/gantt-chart/data-binding.md index ca25502aa7..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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id) and [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_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: The `Id` field contains unique values for each task and is mapped to the __TaskId__ property in the Gantt Chart component. -* ParentID field: The `ParentID` field specifies the parent task for each task and is mapped to the __ParentId__ property. Each child task uses the __ParentId__ to reference its parent task, creating a hierarchical structure where the __ParentId__ of a child task matches the __TaskId__ of its parent task. +* **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 From 1f36ae877e565e6fe8358be94d3b305850da0e91 Mon Sep 17 00:00:00 2001 From: DineshVinayagam Date: Wed, 18 Sep 2024 16:44:21 +0530 Subject: [PATCH 6/7] 910690: Improve the Getting Started Section in Blazor Gantt UG Documentation. --- .../getting-started-with-web-app.md | 4 +- blazor/gantt-chart/getting-started.md | 50 +++++++------------ 2 files changed, 21 insertions(+), 33 deletions(-) diff --git a/blazor/gantt-chart/getting-started-with-web-app.md b/blazor/gantt-chart/getting-started-with-web-app.md index c0de7853a2..9fc71fa6d2 100644 --- a/blazor/gantt-chart/getting-started-with-web-app.md +++ b/blazor/gantt-chart/getting-started-with-web-app.md @@ -195,8 +195,8 @@ Gantt Chart has an option to define columns as an array. You can manage the orde * [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. +* [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 %} diff --git a/blazor/gantt-chart/getting-started.md b/blazor/gantt-chart/getting-started.md index 58e1734ed7..04df4e40d6 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 From 3f62605cf036936f41d4f5f0aa3938b178b96373 Mon Sep 17 00:00:00 2001 From: DineshVinayagam Date: Wed, 18 Sep 2024 17:00:10 +0530 Subject: [PATCH 7/7] 910690: Improve the Getting Started Section in Blazor Gantt UG Documentation. --- blazor/gantt-chart/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/gantt-chart/getting-started.md b/blazor/gantt-chart/getting-started.md index 04df4e40d6..cc318efa48 100644 --- a/blazor/gantt-chart/getting-started.md +++ b/blazor/gantt-chart/getting-started.md @@ -465,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.