Skip to content

910690: Improve the Getting Started Section in Blazor Gantt UG Documentation. #4858

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Sep 19, 2024
Merged

910690: Improve the Getting Started Section in Blazor Gantt UG Documentation. #4858

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3f19827
909736: Improve Blazor Gantt UG Documentation Content.
DineshVinayagam Sep 16, 2024
11f5ab5
909736: Updated the PR review corrections.
DineshVinayagam Sep 17, 2024
b4e22f0
909736: Resolved the review corrections.
DineshVinayagam Sep 17, 2024
f529451
909736: Updated the Code review corrections.
DineshVinayagam Sep 17, 2024
30cbf50
910690: Improve the Getting Started Section in Blazor Gantt UG Docume…
DineshVinayagam Sep 18, 2024
1f36ae8
910690: Improve the Getting Started Section in Blazor Gantt UG Docume…
DineshVinayagam Sep 18, 2024
3f62605
910690: Improve the Getting Started Section in Blazor Gantt UG Docume…
DineshVinayagam Sep 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions blazor/gantt-chart/data-binding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
49 changes: 19 additions & 30 deletions blazor/gantt-chart/getting-started-with-web-app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,33 +95,16 @@ Add the Syncfusion Blazor Gantt Chart component in `.razor` file inside the `Pag
{% tabs %}
{% highlight razor %}

<SfGantt TValue="TaskData">
</SfGantt>

@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 %}

<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId">
</GanttTaskFields>
<GanttColumns>
<GanttColumn Field="TaskId" HeaderText="Task ID"></GanttColumn>
<GanttColumn Field="TaskName" HeaderText="Task Name"></GanttColumn>
<GanttColumn Field="StartDate" HeaderText="Start Date"></GanttColumn>
<GanttColumn Field="Duration" HeaderText="Duration"></GanttColumn>
<GanttColumn Field="Progress" HeaderText="Progress"></GanttColumn>
</GanttColumns>
</SfGantt>

@code{
Expand Down Expand Up @@ -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 %}
Expand Down Expand Up @@ -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 %}
Expand Down Expand Up @@ -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

Expand Down
52 changes: 20 additions & 32 deletions blazor/gantt-chart/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,33 +112,16 @@ Add the Syncfusion Blazor Gantt Chart component in the **~/Pages/Index.razor** f
{% tabs %}
{% highlight razor %}

<SfGantt TValue="TaskData">
</SfGantt>

@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 %}

<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId">
</GanttTaskFields>
<GanttColumns>
<GanttColumn Field="TaskId" HeaderText="Task ID"></GanttColumn>
<GanttColumn Field="TaskName" HeaderText="Task Name"></GanttColumn>
<GanttColumn Field="StartDate" HeaderText="Start Date"></GanttColumn>
<GanttColumn Field="Duration" HeaderText="Duration"></GanttColumn>
<GanttColumn Field="Progress" HeaderText="Progress"></GanttColumn>
</GanttColumns>
</SfGantt>

@code{
Expand Down Expand Up @@ -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 %}
Expand Down Expand Up @@ -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 %}
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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.

Expand Down