diff --git a/blazor/accumulation-chart/annotation.md b/blazor/accumulation-chart/annotation.md index 3b1b9f2583..3d5e8fab7f 100644 --- a/blazor/accumulation-chart/annotation.md +++ b/blazor/accumulation-chart/annotation.md @@ -152,6 +152,6 @@ N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/bla ## See also -* [Data Label](./data-labels) +* [Data Label](./data-label) * [Tooltip](./tool-tip) * [Legend](./legend) \ No newline at end of file diff --git a/blazor/accumulation-chart/chart-print.md b/blazor/accumulation-chart/chart-print.md index 74e2e87fab..41d5736d9a 100644 --- a/blazor/accumulation-chart/chart-print.md +++ b/blazor/accumulation-chart/chart-print.md @@ -242,6 +242,6 @@ N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/bla ## See also -* [Data Label](./data-labels) +* [Data Label](./data-label) * [Tooltip](./tool-tip) * [Legend](./legend) \ No newline at end of file diff --git a/blazor/accumulation-chart/grouping.md b/blazor/accumulation-chart/grouping.md index 38036d3108..a600d07bda 100644 --- a/blazor/accumulation-chart/grouping.md +++ b/blazor/accumulation-chart/grouping.md @@ -168,6 +168,6 @@ The points that have been grouped together will appear as a single slice with th N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data. -* [Data Label](./data-labels) +* [Data Label](./data-label) * [Tooltip](./tool-tip) * [Legend](./legend) \ No newline at end of file diff --git a/blazor/chart/accessibility.md b/blazor/chart/accessibility.md index 8e7fb93972..c7b54f88ca 100644 --- a/blazor/chart/accessibility.md +++ b/blazor/chart/accessibility.md @@ -92,5 +92,5 @@ The accessibility compliance of the Blazor Chart component is shown in the follo * [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) -* [Accessibility Customization in Syncfusion® Blazor components](./advanced-accessibility-configuration.md) +* [Accessibility Customization in Syncfusion® Blazor components](./advanced-accessibility-configuration) diff --git a/blazor/datagrid/column-rendering.md b/blazor/datagrid/column-rendering.md index e48c0e7fef..693c2207c0 100644 --- a/blazor/datagrid/column-rendering.md +++ b/blazor/datagrid/column-rendering.md @@ -582,7 +582,7 @@ In the below example, we have used the `Expand` query to load the nested Employe ### Complex data generation using ExpandoObject -Before proceeding this, learn about [ExpandoObject Binding](https://blazor.syncfusion.com/documentation/datagrid/data-binding#expandoobject-binding). You can achieve ExpandoObject complex data binding in the Grid by using the dot(.) operator in the column.field. In the following examples, `CustomerID.Name` and `ShipCountry.Country` are complex data. +Before proceeding this, learn about [ExpandoObject Binding](https://blazor.syncfusion.com/documentation/datagrid/data-binding/local-data#expandoobject-binding). You can achieve ExpandoObject complex data binding in the Grid by using the dot(.) operator in the column.field. In the following examples, `CustomerID.Name` and `ShipCountry.Country` are complex data. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -635,7 +635,7 @@ Before proceeding this, learn about [ExpandoObject Binding](https://blazor.syncf ### Complex data generation using DynamicObject -Before proceeding this, learn about [DynamicObject Binding](https://blazor.syncfusion.com/documentation/datagrid/data-binding#dynamicobject-binding). You can achieve DynamicObject complex data binding in the Grid by using the dot(.) operator in the column.field. In the following examples, `CustomerID.Name` and `ShipCountry.Country` are complex data. +Before proceeding this, learn about [DynamicObject Binding](https://blazor.syncfusion.com/documentation/datagrid/data-binding/local-data#dynamicobject-binding). You can achieve DynamicObject complex data binding in the Grid by using the dot(.) operator in the column.field. In the following examples, `CustomerID.Name` and `ShipCountry.Country` are complex data. {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/gantt-chart/accessibility.md b/blazor/gantt-chart/accessibility.md index 0d2772e804..6e83cf71d5 100644 --- a/blazor/gantt-chart/accessibility.md +++ b/blazor/gantt-chart/accessibility.md @@ -1,7 +1,7 @@ --- layout: post title: Accessibility in Blazor Gantt Chart Component | Syncfusion -description: Checkout and learn here all about Accessibility in Syncfusion Blazor Gantt Chart component and more. +description: Learn about accessibility features in the Syncfusion Blazor Gantt Chart component, including WCAG 2.2, Section 508, and keyboard navigation support. platform: Blazor control: Gantt Chart documentation: ug @@ -11,18 +11,20 @@ documentation: ug The Syncfusion Blazor Gantt Chart component adheres to accessibility guidelines, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) standards, ensuring compatibility with assistive technologies, including those relying on assistive technologies. -The accessibility compliance for the Blazor Gantt component is outlined below. +## Accessibility Compliance + +The table below summarizes the accessibility compliance of the Blazor Gantt Chart component. | Accessibility Criteria | Compatibility | -| -- | -- | -| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Intermediate | -| [Section 508 Support](../common/accessibility#accessibility-standards) | Yes | -| [Screen Reader Support](../common/accessibility#screen-reader-support) | Intermediate | -| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | -| [Color Contrast](../common/accessibility#color-contrast) | Yes | -| [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | -| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) |Yes | -| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | +|------------------------|---------------| +| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Intermediate compatibility | +| [Section 508 Support](../common/accessibility#accessibility-standards) | Full compatibility | +| [Screen Reader Support](../common/accessibility#screen-reader-support) | Intermediate compatibility | +| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Full compatibility | +| [Color Contrast](../common/accessibility#color-contrast) | Full compatibility | +| [Mobile Device Support](../common/accessibility#mobile-device-support) | Full compatibility | +| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Full compatibility | +| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Full compatibility | -
Yes - All features of the component meet the requirement.
- -
Intermediate - Some features of the component do not meet the requirement.
- -
No - The component does not meet the requirement.
- -## WAI-ARIA +
Full compatibility - All features meet the requirement.
+
Intermediate compatibility - Some features do not fully meet the requirement.
+
No compatibility - The component does not meet the requirement.
-The Blazor Gantt component implements [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to enhance accessibility. The following ARIA attributes are applied: +## WAI-ARIA attributes -The following ARIA attributes are used in Blazor Gantt: +The Blazor Gantt Chart component implements [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to enhance accessibility. The following ARIA attributes are applied: | Attributes | Description | |------------|-------------| @@ -58,48 +56,48 @@ The following ARIA attributes are used in Blazor Gantt: ## Keyboard navigation -The Gantt component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/) guideline, ensuring accessibility for users of assistive technologies (AT) and those who rely solely on keyboard navigation. The following keyboard shortcuts are supported by the Gantt component: +The Blazor Gantt Chart component supports comprehensive [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/) for users relying on keyboards or assistive technologies. Below are the supported keyboard shortcuts, organized by functionality. ### Focus elements -| Windows | MAC | Actions | -| ----- | ----- | ----- | -| Alt + J | ⌥ + J | Moves the focus to the entire gantt chart. | -| Home | Fn + ← | Moves the focus to the first cell of the focused row. | -| End | Fn + → | Moves the focus to the last cell of the focused row. | -| Ctrl + Home | ⌘ + Fn + ← | Moves the focus to the first Cell of the first row in the gantt chart. | -| Ctrl + End | ⌘ + Fn + → | Moves the focus to the last Cell of the last row in the gantt chart. | -| ↑ | ↑ | Moves the cell focus upward from the focused cell. | -| ↓ | ↓ | Moves the cell focus downward from the focused cell. | -| → | → | Moves the cell focus right side from the focused cell. | -| ← | ← | Moves the cell focus left side from the focused cell. | -| Alt + W | ⌥ + W | Moves the focus to the gantt content element. | +| Windows | Mac | Action | +|---------|-----|--------| +| Alt + J | ⌥ + J | Focuses the entire Gantt chart. | +| Home | Fn + ← | Moves focus to the first cell of the current row. | +| End | Fn + → | Moves focus to the last cell of the current row. | +| Ctrl + Home | ⌘ + Fn + ← | Moves focus to the first cell of the first row. | +| Ctrl + End | ⌘ + Fn + → | Moves focus to the last cell of the last row. | +| ↑ | ↑ | Moves focus to the cell above the current cell. | +| ↓ | ↓ | Moves focus to the cell below the current cell. | +| → | → | Moves focus to the cell to the right. | +| ← | ← | Moves focus to the cell to the left. | +| Alt + W | ⌥ + W | Focuses the Gantt content element. | ### Expand/Collapse -| Windows | MAC | Actions | -| ----- | ----- | ----- | +| Windows | Mac | Action | +|---------|-----|--------| | Ctrl + ↓ | ⌘ + ↓ | Expands all tasks. | | Ctrl + ↑ | ⌘ + ↑ | Collapses all tasks. | -| Ctrl + Shift + ↑ | ⌘ + ⇧ + ↑ | Collapse the selected row. | -| Ctrl + Shift + ↓ | ⌘ + ⇧ + ← | Expands the selected row. | +| Ctrl + Shift + ↑ | ⌘ + ⇧ + ↑ | Collapses the selected row. | +| Ctrl + Shift + ↓ | ⌘ + ⇧ + ↓ | Expands the selected row. | ### Selection -| Windows | MAC | Actions | -| ----- | ----- | ----- | -| ↑ | ↑ | Moves up a row/cell selection from the selected row/cell. | -| ↓ | ↓ | Moves down a row/cell selection from the selected row/cell. | -| → | → | Moves to the right cell selection from the selected cell. | -| ← | ← | Moves to the left cell selection from the selected cell. | -| Shift + ↑ | ⇧ + ↑ | Extends the row/cell selection upwards from the selected row/cell. | -| Shift + ↓ | ⇧ + ↓ | Extends the row/cell selection downwards from the selected row/cell. | -| Shift + → | ⇧ + → | Extends the cell selection to the right side from the selected cell. | -| Shift + ← | ⇧ + ← | Extends the cell selection to the left side from the selected cell. | -| Enter | Enter | Moves the row/cell selection downward from the selected cell/row. | -| Shift + Enter | ⇧ + Enter | Moves the row/cell selection upward. | -| Esc | Esc | Deselects all the selected row/cells. | -| Ctrl + A | ⌘ + A | Select all the row/cells in the current page. | +| Windows | Mac | Action | +|---------|-----|--------| +| ↑ | ↑ | Selects the row or cell above the current selection. | +| ↓ | ↓ | Selects the row or cell below the current selection. | +| → | → | Selects the cell to the right of the current selection. | +| ← | ← | Selects the cell to the left of the current selection. | +| Shift + ↑ | ⇧ + ↑ | Extends selection upward. | +| Shift + ↓ | ⇧ + ↓ | Extends selection downward. | +| Shift + → | ⇧ + → | Extends cell selection to the right. | +| Shift + ← | ⇧ + ← | Extends cell selection to the left. | +| Enter | Enter | Selects the row or cell below the current selection. | +| Shift + Enter | ⇧ + Enter | Selects the row or cell above the current selection. | +| Esc | Esc | Clears all selections. | +| Ctrl + A | ⌘ + A | Selects all rows or cells on the current page. | ### Clipboard @@ -110,79 +108,79 @@ The Gantt component follows the [keyboard interaction](https://www.w3.org/WAI/AR ### Context menu -| Windows | MAC | Actions | -| ----- | ----- | ----- | -| Esc | Esc | Closes the opened sub menu. | -| Enter | Enter | Selects the focused item. | -| Up | Up | Navigates up or to the previous menu item. | -| Down | Down | Navigates down or to the next menu item. | -| Left | Left | Close the current sub menu and navigates to the parent menu. | -| Right | Right | Navigates and open the next sub menu. | +| Windows | Mac | Action | +|---------|-----|--------| +| Esc | Esc | Closes the context menu. | +| Enter | Enter | Selects the focused menu item. | +| ↑ | ↑ | Navigates to the previous menu item. | +| ↓ | ↓ | Navigates to the next menu item. | +| ← | ← | Closes the current submenu and navigates to the parent menu. | +| → | → | Opens the next submenu. | ### Cell editing -| Windows | MAC | Actions | -| ----- | ----- | ----- | -| F2 | F2 | Starts editing of selected Row/cell. | -| Enter | Enter | Saves current cell. | -| Insert | ⌘ + Enter | Creates a new add form based on the new row position. | -| Delete | Delete | Deletes the current selected record. | -| Tab | Tab | Navigates to the next editable cell, saves the current cell, and starts editing the next cell. | -| Shift + Tab | ⇧ + Tab | Navigates to the previous editable cell, saves the current cell, and starts editing the previous cell. | -| Shift + Enter | ⇧ + Enter | Saves the current cell and starts editing the previous row cell. | +| Windows | Mac | Action | +|---------|-----|--------| +| F2 | F2 | Initiates editing of the selected row or cell. | +| Enter | Enter | Saves the current cell. | +| Insert | ⌘ + Enter | Opens a form to add a new row. | +| Delete | Delete | Deletes the selected record. | +| Tab | Tab | Saves the current cell and moves to the next editable cell. | +| Shift + Tab | ⇧ + Tab | Saves the current cell and moves to the previous editable cell. | +| Shift + Enter | ⇧ + Enter | Saves the current cell and edits the cell in the previous row. | ### Filtering -| Windows | MAC | Actions | -| ----- | ----- | ----- | -| Alt + ↓ | ⌥ + ↓ | Opens the filter menu when its header element is in focused state. | +| Windows | Mac | Action | +|---------|-----|--------| +| Alt + ↓ | ⌥ + ↓ | Opens the filter menu for the focused header. | ### Column Menu -| Windows | MAC | Actions | -| ----- | ----- | ----- | -| Alt + ↓ | ⌥ + ↓ | Opens column menu when its header element is in focused state. | +| Windows | Mac | Action | +|---------|-----|--------| +| Alt + ↓ | ⌥ + ↓ | Opens the column menu for the focused header. | ### Reordering -| Windows | MAC | Actions | -| ----- | ----- | ----- | -| Ctrl + ← / → | ⌘ + ← / → | Reorders the focused header column to the left or right side. | +| Windows | Mac | Action | +|---------|-----|--------| +| Ctrl + ← / → | ⌘ + ← / → | Moves the focused column to the left or right. | ### Sorting -| Windows | MAC | Actions | -| ----- | ----- | ----- | -| Enter | Enter | Performs sorting(ascending/descending) on a column when its header element is in focused state. | -| Ctrl + Enter | ⌘ + Enter | Performs multi-sorting on a column when its header element is in focused state. | -| Shift + Enter | ⇧ + Enter | Clears sorting for the focused header column. | +| Windows | Mac | Action | +|---------|-----|--------| +| Enter | Enter | Sorts the focused column (ascending or descending). | +| Ctrl + Enter | ⌘ + Enter | Applies multi-column sorting. | +| Shift + Enter | ⇧ + Enter | Clears sorting for the focused column. | ### Toolbar -| Windows | MAC | Actions | -| ----- | ----- | ----- | -| ← | ← | Focuses the previous element. | -| → | → | Focuses the next element. | -| Enter | Enter | Performs the focused toolbar element action. | +| Windows | Mac | Action | +|---------|-----|--------| +| ← | ← | Focuses the previous toolbar element. | +| → | → | Focuses the next toolbar element. | +| Enter | Enter | Activates the focused toolbar element. | ### Tooltip -| Windows | MAC | Actions | -| ----- | ----- | ----- | -| Escape | Escape | Closes or dismisses the tooltip. | -| Tab | Tab | A form control receiving focus (say through tab key), opens the tooltip, and on focus out closes it. | +| Windows | Mac | Action | +|---------|-----|--------| +| Esc | Esc | Closes the tooltip. | +| Tab | Tab | Opens the tooltip on focus and closes it on focus out. | ### Dialog editing -| Windows | MAC | Actions | -| ----- | ----- | ----- | -| Ctrl + Insert | ⌘ + Insert | Opens the add row dialog popup. | -| Ctrl + F2 | ⌘ + F2 | Opens the edit row dialog popup. | -| Del | Del | Deletes the currently selected record. | +| Windows | Mac | Action | +|---------|-----|--------| +| Ctrl + Insert | ⌘ + Insert | Opens the add row dialog. | +| Ctrl + F2 | ⌘ + F2 | Opens the edit row dialog. | +| Del | Del | Deletes the selected record. | | Enter | Enter | Saves the current row. | | Esc | Esc | Closes the dialog. | -| Tab | Tab | Navigates to the next editable cell, saves the current cell, and starts editing the next cell in the dialog elements. | -| Shift + Tab | ⇧ + Tab | Navigates to the previous editable cell, saves the current cell, and starts editing the previous cell in the dialog elements. | +| Tab | Tab | Saves the current cell and moves to the next editable cell in the dialog. | +| Shift + Tab | ⇧ + Tab | Saves the current cell and moves to the previous editable cell in the dialog. | ## Validate Accessibility Compliance diff --git a/blazor/gantt-chart/cell-selection.md b/blazor/gantt-chart/cell-selection.md index 484e6b0311..4e5fec6e44 100644 --- a/blazor/gantt-chart/cell-selection.md +++ b/blazor/gantt-chart/cell-selection.md @@ -13,7 +13,7 @@ Cell selection in the Gantt Chart component enables interactive selection of spe ## Single cell selection -Single cell selection in the Gantt chart is enabled by setting [GanttSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Mode) to **Cell** and [selectionSettings.type](https://ej2.syncfusion.com/angular/documentation/api/gantt/selectionSettings/#type) to **Single**. This allows selecting only one cell at a time. +Single cell selection in the Gantt chart is enabled by setting [GanttSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Mode) to **Cell** and [GanttSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Type) to **Single**. This allows selecting only one cell at a time. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -70,7 +70,7 @@ Single cell selection in the Gantt chart is enabled by setting [GanttSelectionSe ## Multiple cell selection -Multiple cell selection in the Gantt Chart is enabled by setting [selectionSettings.mode](https://ej2.syncfusion.com/angular/documentation/api/gantt/selectionSettings/#mode) to **Cell** and [selectionSettings.type](https://ej2.syncfusion.com/angular/documentation/api/gantt/selectionSettings/#type) to **Multiple**. This allows selecting multiple cells at a time by holding the Ctrl key while clicking on each desired cell. +Multiple cell selection in the Gantt Chart is enabled by setting [GanttSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Mode) to **Cell** and [GanttSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Type) to **Multiple**. This allows selecting multiple cells at a time by holding the Ctrl key while clicking on each desired cell. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -194,7 +194,7 @@ Select a specific cell in the Gantt Chart by calling the [SelectCellAsync](http ## Customize cell selection action -You may customize cell selection behavior in the Gantt Chart using [cellSelecting](https://ej2.syncfusion.com/angular/documentation/api/gantt/events/#cellselecting), [cellSelected](https://ej2.syncfusion.com/angular/documentation/api/gantt/events/#cellselected), [cellDeselecting](https://ej2.syncfusion.com/angular/documentation/api/gantt/events/#celldeselecting), and [cellDeselected](https://ej2.syncfusion.com/angular/documentation/api/gantt/events/#celldeselected) events. +You may customize cell selection behavior in the Gantt Chart using [CellSelecting](https://blazor.syncfusion.com/documentation/gantt-chart/events#cellselecting), [CellSelected](https://blazor.syncfusion.com/documentation/gantt-chart/events#cellselected), [CellDeselecting](https://blazor.syncfusion.com/documentation/gantt-chart/events#celldeselecting), and [CellDeselected](https://blazor.syncfusion.com/documentation/gantt-chart/events#celldeselected) events. The following sample demonstrates selection is canceled in the `cellSelecting` event when the **TaskName** is **Perform Soil test**. @@ -301,4 +301,4 @@ The following sample demonstrates selection is canceled in the `cellSelecting` e - [Accessibility in Blazor Gantt Chart](https://blazor.syncfusion.com/documentation/gantt-chart/accessibility) - [Blazor Gantt Chart Feature Tour](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) -- [Blazor Gantt Chart Example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap5) +- [Blazor Gantt Chart Example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap5) \ No newline at end of file diff --git a/blazor/gantt-chart/clipboard.md b/blazor/gantt-chart/clipboard.md index 754326d571..fd27008e05 100644 --- a/blazor/gantt-chart/clipboard.md +++ b/blazor/gantt-chart/clipboard.md @@ -9,20 +9,22 @@ documentation: ug # Clipboard in Blazor Gantt Chart component -The clipboard provides an option to copy selected rows or cell data into the clipboard. +The clipboard feature allows copying selected row or cell data from the Gantt Chart component. -The following list of keyboard shortcuts is supported in the Gantt Chart to copy selected rows or cells data into the clipboard. +The following keyboard shortcut is supported for clipboard operations: Interaction keys |Description -----|----- Ctrl + C |Copy selected rows or cells data into clipboard. +Ctrl + Shift + H |Copy selected rows or cells data with header into clipboard. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt - + @@ -35,44 +37,50 @@ Interaction keys |Description 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 static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 05), EndDate = new DateTime(2019, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 05), Duration = "4", Progress = 40, Predecessor = "2", ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 05), Duration = "0", Progress = 30, Predecessor = "3", ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 06), EndDate = new DateTime(2019, 04, 21) }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 06), Duration = "3", Progress = 30, Predecessor = "4" , ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 06), Duration = "3", Progress = 40, Predecessor = "6" , ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2019, 04, 06), Duration = "0", Progress = 30, Predecessor = "7" , ParentId = 5 }, + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 05), EndDate = new DateTime(2019, 04, 10), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 05), Duration = "4", Progress = 40, Predecessor = "2", ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 05), Duration = "0", Progress = 30, Predecessor = "3", ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 06), EndDate = new DateTime(2019, 04, 18) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 06), Duration = "3", Progress = 30, Predecessor = "4" , ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 06), Duration = "3", Progress = 40, Predecessor = "6" , ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2019, 04, 06), Duration = "0", Progress = 30, Predecessor = "7" , ParentID = 5 }, }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBSNEVJgLymNZrA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Copy to clipboard by external buttons -To copy the data of the selected rows or cells into the clipboard with the help of external buttons, invoke the [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_CopyAsync) method. +To copy selected rows or cells to the clipboard using external buttons, invoke the [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_CopyAsync) method. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Navigations + - + @@ -81,9 +89,11 @@ To copy the data of the selected rows or cells into the clipboard with the help + @code{ private List TaskCollection { get; set; } private SfGantt GanttObject; + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -102,61 +112,68 @@ To copy the data of the selected rows or cells into the clipboard with the help await this.GanttObject.CopyAsync(WithHeader); } } + 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 static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 05), EndDate = new DateTime(2019, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 05), Duration = "4", Progress = 40, Predecessor = "2", ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 05), Duration = "0", Progress = 30, Predecessor = "3", ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 06), EndDate = new DateTime(2019, 04, 21) }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 06), Duration = "3", Progress = 30, Predecessor = "4" , ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 06), Duration = "3", Progress = 40, Predecessor = "6" , ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2019, 04, 06), Duration = "0", Progress = 30, Predecessor = "7" , ParentId = 5 }, + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 05), EndDate = new DateTime(2019, 04, 10), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 05), Duration = "4", Progress = 40, Predecessor = "2", ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 05), Duration = "0", Progress = 30, Predecessor = "3", ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 06), EndDate = new DateTime(2019, 04, 18) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 06), Duration = "3", Progress = 30, Predecessor = "4" , ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 06), Duration = "3", Progress = 40, Predecessor = "6" , ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2019, 04, 06), Duration = "0", Progress = 30, Predecessor = "7" , ParentID = 5 }, }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhIDOBJqrnnaTje?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Copy hierarchy modes -Gantt Chart provides support for a set of copy modes with the [CopyHierarchyMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.CopyHierarchyType.html) property. The following are the type of filter modes available in the Gantt Chart. +The Gantt Chart component supports multiple copy modes using the [CopyHierarchyMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.CopyHierarchyType.html) property. The following modes are available: -* **Parent**: This is the default copy hierarchy mode in the Gantt Chart. The clipboard value will have the selected records with its parent records, if the selected records do not have any parent record, then the selected record will be in the clipboard. +- **Parent**: Copies selected records along with their parent records. If no parent exists, only the selected records are copied. -* **Child**: Clipboard value will have the selected records with its child record. If the selected records do not have any child record, then the selected records will be in the clipboard. +- **Child**: Copies selected records along with their child records. If no child exists, only the selected records are copied. -* **Both**: Clipboard value will have the selected records with both parent and child records. If the selected records do not have any parent and child records, then the selected records alone are copied to the clipboard. +- **Both**: Copies selected records with both parent and child records. If neither exists, only the selected records are copied. -* **None**: Only the selected records will be in the clipboard. +- **None**: Copies only the selected records without any hierarchy. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.TreeGrid @using Syncfusion.Blazor.Navigations @using Syncfusion.Blazor.DropDowns; - + - + @@ -164,6 +181,7 @@ Gantt Chart provides support for a set of copy modes with the [CopyHierarchyMode + @code{ private List TaskCollection { get; set; } private SfGantt GanttObject; @@ -175,6 +193,7 @@ Gantt Chart provides support for a set of copy modes with the [CopyHierarchyMode public string Id { get; set; } public string Mode { get; set; } } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -217,50 +236,60 @@ Gantt Chart provides support for a set of copy modes with the [CopyHierarchyMode await this.GanttObject.CopyAsync(WithHeader); } } + 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 static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 05), EndDate = new DateTime(2019, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 05), Duration = "4", Progress = 40, Predecessor = "2", ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 05), Duration = "0", Progress = 30, Predecessor = "3", ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 06), EndDate = new DateTime(2019, 04, 21) }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 06), Duration = "3", Progress = 30, Predecessor = "4" , ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 06), Duration = "3", Progress = 40, Predecessor = "6" , ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2019, 04, 06), Duration = "0", Progress = 30, Predecessor = "7" , ParentId = 5 }, + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 05), EndDate = new DateTime(2019, 04, 10), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 05), Duration = "4", Progress = 40, Predecessor = "2", ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 05), Duration = "0", Progress = 30, Predecessor = "3", ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 06), EndDate = new DateTime(2019, 04, 18) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 06), Duration = "3", Progress = 30, Predecessor = "4" , ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 06), Duration = "3", Progress = 40, Predecessor = "6" , ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2019, 04, 06), Duration = "0", Progress = 30, Predecessor = "7" , ParentID = 5 }, }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtreZYhfgVwQdJtr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Paste -The content of a row/cells can be copied by selecting the rows/cells and pressing the Ctrl + C shortcut key to copy data and paste it by pressing Ctrl + V shortcut key. +You can copy the content of a row or cell by selecting it and pressing the Ctrl + C shortcut key. To paste the copied data, press Ctrl + V. + +**Selected row copy and paste:** -In the following code example, selected rows are copied by using the [BeforeCopy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_BeforeCopy) event and pasted by 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 and by binding keyboard events `onkeyup`. +You can use the [RowSelected](https://blazor.syncfusion.com/documentation/gantt-chart/events#rowselected) event, which captures the index of the active row. When a copy command is triggered (`Ctrl + C`), the [BeforeCopy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_BeforeCopy) event processes the selected row data and prepares it for duplication. The paste operation is initiated through the `onkeyup` keyboard event (`Ctrl + V`) and handled 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, which inserts the copied records above the selected row. To prevent unintended paste actions, the [RowDeselected](https://blazor.syncfusion.com/documentation/gantt-chart/events#rowdeselected) event resets the selection index when no row is active. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids + - + - + @@ -271,6 +300,7 @@ In the following code example, selected rows are copied by using the [BeforeCopy private List TaskCollection { get; set; } public List CopiedRecords { get; set; } = new List(); public double SelectedIndex { get; set; } + public void RowDeselect(RowDeselectEventArgs Args) { SelectedIndex = -1; @@ -287,7 +317,7 @@ In the following code example, selected rows are copied by using the [BeforeCopy { var colVal = rec.Split("\t"); int colIndex = 0; - int id = TaskCollection.Max(a => a.TaskId) + 1; + int id = TaskCollection.Max(a => a.TaskID) + 1; TaskData ganttData = new TaskData() { }; foreach (var col in columns) { @@ -295,18 +325,14 @@ In the following code example, selected rows are copied by using the [BeforeCopy { ganttData.GetType().GetProperty(col.Field).SetValue(ganttData, id + index); } - else if (col.Type == ColumnType.Date) + else if (col.Type == Syncfusion.Blazor.Grids.ColumnType.Date) { ganttData.GetType().GetProperty(col.Field).SetValue(ganttData, Convert.ToDateTime(colVal[colIndex])); } - else if (col.Type == ColumnType.String) + else if (col.Type == Syncfusion.Blazor.Grids.ColumnType.String) { ganttData.GetType().GetProperty(col.Field).SetValue(ganttData, colVal[colIndex]); } - else if (col.Type == ColumnType.Number) - { - ganttData.GetType().GetProperty(col.Field).SetValue(ganttData, Convert.ToInt32(colVal[colIndex])); - } colIndex++; } index++; @@ -314,23 +340,26 @@ In the following code example, selected rows are copied by using the [BeforeCopy } } } + public void RowSelect(RowSelectEventArgs Args) { SelectedIndex = Args.RowIndex; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + private async Task KeyUp(KeyboardEventArgs Args) { if (Args.CtrlKey && Args.Code == "KeyV" && CopiedRecords.Count > 0 && SelectedIndex > -1) { - var parentID = TaskCollection[(int)SelectedIndex].ParentId; + var parentID = TaskCollection[(int)SelectedIndex].ParentID; for (var i = 0; i < CopiedRecords.Count; i++) { - CopiedRecords[i].ParentId = parentID; - GanttChart.AddRecordAsync(CopiedRecords[i],(int)SelectedIndex, RowPosition.Above); + CopiedRecords[i].ParentID = parentID; + GanttChart.AddRecordAsync(CopiedRecords[i],(int)SelectedIndex, Syncfusion.Blazor.Gantt.RowPosition.Above); } CopiedRecords = new List(); } @@ -338,50 +367,57 @@ In the following code example, selected rows are copied by using the [BeforeCopy 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new - DateTime(2022, 04, 21) }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = - "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", - Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", - Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new - DateTime(2022, 04, 21) }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), - Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", - Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", - Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new + DateTime(2022, 04, 08) }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = + "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", + Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", + Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new + DateTime(2022, 04, 08) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), + Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", + Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", + Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Copy and paste in Blazor Gantt Chart](./images/copypaste_row.gif) -In the following code example, selected cells are copied and pasted by using the [UpdateRecordByIDAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_UpdateRecordByIDAsync__0_) method and by binding keyboard events `onkeydown` and `onkeyup.` +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLoXOLIWYbFyAtl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +**Selected Cell Copy and Paste:** + +You can use the [CellSelected](https://blazor.syncfusion.com/documentation/gantt-chart/events#cellselected) event to identify the active row when a cell is selected. When the copy command (`Ctrl + C`) is triggered, the selected cell positions are captured using `GetSelectedRowCellIndexesAsync`. On paste (`Ctrl + V`), the copied values are applied to the corresponding cells in the target rows using the [UpdateRecordByIDAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_UpdateRecordByIDAsync__0_) method. The copy and paste actions are handled through `onkeydown` and `onkeyup` keyboard events. To avoid unintended updates, the [CellDeselected](https://blazor.syncfusion.com/documentation/gantt-chart/events#celldeselected) event resets the selection index when no cell is active. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids - + - + @@ -457,70 +493,73 @@ In the following code example, selected cells are copied and pasted by using the 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new - DateTime(2022, 04, 21) }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = - "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", - Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", - Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new - DateTime(2022, 04, 21) }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), - Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", - Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", - Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new + DateTime(2022, 04, 08) }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = + "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", + Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", + Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new + DateTime(2022, 04, 08) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), + Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", + Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", + Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Copy and paste in Blazor Gantt Chart](./images/copypaste_cell.gif) -## Autofill functionality in Gantt Chart +{% endhighlight %} +{% endtabs %} -To achieve the autofill functionality in the Gantt chart, the drag selection feature must be enabled, and the keyup event must be bound. +{% previewsample "https://blazorplayground.syncfusion.com/embed/htheZYBSrtNqqEsO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Autofill + +To achieve the autofill functionality in the Gantt chart, the drag selection feature must be enabled, and the `keyup` event must be bound. The following properties have been configured in the [GanttSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html) to enable the drag selection feature: -- [AllowDragSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_AllowDragSelection): `true` +- [AllowDragSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_AllowDragSelection): **true** - [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Mode): [Cell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SelectionMode.html#Syncfusion_Blazor_Grids_SelectionMode_Cell) - [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Type): [Multiple](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SelectionType.html#Syncfusion_Blazor_Grids_SelectionType_Multiple) - [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_CellSelectionMode): [Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.CellSelectionMode.html#Syncfusion_Blazor_Grids_CellSelectionMode_Box) -Using these settings, the user can select multiple cells in the Gantt chart by dragging the mouse. +These settings allow users to select multiple cells by dragging the mouse. -Then the native keyup event is bound to the Gantt chart in order to customize the keydown actions in the gantt chart. In the example provided, the Alt key is captured to fill the data while dragging the selection. For more information, please refer to this [page](https://blazor.syncfusion.com/documentation/gantt-chart/how-to/bind-native-events). +The `keyup` event is used to detect key actions. For more information, please refer to this [page](https://blazor.syncfusion.com/documentation/gantt-chart/how-to/bind-native-events). In this example, pressing the `Alt` key triggers autofill. The value of the first selected cell is captured during the `CellSelected` event based on the selected cell index. -The value of first selected cell is captured in the [CellSelectedEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_CellSelected) based on the cell index. +When the `Alt` key is released during a multi-cell selection, the [UpdateRecordByID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_UpdateRecordByIDAsync__0_) method is called in the `keyup` event. This updates all selected rows by copying the value from the first selected cell to the corresponding cells in other rows. -When the `Alt` key is pressed and released during a multiple cell selection, the [UpdateRecordByID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_UpdateRecordByIDAsync__0_) method is called in the Keyup event. This method updates the values of all selected rows with the value of the first selected cell, effectively copying the value of the first selected cell to all other cells in those rows that were selected. +This customization enables users to quickly update multiple cells, improving data entry efficiency in the Gantt chart. -With this customization, users can easily and quickly update multiple cells in the Gantt chart, improving overall efficiency. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids - + - + @@ -574,31 +613,33 @@ With this customization, users can easily and quickly update multiple cells in t 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }, }; return Tasks; } } -``` -![Custom AutoFIll in Blazor Gantt Chart](./images/blazor-gantt-chart-autofill.gif) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVyXaBShXqAcAGK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/gantt-chart/column-menu.md b/blazor/gantt-chart/column-menu.md index ce716d4f85..a66b0a72ee 100644 --- a/blazor/gantt-chart/column-menu.md +++ b/blazor/gantt-chart/column-menu.md @@ -9,22 +9,20 @@ documentation: ug # Column Menu in Blazor Gantt Chart Component -The column menu feature in the Syncfusion Blazor Gantt Chart enables sorting, filtering, and autofit options through a menu accessed by clicking a column's icon. Enable it by setting the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ShowColumnMenu) property to `true`. This guide covers enabling and using the column menu. +The column menu in the Blazor Gantt component offers built-in actions including sorting, filtering, column chooser, and autofit. It appears when the column header icon is clicked. -## Column Menu +To enable this feature, set [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ShowColumnMenu) to **true** in the Gantt configuration. Also enable [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowSorting), [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering), and [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowResizing) to support the corresponding actions. -Enable the column menu by setting `ShowColumnMenu` to `true`, along with [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowSorting), [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering), and [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowResizing) for respective features. Clicking the column header icon displays a menu with options based on the column type. - -The default menu items are: +The following built-in column menu items are available: | Item | Description | |------|-------------| -| `Sort Ascending` | Sort the current column in ascending order. | -| `Sort Descending` | Sort the current column in descending order. | -| `Auto Fit` | Auto fit the current column. | -| `Auto Fit All` | Auto fit all columns. | -| `Column Chooser` | Choose column visibility. | -| `Filter` | Show the filter menu based on column type. | +| Sort Ascending | Sort the current column in ascending order. | +| Sort Descending | Sort the current column in descending order. | +| Auto Fit | Auto fit the current column. | +| Auto Fit All | Auto fit all columns. | +| Column Chooser | Choose column visibility. | +| Filter | Displays filtering options based on [FilterSettings.FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_FilterType). | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -76,7 +74,7 @@ The default menu items are: {% previewsample "https://blazorplayground.syncfusion.com/embed/BjVoMXiticGodFzW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> **Note**: Disable the column menu for a specific column by setting [GanttColumn.ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_ShowColumnMenu) to `false`. +> **Note**: Disable the column menu for a specific column by setting [GanttColumn.ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_ShowColumnMenu) to **false**. ## See also diff --git a/blazor/gantt-chart/column-reordering.md b/blazor/gantt-chart/column-reordering.md index 57fea462cb..25d17ab0e5 100644 --- a/blazor/gantt-chart/column-reordering.md +++ b/blazor/gantt-chart/column-reordering.md @@ -145,4 +145,4 @@ The following demonstrates how to reorder columns by placing **Progress** before {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLoMtsgBGsnpvOD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLoMtsgBGsnpvOD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/gantt-chart/column-resizing.md b/blazor/gantt-chart/column-resizing.md index 6b9cc72129..442cbf8921 100644 --- a/blazor/gantt-chart/column-resizing.md +++ b/blazor/gantt-chart/column-resizing.md @@ -146,4 +146,4 @@ The screenshot below illustrates column resizing on a touch device. ![Column resize](images/blazor-gantt-chart-column-resizing.png) -> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap4) to know how to render and configure the Gantt Chart. +> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap4) to know how to render and configure the Gantt Chart. \ No newline at end of file diff --git a/blazor/gantt-chart/column-template.md b/blazor/gantt-chart/column-template.md index 9d25ff0e1c..773007ec3c 100644 --- a/blazor/gantt-chart/column-template.md +++ b/blazor/gantt-chart/column-template.md @@ -7,11 +7,15 @@ control: Gantt Chart documentation: ug --- -# Column template in Blazor Gantt Chart Component +# Column template in Blazor Gantt Chart component -A column template is used to customize the column’s look. The following code example explains how to define the custom template in Gantt Chart using the `Template` property. +The Syncfusion® 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. -N> The column template feature is used to render the customized element value in the UI for a particular column. The data operations like filtering, sorting, etc., will not work based on the column template values. It will be handled based on the values you have provided to the particular column in the datasource. +> 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® [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" %} diff --git a/blazor/gantt-chart/columns.md b/blazor/gantt-chart/columns.md index 9d0f6081b7..8abfcf6481 100644 --- a/blazor/gantt-chart/columns.md +++ b/blazor/gantt-chart/columns.md @@ -7,25 +7,25 @@ control: Gantt Chart documentation: ug --- -# Columns in Blazor Gantt Chart Component +# Columns in Blazor Gantt component -The column displays information from a bound data source, and you can edit the values of column to update the task details through Tree Grid. The operations such as sorting, filtering, and searching can be performed based on column definitions. To display a Gantt Chart column, the `Field` property should be mapped from the data source to the column. +The Syncfusion® 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. -N> If the column `Field` is not specified in the data source, the column values will be empty. +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. -The `TreeColumnIndex` property is used to define the expander column in the Gantt Chart component to expand and collapse the child rows. +> If the column `Field` is not specified in the data source, the column values will be empty. ## Defining columns -Using the `GanttColumns` property, you can define the columns and custom columns in Gantt Chart. If the columns are not defined, then the default columns will be rendered based on the mapped data source fields in the `GanttTaskFields` property. If custom columns are required, then you can generate columns that was not defined in the `GanttTaskFields` property.Refer to the following code example for defining the columns in Gantt Chart along with their widths. +You can define columns using the [GanttColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumns.html) property along with the mapped fields in the [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) property. If no columns are explicitly defined, the component automatically renders default columns based on the mapped fields in `GanttTaskFields`. To create additional columns, define additional columns that are not included in `GanttTaskFields`. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt + - + @@ -36,8 +36,8 @@ Using the `GanttColumns` property, you can define the columns and custom columns - - + + @@ -48,6 +48,22 @@ Using the `GanttColumns` property, you can define the columns and custom columns this.TaskCollection = GetTaskCollection(); } + public static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), Status="Progress", WorkersCount=20, StartDateOnly = new DateOnly(2021, 03, 02), StartTimeOnly = new TimeOnly(10, 00, 00)}, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 5, Status="Progress", WorkersCount=10, ParentID = 1, StartDateOnly = new DateOnly(2021, 03, 04), StartTimeOnly = new TimeOnly(11, 30, 00)}, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 10, Status="Hold", WorkersCount=15, ParentID = 1, StartDateOnly = new DateOnly(2021, 03, 06), StartTimeOnly = new TimeOnly(12, 00, 00)}, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, Status="PostPoned", WorkersCount=5, ParentID = 1, StartDateOnly = new DateOnly(2021, 03, 08), StartTimeOnly = new TimeOnly(13, 30, 00)}, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), Status="Progress", WorkersCount=25,StartDateOnly = new DateOnly(2021, 07, 10), StartTimeOnly = new TimeOnly(14, 00, 00) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, Status="PostPoned", WorkersCount=10, ParentID = 5 , StartDateOnly = new DateOnly(2021, 10, 12), StartTimeOnly = new TimeOnly(16, 00, 00)}, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, Status="Progress", WorkersCount=5, ParentID = 5, StartDateOnly = new DateOnly(2021, 10, 14), StartTimeOnly = new TimeOnly(17, 30, 00) }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, Status="Progress", WorkersCount=10, ParentID = 5,StartDateOnly = new DateOnly(2021, 10, 16), StartTimeOnly = new TimeOnly(18, 00, 00) } + }; + return Tasks; + } + public class TaskData { public int TaskID { get; set; } @@ -62,6 +78,62 @@ Using the `GanttColumns` property, you can define the columns and custom columns public int WorkersCount { get; set; } public int? ParentID { get; set; } } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLSCZsppMqNPDbC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Column types + +The Syncfusion® Blazor Gantt component lets you specify the data type for each column using the [GanttColumn.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Type) property. This ensures that values are rendered with appropriate formatting, such as numeric or date formats, based on the column's data type. + +**Gantt supports the following column types:** + +- **String:** Text-based column. +- **Decimal:** Decimal number column. +- **Double:** Double-precision number column. +- **Integer:** Integer number column. +- **Long:** Long integer column. +- **Boolean:** Checkbox for true/false. +- **Date:** Standard date column. +- **DateTime:** Date and time column. +- **DateOnly:** Custom column for date. +- **TimeOnly:** Custom column for time. +- **Checkbox:** Displays checkbox only. +- **None:** Represents a column that binds to None data. + +> The `DateOnly` and `TimeOnly` formats are supported in additional columns in the Gantt Chart. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt + + + + + + + + + + + + + + + + + + +@code{ + private List TaskCollection { get; set; } + protected override void OnInitialized() + { + this.TaskCollection = GetTaskCollection(); + } public static List GetTaskCollection() { @@ -78,94 +150,51 @@ Using the `GanttColumns` property, you can define the columns and custom columns }; 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 DateOnly? StartDateOnly { get; set; } + public TimeOnly? StartTimeOnly { get; set; } + public string Duration { get; set; } + public int Progress { get; set; } + public string Status { get; set; } + public int WorkersCount { get; set; } + public int? ParentID { get; set; } + } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVyZYMaqwpAwiFv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -## Header template +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhyXEMEgbFSXRrx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> Before adding the header template to the Gantt Chart, it is strongly recommended to go through the [template](./templates#templates) section topic to configure the template. +## Column formatting -The Header Template has options to display custom element values or content in the header. You can use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_HeaderTemplate) of the [GanttColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html) component to specify the custom content. +The Syncfusion® Gantt Chart component for Blazor supports column formatting to customize data presentation. You can format numbers, dates, or apply templates based on specific requirements. Use the [GanttColumn.Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Format) property to define the desired format for each column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt -@using Syncfusion.Blazor.Grids - - + + + - - -
- - @((context as GridColumn).HeaderText) -
- - - - -
- - @((context as GridColumn).HeaderText) -
- - - - -
- - @((context as GridColumn).HeaderText) -
- - - - -
- - @((context as GridColumn).HeaderText) -
- - - - -
- - @((context as GridColumn).HeaderText) -
- - + + + + - -@code{ +@code{ private List TaskCollection { get; set; } - + private string NumberFormat = "C"; protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -176,56 +205,73 @@ The Header Template has options to display custom element values or content in t public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? Parent_Id { get; set; } - + public int? ParentID { get; set; } } public static List GetTaskCollection() { - List Tasks = new List() - { - new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21)}, - new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, Parent_Id = 1}, - new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, Parent_Id = 1}, - new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, Parent_Id =1}, - new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21)}, - new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, Parent_Id =5}, - new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, Parent_Id =5}, - new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, Parent_Id =5} - + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; - } } + } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhSDOsYqcoTwbwV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVICZWpUlnjXERR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Format +>* 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). +>* 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. + +### Number formatting -To format the cell values based on a specific culture, use the `GanttColumn.Format` property. The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component uses the `Internationalization` library to format `number` and `date` values. +The Syncfusion® Gantt Chart component for Blazor supports number formatting through the [GanttColumn.Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Format) property, where standard format strings define numeric value presentation including currency, percentage, and decimal formats. The following standard format strings are available: + +| Format | Description | Remarks | +|--------|--------------------|-------------------------------------------------------------------------| +| N | Numeric format | Use `N2`, `N3`, etc., to set the number of decimal places. | +| C | Currency format | Use `C2`, `C3`, etc., to define precision for currency values. | +| P | Percentage format | Input should be between 0 and 1; `P2`, `P3`, etc., control precision. | + + +The following example code demonstrates the formatting of data for the **TaskID** column using the **N2** format, the **Progress** column using the **P2** format. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt + - + - - + + + + + @code{ private List TaskCollection { get; set; } - private string NumberFormat = "C"; + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -262,25 +308,11 @@ To format the cell values based on a specific culture, use the `GanttColumn.Form {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBSjOCkgcRbpweC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -N> By default, the `number` and `date` values are formatted in `en-US` culture. - -### Number formatting - -The number or integer values can be formatted using the following format strings. - -Format |Description |Remarks ------|----- -N | Denotes numeric type. | The numeric format is followed by an integer value like N2 or N3, which denotes the number of precisions to be allowed. -C | Denotes currency type. | The currency format is followed by an integer value like C2 or C3, which denotes the number of precisions to be allowed. -P | Denotes percentage type | The percentage format expects the input value to be in the range of 0 to 100. For example, the cell value `0.2` is formatted as `20%`. The percentage format is followed by an integer value like P2, P3, which denotes the number of precisions to be allowed. +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVSstCJJrKQgFRw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Date formatting -You can format date values either using the built-in date format string or a custom format string. For the built-in date format, you can specify the `GanttColumn.Format` property as string (example: `yMd`). - -You can also use the custom format string to format the date values. Some of the custom formats and the formatted date values are given in the following table. +The Syncfusion® Gantt component for Blazor supports date formatting in columns using the [GanttColumn.Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Format) property, where format strings such as **d**, **D**, **MMM dd, yyyy** can be applied. Both built-in formats like **yMd** and custom formats are supported to define the layout and detail of date and time values based on column requirements. The following custom formats and their corresponding output are listed below: Format | Formatted value -----|----- @@ -294,9 +326,9 @@ Format | Formatted value {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt + - + @@ -309,6 +341,7 @@ Format | Formatted value @code{ private List TaskCollection { get; set; } private string DateFormat = "MM/dd/yyyy"; + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -347,19 +380,17 @@ Format | Formatted value {% previewsample "https://blazorplayground.syncfusion.com/embed/LDreDaMuKwGwqTMD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Gantt Chart with Date Format](images/blazor-gantt-chart-date-format.png) +## AutoFit columns -## Autofit columns - -The Gantt chart has a feature that allows to automatically adjust column widths based on the maximum content width of each column when you double-click on the resizer symbol located in a specific column header. This feature ensures that all data in the Gantt chart rows is displayed without wrapping. To use 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. +The Syncfusion® Gantt component for Blazor supports automatic column width adjustment based on content. Double-clicking the column header resizer adjusts the width to fit the maximum content, ensuring clear data visibility without wrapping. To enable this feature, set [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowResizing) to **true**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt + - + @@ -370,31 +401,20 @@ The Gantt chart has a feature that allows to automatically adjust column widths - - + + + @code { private SfGantt Gantt; private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } - public class TaskData - { - public int TaskID { get; set; } - public string TaskName { get; set; } - public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } - public DateOnly? StartDateOnly { get; set; } - public TimeOnly? StartTimeOnly { get; set; } - public string Duration { get; set; } - public int Progress { get; set; } - public string Status { get; set; } - public int WorkersCount { get; set; } - public int? ParentID { get; set; } - } + public static List GetTaskCollection() { List Tasks = new List() @@ -410,6 +430,21 @@ The Gantt chart has a feature that allows to automatically adjust column widths }; 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 DateOnly? StartDateOnly { get; set; } + public TimeOnly? StartTimeOnly { get; set; } + public string Duration { get; set; } + public int Progress { get; set; } + public string Status { get; set; } + public int WorkersCount { get; set; } + public int? ParentID { get; set; } + } } {% endhighlight %} @@ -419,7 +454,7 @@ The Gantt chart has a feature that allows to automatically adjust column widths ### Resizing a column to fit its content using method -In Gantt chart, you can automatically adjust specific column width based on the maximum content width of each column, ensuring that the width displays the content without wrapping or hiding by using [AutoFitColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AutoFitColumnsAsync) method. You can autofit specific columns at initial rendering by invoking the `AutoFitColumnsAsync` method in 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) 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" %} @@ -427,8 +462,7 @@ In Gantt chart, you can automatically adjust specific column width based on the @using Syncfusion.Blazor.Gantt - + @@ -495,9 +529,9 @@ In Gantt chart, you can automatically adjust specific column width based on the {% previewsample "https://blazorplayground.syncfusion.com/embed/hNByNEMaUcklmdnG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Change tree/expander column +## Change tree column -The tree/expander column is a column in the Gantt Chart component that has icons to expand or collapse the parent records. You can define the tree column index in the Gantt Chart component by using the `TreeColumnIndex` property and the default value of this property is `0`. The following code example shows how to use this property. +The Syncfusion® 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. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -547,16 +581,32 @@ The tree/expander column is a column in the Gantt Chart component that has icons {% previewsample "https://blazorplayground.syncfusion.com/embed/BNhItaiEAlXxBwJd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Show or hide columns dynamically +## Show or hide columns + +The Syncfusion® Blazor Gantt Chart component allows dynamic control over column visibility using built-in properties and methods. + +### Using methods + +You can dynamically show or hide columns using the [ShowColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ShowColumnsAsync_System_String___System_String_) and [HideColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_HideColumnsAsync_System_String___System_String_) methods. These methods accept either a single value or an array of values, and a second parameter to specify whether the value refers to the column's `HeaderText` or `Field`. -You can show or hide gantt component columns dynamically using external buttons by invoking the `ShowColumnsAsync` or `HideColumnsAsync` method. +**Based on header text:** + +To control visibility using the column's header text: + +- Pass the header text (or array of header texts) as the first parameter. +- Specify `HeaderText` as the second parameter. + +The following example demonstrates hiding and showing the **Duration** column using button clicks: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt - - + +
+ + +
@@ -573,17 +623,102 @@ You can show or hide gantt component columns dynamically using external buttons @code{ public SfGantt Gantt; private List TaskCollection { get; set; } - private string[] ColumnList = {"TaskName", "StartDate"}; + private string[] ColumnList = {"Duration"}; + + public void show() { + this.Gantt.ShowColumnsAsync(ColumnList, "HeaderText"); + } + + public void hide() { + this.Gantt.HideColumnsAsync(ColumnList, "HeaderText"); + } + + protected override void OnInitialized() + { + this.TaskCollection = GetTaskCollection(); + } + 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; } + } + + public static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }, + }; + return Tasks; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBestMfJfMfjSst?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +**Based on field:** + +To control visibility using the column's field name: + +- Pass the field name (or array of field names) as the first parameter. +- Specify `Field` as the second parameter. + +The following example demonstrates hiding and showing the **TaskName** and **Duration** columns using button clicks: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt + +
+ + +
+ + + + + + + + + + + + + +@code{ + public SfGantt Gantt; + private List TaskCollection { get; set; } + private string[] ColumnList = {"TaskName", "Duration"}; + public void show() { this.Gantt.ShowColumnsAsync(ColumnList, "Field"); } + public void hide() { this.Gantt.HideColumnsAsync(ColumnList, "Field"); } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + public class TaskData { public int TaskID { get; set; } @@ -615,21 +750,32 @@ You can show or hide gantt component columns dynamically using external buttons {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthINYsEAPMbEnXr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVyiDspzzqKOYOE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Controlling Gantt actions -## Controlling Gantt column actions +The Syncfusion® Blazor Gantt Chart component allows fine-grained control over column-level actions such as editing, filtering, sorting, resizing, and reordering. These actions can be enabled or disabled individually using the following properties in the [GanttColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html) configuration: -You can enable or disable gantt component action for a particular column by setting the `AllowFiltering`, `AllowSorting`, `AllowReordering`, and `AllowEditing` properties. +| Property | Description | +|----------|-------------| +| [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_AllowEditing) | Enables or disables editing for a column. | +| [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_AllowFiltering) | Enables or disables filtering for a column. | +| [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_AllowSorting) | Enables or disables sorting for a column. | +| [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_AllowReordering) | Enables or disables reordering for a column. | +| [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_AllowResizing) | Enables or disables resizing for a column. | + +> **Note:** These settings are applied per column and do not affect global Gantt behavior. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt - + + - + @@ -641,10 +787,12 @@ You can enable or disable gantt component action for a particular column by sett @code{ public SfGantt Gantt; private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + public class TaskData { public int TaskID { get; set; } @@ -677,22 +825,68 @@ You can enable or disable gantt component action for a particular column by sett {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhyXEMEgbFSXRrx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLoCjCQLJZKGdyh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Responsive columns + +The Syncfusion® 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 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. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt + + + + + + + + + + +@code{ + private List TaskCollection { get; set; } + + protected override void OnInitialized() + { + this.TaskCollection = GetTaskCollection(); + } -## Column type + 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; } + } -Column type can be specified using the `GanttColumn.Type` property. It specifies the type of data the column binds. If the `GanttColumn.Format` is defined for a column, the column uses `GanttColumn.Type` to select the appropriate format option number or date. + public static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } + }; + return Tasks; + } +} -Gantt column supports the following types: +{% endhighlight %} +{% endtabs %} -* String -* Number -* Boolean -* Date -* DateTime -* DateOnly -* TimeOnly +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhyiNDuKAHMJvWZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> If the `GanttColumn.Type` is not defined, it will be determined from the first record of the `DataSource`. If the first record of the `DataSource` is null/blank value for a column then it is necessary to define the `GanttColumn.Type` for that column. -N> The `DateOnly` and `TimeOnly` formats are supported in custom columns in the Gantt Chart. diff --git a/blazor/gantt-chart/context-menu.md b/blazor/gantt-chart/context-menu.md index d250d79f80..bea77ba1e1 100644 --- a/blazor/gantt-chart/context-menu.md +++ b/blazor/gantt-chart/context-menu.md @@ -9,7 +9,9 @@ documentation: ug # Context Menu in Blazor Gantt Chart Component -The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component allows you to perform quick actions by using the context menu. When right-clicking the context menu, the context menu options will be shown. To enable this feature, set the [EnableContextMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableContextMenu) to “true”. The default context menu options are enabled using the [GanttEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html) property. The context menu options can be customized using the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ContextMenuItems) property. +The Blazor Gantt Chart component provides quick access to actions through a context menu. On right-click, context menu options are displayed based on the clicked element. + +To enable this feature, set the [EnableContextMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableContextMenu) to **true**. The context menu options can be customized using the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ContextMenuItems) property. The default items are listed in the following table: @@ -33,6 +35,7 @@ Items| Description {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt + @@ -41,10 +44,12 @@ Items| Description @code { private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + public class TaskData { public int TaskID { get; set; } @@ -80,16 +85,15 @@ Items| Description ## Custom context menu items -The custom context menu items can be added by defining the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ContextMenuItems) as a collection of [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html). Actions for these customized items can be defined in the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_ContextMenuItemClicked) event. - -The following sample code demonstrates defining a custom context menu item and its corresponding action in the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_ContextMenuItemClicked) event. +You can configure custom context menu items by assigning a collection of `ContextMenuItemModel` to the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ContextMenuItems) property. To define actions for these items, use the [ContextMenuItemClicked](https://blazor.syncfusion.com/documentation/gantt-chart/events#contextmenuitemclicked) event. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids - + + @@ -97,20 +101,23 @@ The following sample code demonstrates defining a custom context menu item and i @code { public List TaskCollection { get; set; } - private SfGantt Gantt; + private SfGantt GanttInstance; + private List contextMenuItems = new List() { new ContextMenuItemModel(){Text="Refresh", Target=".e-content",Id="Refresh"} }; + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + private async void ContextMenuItemClickedHandler(ContextMenuClickEventArgs args) { if(args.Item.Id == "Refresh") { - await Gantt.RefreshAsync(); + await GanttInstance.RefreshAsync(); } } @@ -148,17 +155,16 @@ The following sample code demonstrates defining a custom context menu item and i ## Built-in and custom context menu items -Gantt Chart has an option to use both built-in and custom context menu items at the same time. - -The following sample code demonstrates defining built-in and custom context menu items and custom context menu item corresponding action in the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_ContextMenuItemClicked) event, +You can configure built-in and custom context menu items at the same time in the Gantt Chart by assigning a collection of `ContextMenuItemModel` to the `[ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ContextMenuItems) property. The corresponding actions for custom items are handled through the [ContextMenuItemClicked](https://blazor.syncfusion.com/documentation/gantt-chart/events#contextmenuitemclicked) event. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids - + + @@ -166,18 +172,21 @@ The following sample code demonstrates defining built-in and custom context menu + @code { public List TaskCollection { get; set; } - private SfGantt Gantt; + private SfGantt GanttInstance; + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + private async void ContextMenuItemClickedHandler(ContextMenuClickEventArgs args) { - if (args.Item.Id == "Refresh") + if (args.Item.Id == "copywithheader") { - await Gantt.RefreshAsync(); + await GanttInstance.CopyAsync(true); } } public class TaskData @@ -209,13 +218,17 @@ The following sample code demonstrates defining built-in and custom context menu {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrSiZDEUogRNlUf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLoWNWHhsckRdfz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Sub context menu items -The sub-context menu items can be added by defining the collection of **MenuItems** for **Items** Property in [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ContextMenuItems). Actions for these customized items can be defined in the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_ContextMenuItemClicked) event. +To configure nested context menu items (sub-menus) in the Blazor Gantt Chart, follow these steps: -The following sample code demonstrates defining the sub-context menu item and its corresponding action in the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_ContextMenuItemClicked) event, +1. Define a list of `ContextMenuItemModel` objects using the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ContextMenuItems) property. +2. Add sub-items by assigning a collection of `MenuItems` to the `Items` property within each `ContextMenuItemModel`. +3. Use the [ContextMenuItemClicked](https://blazor.syncfusion.com/documentation/gantt-chart/events#contextmenuitemclicked) event to handle actions for individual menu items. + +The following example demonstrates how to configure a sub-context menu titled **Gantt Action**, which includes the sub-items **Copy with headers** and **Edit**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -236,19 +249,25 @@ The following sample code demonstrates defining the sub-context menu item and it private SfGantt Gantt; private List contextMenuItems = new List() { - new ContextMenuItemModel{Text="Gantt Action",Target=".e-content",Id="GanttAction", - Items=new List(){new MenuItem {Text="Refresh",Id= "Refresh"},new MenuItem {Text="Edit",Id= "Edit"} } } + new ContextMenuItemModel{ + Text="Gantt Action",Target=".e-content",Id="GanttAction", + Items=new List(){ + new MenuItem {Text="Copy with headers",Id= "copywithheader"}, + new MenuItem {Text="Edit",Id= "Edit"} + } + } }; protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + public async void ContextMenuItemClickedHandler(ContextMenuClickEventArgs args) { - if (args.Item.Id == "Refresh") + if (args.Item.Id == "copywithheader") { - await Gantt.RefreshAsync(); + await Gantt.CopyAsync(true); } if (args.Item.Id == "Edit") { @@ -286,13 +305,13 @@ The following sample code demonstrates defining the sub-context menu item and it {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hthyDaCuziCqRiFF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLSMDsnBVFIKLRF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Disable the context menu for specific columns -Context Menu can be prevented for specific columns using [ContextMenuOpen](https://blazor.syncfusion.com/documentation/gantt-chart/events#contextmenuopen) event of Gantt. This event will be triggered before opening the ContextMenu. You can prevent the context menu from opening by defining the **Cancel** arguments of ContextMenuOpen to **false**. +To disable the context menu for specific columns in the Gantt Chart, use the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/gantt-chart/events#contextmenuopen) event. This event is triggered before the context menu is displayed, and setting the `Cancel` argument to **false** will disable the menu for the targeted columns. -The following sample code demonstrates how to disable the context for specific column using event arguments of ContextMenuOpen event, +The following sample code demonstrates how to disable the context menu for the **Duration** column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -314,17 +333,20 @@ The following sample code demonstrates how to disable the context for specific c { this.TaskCollection = GetTaskCollection(); } + private List contextMenuItems = new List() { new ContextMenuItemModel(){Text="Refresh", Target=".e-content",Id="refresh"} }; + public void OnContextMenuOpen(ContextMenuOpenEventArgs Args) { if (Args.Column != null && Args.Column.Field == "Duration") { - Args.Cancel = true; // To prevent the context menu from opening + Args.Cancel = true; // To prevent the context menu from opening. } } + private async void ContextMenuItemClickedHandler(ContextMenuClickEventArgs args) { if (args.Item.Id == "refresh") @@ -365,11 +387,12 @@ The following sample code demonstrates how to disable the context for specific c {% previewsample "https://blazorplayground.syncfusion.com/embed/BXVeXaiOJCAcXLUo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## Disable context menu items dynamically -You can enable or disable the context menu items using the **Disabled** property. Here, you can enable and disable the **Edit** context menu items in [ContextMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_ContextMenuOpen) event of Gantt. This event will be triggered before opening the ContextMenu. You can disable the context menu item by defining the corresponding context menu items **Disabled** property as **true**. +To dynamically disable specific context menu items based on conditions, set the `Disabled` property to **true** within the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/gantt-chart/events#contextmenuopen) event of the Gantt Chart. -The following sample code demonstrates how to enable or disable context menu items dynamically in Gantt using event arguments of [ContextMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_ContextMenuOpen) event, +The following sample code demonstrates how to disable the context menu items for the **Duration** column, while keeping it enabled for the remaining columns. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -391,13 +414,18 @@ The following sample code demonstrates how to enable or disable context menu ite private List contextMenuItems = new List() { new ContextMenuItemModel{Text="Gantt Action",Target=".e-content",Id="GanttAction", - Items=new List(){new MenuItem{Text="Refresh",Id="Refresh"},new MenuItem{Text="Edit",Id= "Edit"}}} + Items=new List(){ + new MenuItem{Text="Refresh",Id="Refresh"}, + new MenuItem{Text="Edit",Id= "Edit"} + } + } }; protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + public async void ContextMenuItemClickedHandler(ContextMenuClickEventArgs args) { if (args.Item.Id == "Refresh") @@ -409,18 +437,17 @@ The following sample code demonstrates how to enable or disable context menu ite await Gantt.OpenEditDialogAsync(); } } + public void OnContextMenuOpen(ContextMenuOpenEventArgs Args) { -#pragma warning disable BL0005 - if (Args.Column != null && Args.Column.Field == "Duration") // You can check condition based on your requirement + if (Args.Column != null && Args.Column.Field == "Duration") { - Args.ContextMenu.Items[0].Disabled = true; // To disable edit context menu item + Args.ContextMenu.Items[0].Disabled = true; // To disable edit context menu item. } else { - Args.ContextMenu.Items[0].Disabled = false; // To enable edit context menu item + Args.ContextMenu.Items[0].Disabled = false; // To enable edit context menu item. } -#pragma warning restore BL0005 } public class TaskData diff --git a/blazor/gantt-chart/data-binding.md b/blazor/gantt-chart/data-binding.md index e3578139c0..b207b1bbf5 100644 --- a/blazor/gantt-chart/data-binding.md +++ b/blazor/gantt-chart/data-binding.md @@ -9,7 +9,8 @@ documentation: ug # Data Binding in Blazor Gantt Chart Component -The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) uses [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), which supports both RESTful JSON data services binding and IEnumerable binding. The `DataSource` value can be assigned either with the property values from `SfDataManager` or list of business objects. +Data binding connects the Blazor Gantt component to project data sources, enabling dynamic visualization and management of project information. The component supports both local and remote data integration through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DataSource) property, which accepts either a list of business objects or a [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) instance. + It supports the following kinds of data binding method: * List binding @@ -19,63 +20,71 @@ N> When using `DataSource` as `IEnumerable`, component type(TValue) will be i ## List binding -To bind list binding to the Gantt component, you can assign a IEnumerable object to the `DataSource` property. The list data source can also be provided as an instance of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or by using `SfDataManager` component. +To bind list binding to the Gantt component, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DataSource) property. The list data source can also be provided as an instance of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or by using `SfDataManager` component. ### Hierarchical data Binding -The `Child` property is used to map the child records in hierarchical data. The following code example shows how to bind the hierarchical list data into the Gantt Chart component. +Hierarchical data binding organizes complex parent-child relationships through nested object structures. Each parent task contains multiple child tasks through the `Child` field mapping, creating natural tree structures that represent project hierarchies. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt + - + @code{ -private List TaskCollection { get; set; } -protected override void OnInitialized() -{ - this.TaskCollection = GetTaskCollection(); -} + private List TaskCollection { get; set; } + protected override void OnInitialized() + { + this.TaskCollection = GetTaskCollection(); + } -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 List SubTasks { get; set; } -} + 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 List SubTasks { get; set; } + } -public static List GetTaskCollection() -{ - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), SubTasks = (new List () { new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, }, new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, }, new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30 }, }) }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), SubTasks = (new List () { new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, }, new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40 }, new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, } }) } - }; - return Tasks; -} + public static List GetTaskCollection() + { + List Tasks = new List() { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), SubTasks = (new List () { new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, }, new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, }, new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30 }, }) }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), SubTasks = (new List () { new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, }, new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40 }, new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, } }) } + }; + return Tasks; + } } -``` -N> * Indent/Outdent is not supported for Hierarchy Data. -
* ExpandCollapse State maintenance is not supported for Hierarchy Data. -
* Row Drag and Drop feature is not supported for Hierarchy Data. +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXryWDrzgHBfdbbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +N> * Indent/Outdent is not supported for hierarchy data. +
* ExpandCollapse state maintenance is not supported for hierarchy data. +
* Row drag and drop feature is not supported for hierarchy data. -### Self-Referential / Flat Data Binding +### Self-referential data structure -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. +Self-referential data binding uses flat data structures where tasks reference their relationships through ID fields. Map unique task identifiers to the [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id) field and parent identifiers to 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) to establish task hierarchies without nested objects. -* **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`. +This approach enables the component to reconstruct hierarchical tree structures from relational data, making it ideal for database-driven applications where parent-child relationships are maintained through foreign key references. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - + @@ -88,47 +97,49 @@ The Gantt Chart component uses a self-referential data binding model to represen 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 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 GetTaskCollection() + { + List Tasks = new List() { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2021, 04, 05), EndDate = new DateTime(2021, 04, 21), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2021, 04, 05), Duration = "4", Progress = 50, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2021, 04, 05), Duration = "4", Progress = 50, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Prepare product sketch and notes", StartDate = new DateTime(2021, 04, 05), Duration = "2", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Concept approval", StartDate = new DateTime(2021, 04, 08), EndDate = new DateTime(2021, 04, 08), Duration="0", ParentID = 1 } + }; + return Tasks; } - - public static List GetTaskCollection() { - List Tasks = new List () { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21) }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21) }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } - }; - return Tasks; -} } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhSCDrpKdvgSTeD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### DynamicObject binding -Gantt Chart is a generic component which is strongly bound to a model type. There are cases when the model type is unknown during compile type. In such cases you can bind data to the gantt chart as list of **DynamicObject**. +To handle scenarios where the data model is not defined at compile time, the Gantt Chart can be bound to a list of **DynamicObject** using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DataSource) property. This enables full support for data operations and editing without requiring a strongly typed model. -**DynamicObject** can be bound to gantt chart by assigning to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DataSource) property. Gantt Chart can also perform all kind of supported data operations and editing in DynamicObject. +> The [GetDynamicMemberNames](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject.getdynamicmembernames?view=net-8.0) method of the `DynamicObject` class must be overridden to return the property names required for rendering, data operations, editing, and other related functionalities when using **DynamicObject** with the Gantt Chart. -N> The [GetDynamicMemberNames](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject.getdynamicmembernames?view=net-8.0) method of DynamicObject class must be overridden and return the property names to render and perform data operations, editing etc., while using DynamicObject. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using System.Dynamic - + - + @@ -138,7 +149,6 @@ N> The [GetDynamicMemberNames](https://learn.microsoft.com/en-us/dotnet/api/syst @code { - SfGantt GanttChart; private string NumberFormat = "C"; private static List Data = new List(); private List GanttDynamicData { get; set; } @@ -162,19 +172,19 @@ N> The [GetDynamicMemberNames](https://learn.microsoft.com/en-us/dotnet/api/syst int range = (DateTime.Today - start).Days; DateTime startingDate = start.AddDays(ran.Next(range)); dynamic ParentRecord = new DynamicDictionary(); - ParentRecord.TaskId = ++ParentRecordID; + ParentRecord.TaskID = ++ParentRecordID; ParentRecord.TaskName = "Parent Task " + i; ParentRecord.StartDate = startingDate; ParentRecord.Progress = ran.Next(10, 100); ParentRecord.Duration = ParentRecordID % 2 == 0 ? (32).ToString() : (76).ToString(); - ParentRecord.ParentId = null; + ParentRecord.ParentID = null; Data.Add(ParentRecord); AddChildRecords(ParentRecordID); } return Data; } - public static void AddChildRecords(int ParentId) + public static void AddChildRecords(int ParentID) { for (var i = 1; i < 4; i++) { @@ -183,12 +193,12 @@ N> The [GetDynamicMemberNames](https://learn.microsoft.com/en-us/dotnet/api/syst int range = (DateTime.Today - start).Days; DateTime startingDate = start.AddDays(ran.Next(range)); dynamic ChildRecord = new DynamicDictionary(); - ChildRecord.TaskId = ++ParentRecordID; + ChildRecord.TaskID = ++ParentRecordID; ChildRecord.TaskName = "Child Task " + ++ChildRecordID; ChildRecord.StartDate = startingDate; ChildRecord.Progress = ran.Next(10, 100); ChildRecord.Duration = ParentRecordID % 3 == 0 ? (64).ToString() : (98).ToString(); - ChildRecord.ParentId = ParentId; + ChildRecord.ParentID = ParentID; Data.Add(ChildRecord); } } @@ -214,15 +224,18 @@ N> The [GetDynamicMemberNames](https://learn.microsoft.com/en-us/dotnet/api/syst } } } -``` -### ExpandoObject Binding +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLIsjrfgbLmeSRq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -Gantt is a generic component which is strongly bound to a model type. There are cases when the model type is unknown during compile type. In such cases you can bound data to the Gantt as list of ExpandoObject. +### ExpandoObject Binding -ExpandoObject can be bound to Gantt by assigning to the `DataSource` property. Gantt can also perform all kind of supported data operations and editing in ExpandoObject. +To handle scenarios where the model type is unknown at compile time, the Gantt Chart can be bound to a list of **ExpandoObject** using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DataSource) property. This enables full support for rendering, data operations, editing, and other related functionalities without requiring a strongly typed model. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using System.Dynamic @@ -237,6 +250,7 @@ ExpandoObject can be bound to Gantt by assigning to the `DataSource` property. G @code { SfGantt Gantt; private List TreeData { get; set; } + protected override void OnInitialized() { this.TreeData = GetData().ToList(); @@ -267,7 +281,7 @@ ExpandoObject can be bound to Gantt by assigning to the `DataSource` property. G } return Data; } - public static void AddChildRecords(int ParentId) + public static void AddChildRecords(int ParentID) { for (var i = 1; i < 4; i++) { @@ -281,28 +295,16 @@ ExpandoObject can be bound to Gantt by assigning to the `DataSource` property. G ChildRecord.StartDate = startingDate; ChildRecord.Progress = ran.Next(10, 100); ChildRecord.Duration = ParentRecordID % 3 == 0 ? (64).ToString() : (98).ToString(); - ChildRecord.ParentID = ParentId; + ChildRecord.ParentID = ParentID; Data.Add(ChildRecord); } } } -``` - -N> Here, we have provided list of reserved properties and the purpose used in Gantt Chart. We recommend to avoid these reserved properties for Internal purpose(To get rid of conflicts). - -Reserved keywords | Purpose ------|----- -ganttProperties | Specifies the task data details -TaskMode | Specifies the mode of task -childRecords | Specifies the childRecords of a parentData -hasChildRecords | Specifies whether the record contains child records -expanded | Specifies whether the child records are expanded -parentRecord | Specifies the parentItem of childRecords -index | Specifies the index of current record -level | Specifies the hierarchy level of record -uniqueID | Specifies the unique ID of a record -parentUniqueID | Specifies the parent Unique ID of a record -checkboxState | Specifies the checkbox state of a record + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVyWNrfUFwbmcnX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Observable collection and INotifyPropertyChanged @@ -310,148 +312,150 @@ The Gantt chart supports to automatically update data based on `INotifyCollectio ### Observable collection -The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-6.0) (dynamic data collection) provides notifications when items are added, removed, and moved. The implemented [INotifyCollectionChanged](https://learn.microsoft.com/en-us/dotnet/api/system.collections.specialized.inotifycollectionchanged?view=net-6.0) provides notification when the dynamic changes of adding, removing, moving, and clearing the collection occur. +To handle dynamic changes in the data source, the Gantt Chart supports binding to an [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-6.0). This collection implements the [INotifyCollectionChanged](https://learn.microsoft.com/en-us/dotnet/api/system.collections.specialized.inotifycollectionchanged?view=net-6.0) interface, which automatically notifies the UI when items are added, removed, moved, or cleared. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Buttons -@using System.Collections.ObjectModel; -@using System.ComponentModel; +@using System.Collections.ObjectModel @using System.Collections.Specialized -
-
- Add Data - Delete Data -
- - - -
+ +
+
+ Add Data + Delete Data +
+
+ @StatusMessage +
+ + + + + +
+ @code { public ObservableCollection ObservableData { get; set; } + public string StatusMessage { get; set; } = ""; protected override void OnInitialized() { ObservableData = ProjectNewData(); + ObservableData.CollectionChanged += Records_CollectionChanged; } + public void AddRecord() { - ObservableData.Add(new TaskData() { TaskId=41,TaskName="New Task",StartDate= new DateTime(2021,04,04),Duration="4" }); + int newId = ObservableData.Any() ? ObservableData.Max(t => t.TaskID) + 1 : 1; + Random rand = new Random(); + + int randomProgress = rand.Next(0, 101); + int randomDuration = rand.Next(1, 6); + + ObservableData.Add(new TaskData() + { + TaskID = newId, + TaskName = $"New Task {newId}", + StartDate = DateTime.Now, + Duration = randomDuration.ToString(), + Progress = randomProgress + }); } + public void DeleteRecord() { - if (ObservableData.Count() != 0) + if (ObservableData.Count != 0) { - int deleteRecordTaskId = ObservableData.First().TaskId; + int deleteRecordTaskID = ObservableData.First().TaskID; ObservableData.Remove(ObservableData.First()); - RemoveChild(deleteRecordTaskId); + RemoveChild(deleteRecordTaskID); } } - public void RemoveChild(int id){ - ObservableCollection childRecords = new ObservableCollection(); - for(int j= 0 ; j< ObservableData.Count();j++) - { - if(id == ObservableData[j].ParentId ) - childRecords.Add(ObservableData[j]); - } - - for(int i= childRecords.Count()-1 ; i >= 0 ;i--) + public void RemoveChild(int id) + { + var childRecords = ObservableData.Where(t => t.ParentID == id).ToList(); + foreach (var child in childRecords) { - int deleteRcordid = childRecords[i].TaskId; - RemoveChild(deleteRcordid); - ObservableData.Remove(childRecords[i]); + RemoveChild(child.TaskID); + ObservableData.Remove(child); } } - public static ObservableCollection ProjectNewData() + + public ObservableCollection ProjectNewData() { - ObservableCollection Tasks = new ObservableCollection() { - new TaskData() { TaskId = 1, TaskName = "Product concept ", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 08), Duration = "5days" }, - new TaskData() { TaskId = 2, TaskName = "Define the product usage", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 08), Duration = "3", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Define the target audience", EndDate = new DateTime(2021, 04, 04), Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Prepare product sketch and notes", StartDate = new DateTime(2021, 04, 05), Duration = "2", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Concept approval", StartDate = new DateTime(2021, 04, 08), EndDate = new DateTime(2021, 04, 08), Duration="0", ParentId = 1 }, - new TaskData() { TaskId = 6, TaskName = "Market research", StartDate = new DateTime(2021, 04, 09), EndDate = new DateTime(2021, 04, 18), Duration = "4", Progress = 30 }, - new TaskData() { TaskId = 7, TaskName = "Demand analysis", Duration = "4", Progress = 40, ParentId = 6 }, - new TaskData() { TaskId = 8, TaskName = "Customer strength", StartDate = new DateTime(2021, 04, 09), EndDate = new DateTime(2021, 04, 12), Duration = "4", Progress = 30, ParentId = 7 }, - new TaskData() { TaskId = 9, TaskName = "Market opportunity analysis", StartDate = new DateTime(2021, 04, 09), EndDate = new DateTime(2021, 04, 012), Duration="4", ParentId= 7 }, - new TaskData() { TaskId = 10, TaskName = "Competitor analysis", StartDate = new DateTime(2021, 04, 15), EndDate = new DateTime(2021, 04, 18), Duration = "4", Progress = 30, ParentId= 6 }, - new TaskData() { TaskId = 11, TaskName = "Product strength analysis", StartDate = new DateTime(2021, 04, 15), EndDate = new DateTime(2021, 04, 18), Duration = "4", Progress = 40, ParentId = 6 }, - new TaskData() { TaskId = 12, TaskName = "Research completed", StartDate = new DateTime(2021, 04, 18), EndDate = new DateTime(2021, 04, 18), Duration = "0", Progress = 30, ParentId = 6 }, - new TaskData() { TaskId = 13, TaskName = "Product design and development", StartDate = new DateTime(2021, 04, 19), EndDate = new DateTime(2021, 05, 16), Duration="20" }, - new TaskData() { TaskId = 14, TaskName = "Functionality design", StartDate = new DateTime(2021, 04, 19), EndDate = new DateTime(2021, 04, 23), Duration = "3", Progress = 30, ParentId = 13 }, - new TaskData() { TaskId = 15, TaskName = "Quality design", StartDate = new DateTime(2021, 04, 19), EndDate = new DateTime(2021, 04, 23), Duration = "3", Progress = 40, ParentId = 13 }, - new TaskData() { TaskId = 16, TaskName = "Define reliability", StartDate = new DateTime(2021, 04, 24), EndDate = new DateTime(2021, 04, 25), Duration = "2", Progress = 30, ParentId = 13 }, - new TaskData() { TaskId = 17, TaskName = "Identifying raw materials", StartDate = new DateTime(2021, 04, 24), EndDate = new DateTime(2021, 04, 25), Duration="2", ParentId=13 }, - new TaskData() { TaskId = 18, TaskName = "Define cost plan", StartDate = new DateTime(2021, 04, 26), EndDate = new DateTime(2021, 04, 29), Duration = "2", Progress = 30, ParentId=13 }, - new TaskData() { TaskId = 19, TaskName = "Estimate manufacturing cost", StartDate = new DateTime(2021, 04, 26), EndDate = new DateTime(2021, 04, 29), Duration = "2", Progress = 40, ParentId = 18 }, - new TaskData() { TaskId = 20, TaskName = "Estimate selling cost", StartDate = new DateTime(2021, 04, 26), EndDate = new DateTime(2021, 04, 29), Duration = "2", Progress = 30, ParentId = 18 }, - new TaskData() { TaskId = 21, TaskName = "Development of final design", StartDate = new DateTime(2021, 04, 30), EndDate = new DateTime(2021, 05, 08), Duration="7", ParentId=13 }, - new TaskData() { TaskId = 22, TaskName = "Develop dimensions and design", StartDate = new DateTime(2021, 04, 30), EndDate = new DateTime(2021, 05, 01), Duration = "2", Progress = 30, ParentId=21 }, - new TaskData() { TaskId = 23, TaskName = "Develop designs to meet industry", StartDate = new DateTime(2021, 05, 02), EndDate = new DateTime(2021, 05, 03), Duration = "2", Progress = 40, ParentId = 21 }, - new TaskData() { TaskId = 24, TaskName = "Include all the details", StartDate = new DateTime(2021, 05, 06), EndDate = new DateTime(2021, 05, 08), Duration = "3", Progress = 30, ParentId = 21 }, - new TaskData() { TaskId = 25, TaskName = "CAD - Computer Aided Design", StartDate = new DateTime(2021, 05, 09), EndDate = new DateTime(2021, 05, 13), Duration="3" }, - new TaskData() { TaskId = 26, TaskName = "CAM - Computer Aided Manufacturing", StartDate = new DateTime(2021, 05, 14), EndDate = new DateTime(2021, 05, 16), Duration = "3", Progress = 30 }, - new TaskData() { TaskId = 27, TaskName = "Finalize the design", StartDate = new DateTime(2021, 04, 16), EndDate = new DateTime(2021, 04, 16), Duration = "0", Progress = 40 }, - new TaskData() { TaskId = 28, TaskName = "Prototype testing", StartDate = new DateTime(2021, 05, 17), EndDate = new DateTime(2021, 05, 22), Duration = "4", Progress = 30 }, - new TaskData() { TaskId = 29, TaskName = "Include feedback", StartDate = new DateTime(2021, 05, 17), EndDate = new DateTime(2021, 05, 22), Duration="4" }, - new TaskData() { TaskId = 30, TaskName = "Manufacturing", StartDate = new DateTime(2021, 05, 23), EndDate = new DateTime(2021, 05, 29), Duration = "5", Progress = 30 }, - new TaskData() { TaskId = 31, TaskName = "Assembling material into finished goods", StartDate = new DateTime(2021, 05, 30), EndDate = new DateTime(2021, 06, 05), Duration = "5", Progress = 40 }, - new TaskData() { TaskId = 32, TaskName = "Final product development", StartDate = new DateTime(2021, 06, 06), EndDate = new DateTime(2021, 06, 13), Duration = "6", Progress = 30 }, - new TaskData() { TaskId =33, TaskName = "Important improvement", StartDate = new DateTime(2021, 06, 06), EndDate = new DateTime(2021, 06, 10), Duration="3", ParentId=32 }, - new TaskData() { TaskId = 34, TaskName = "Customer testing and feedback", StartDate = new DateTime(2021, 06, 11), EndDate = new DateTime(2021, 06, 13), Duration = "3", Progress = 30, ParentId=32 }, - new TaskData() { TaskId = 35, TaskName = "Final product development", StartDate = new DateTime(2021, 06, 14), EndDate = new DateTime(2021, 06, 19), Duration = "4", Progress = 40 }, - new TaskData() { TaskId = 36, TaskName = "Important improvement", StartDate = new DateTime(2021, 06, 14), EndDate = new DateTime(2021, 06, 19), Duration = "4", Progress = 30, ParentId = 35 }, - new TaskData() { TaskId = 37, TaskName = "Address any unforeseen issues", StartDate = new DateTime(2021, 06, 14), EndDate = new DateTime(2021, 06, 19), Duration = "4", Progress = 30, ParentId=35 }, - new TaskData() { TaskId = 38, TaskName = "Finalize the product ", StartDate = new DateTime(2021, 06, 20), EndDate = new DateTime(2021, 07, 01), Duration = "8", Progress = 40 }, - new TaskData() { TaskId = 39, TaskName = "Branding the product", StartDate = new DateTime(2021, 06, 20), EndDate = new DateTime(2021, 06, 25), Duration = "4", Progress = 30, ParentId = 38 }, - new TaskData() { TaskId=40, TaskName="Marketing and presales", StartDate=new DateTime(2021,06,26), EndDate=new DateTime(2021,07,01), ParentId=38, Duration="4" } - }; - Tasks.CollectionChanged += records_CollectionChanged; - return Tasks; + return new ObservableCollection() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08) }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } + }; } - public static void records_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e) + public void Records_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e) { - // Triggers when collection changed + switch (e.Action) + { + case NotifyCollectionChangedAction.Add: + StatusMessage = $"Task added: {((TaskData)e.NewItems[0]).TaskName}"; + break; + case NotifyCollectionChangedAction.Remove: + StatusMessage = $"Task removed: {((TaskData)e.OldItems[0]).TaskName}"; + break; + } } - - public class TaskData + public class TaskData { - public int TaskId { get; set; } - public string TaskName{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 string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } - + public int? ParentID { get; set; } } } -``` -![Observable collection in Blazor Gantt Chart](images/blazor-gantt-chart-observable-collection.PNG) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVeMXhmBmWiglpH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### INotifyPropertyChanged -The Gantt chart provides support to update its data without any additional refresh call when changing property value of item if an item implements [INotifyPropertyChanged](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.inotifypropertychanged?view=net-6.0) interface. `INotifyPropertyChanged` interface is used to notify, that a property value has changed. +The Gantt chart provides support to update its data automatically when an item's property value changes, if the item implements the [INotifyPropertyChanged](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.inotifypropertychanged?view=net-6.0) interface. + +This interface is used to notify that a property value has changed. For example, `TaskData` raises the `PropertyChanged` event when **TaskName** is updated, allowing Gantt to reflect the change without a manual refresh. -In the below example, `TaskData` implements `INotifyPropertyChanged` and it raises the event when the TaskName property value was changed. Gantt chart automatically updates its property values are changed in data object by listening to `PropertyChanged` event. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Buttons -@using System.Collections.ObjectModel; -@using System.ComponentModel; -
-
- Update Data -
- - - -
+@using System.Collections.ObjectModel +@using System.ComponentModel + +
+
+ Update Data +
+ + + + + + +
+ @code { public ObservableCollection ObservableData { get; set; } @@ -459,125 +463,99 @@ In the below example, `TaskData` implements `INotifyPropertyChanged` and it rais { ObservableData = ProjectNewData(); } - + public void UpdateRecord() { - if (ObservableData.Count() != 0) + if (ObservableData.Count != 0) { - var name = ObservableData.First(); - name.TaskName = "Record Updated"; + var firstTask = ObservableData.First(); + firstTask.TaskName = "Record Updated"; } } - public static ObservableCollection ProjectNewData() + public ObservableCollection ProjectNewData() { - ObservableCollection Tasks = new ObservableCollection() { - new TaskData() { TaskId = 1, TaskName = "Product concept ", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 08), Duration = "5days" }, - new TaskData() { TaskId = 2, TaskName = "Define the product usage", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 08), Duration = "3", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Define the target audience", EndDate = new DateTime(2021, 04, 04), Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Prepare product sketch and notes", StartDate = new DateTime(2021, 04, 05), Duration = "2", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Concept approval", StartDate = new DateTime(2021, 04, 08), EndDate = new DateTime(2021, 04, 08), Duration="0", ParentId = 1 }, - new TaskData() { TaskId = 6, TaskName = "Market research", StartDate = new DateTime(2021, 04, 09), EndDate = new DateTime(2021, 04, 18), Duration = "4", Progress = 30 }, - new TaskData() { TaskId = 7, TaskName = "Demand analysis", Duration = "4", Progress = 40, ParentId = 6 }, - new TaskData() { TaskId = 8, TaskName = "Customer strength", StartDate = new DateTime(2021, 04, 09), EndDate = new DateTime(2021, 04, 12), Duration = "4", Progress = 30, ParentId = 7 }, - new TaskData() { TaskId = 9, TaskName = "Market opportunity analysis", StartDate = new DateTime(2021, 04, 09), EndDate = new DateTime(2021, 04, 012), Duration="4", ParentId= 7 }, - new TaskData() { TaskId = 10, TaskName = "Competitor analysis", StartDate = new DateTime(2021, 04, 15), EndDate = new DateTime(2021, 04, 18), Duration = "4", Progress = 30, ParentId= 6 }, - new TaskData() { TaskId = 11, TaskName = "Product strength analysis", StartDate = new DateTime(2021, 04, 15), EndDate = new DateTime(2021, 04, 18), Duration = "4", Progress = 40, ParentId = 6 }, - new TaskData() { TaskId = 12, TaskName = "Research completed", StartDate = new DateTime(2021, 04, 18), EndDate = new DateTime(2021, 04, 18), Duration = "0", Progress = 30, ParentId = 6 }, - new TaskData() { TaskId = 13, TaskName = "Product design and development", StartDate = new DateTime(2021, 04, 19), EndDate = new DateTime(2021, 05, 16), Duration="20" }, - new TaskData() { TaskId = 14, TaskName = "Functionality design", StartDate = new DateTime(2021, 04, 19), EndDate = new DateTime(2021, 04, 23), Duration = "3", Progress = 30, ParentId = 13 }, - new TaskData() { TaskId = 15, TaskName = "Quality design", StartDate = new DateTime(2021, 04, 19), EndDate = new DateTime(2021, 04, 23), Duration = "3", Progress = 40, ParentId = 13 }, - new TaskData() { TaskId = 16, TaskName = "Define reliability", StartDate = new DateTime(2021, 04, 24), EndDate = new DateTime(2021, 04, 25), Duration = "2", Progress = 30, ParentId = 13 }, - new TaskData() { TaskId = 17, TaskName = "Identifying raw materials", StartDate = new DateTime(2021, 04, 24), EndDate = new DateTime(2021, 04, 25), Duration="2", ParentId=13 }, - new TaskData() { TaskId = 18, TaskName = "Define cost plan", StartDate = new DateTime(2021, 04, 26), EndDate = new DateTime(2021, 04, 29), Duration = "2", Progress = 30, ParentId=13 }, - new TaskData() { TaskId = 19, TaskName = "Estimate manufacturing cost", StartDate = new DateTime(2021, 04, 26), EndDate = new DateTime(2021, 04, 29), Duration = "2", Progress = 40, ParentId = 18 }, - new TaskData() { TaskId = 20, TaskName = "Estimate selling cost", StartDate = new DateTime(2021, 04, 26), EndDate = new DateTime(2021, 04, 29), Duration = "2", Progress = 30, ParentId = 18 }, - new TaskData() { TaskId = 21, TaskName = "Development of final design", StartDate = new DateTime(2021, 04, 30), EndDate = new DateTime(2021, 05, 08), Duration="7", ParentId=13 }, - new TaskData() { TaskId = 22, TaskName = "Develop dimensions and design", StartDate = new DateTime(2021, 04, 30), EndDate = new DateTime(2021, 05, 01), Duration = "2", Progress = 30, ParentId=21 }, - new TaskData() { TaskId = 23, TaskName = "Develop designs to meet industry", StartDate = new DateTime(2021, 05, 02), EndDate = new DateTime(2021, 05, 03), Duration = "2", Progress = 40, ParentId = 21 }, - new TaskData() { TaskId = 24, TaskName = "Include all the details", StartDate = new DateTime(2021, 05, 06), EndDate = new DateTime(2021, 05, 08), Duration = "3", Progress = 30, ParentId = 21 }, - new TaskData() { TaskId = 25, TaskName = "CAD - Computer Aided Design", StartDate = new DateTime(2021, 05, 09), EndDate = new DateTime(2021, 05, 13), Duration="3" }, - new TaskData() { TaskId = 26, TaskName = "CAM - Computer Aided Manufacturing", StartDate = new DateTime(2021, 05, 14), EndDate = new DateTime(2021, 05, 16), Duration = "3", Progress = 30 }, - new TaskData() { TaskId = 27, TaskName = "Finalize the design", StartDate = new DateTime(2021, 04, 16), EndDate = new DateTime(2021, 04, 16), Duration = "0", Progress = 40 }, - new TaskData() { TaskId = 28, TaskName = "Prototype testing", StartDate = new DateTime(2021, 05, 17), EndDate = new DateTime(2021, 05, 22), Duration = "4", Progress = 30 }, - new TaskData() { TaskId = 29, TaskName = "Include feedback", StartDate = new DateTime(2021, 05, 17), EndDate = new DateTime(2021, 05, 22), Duration="4" }, - new TaskData() { TaskId = 30, TaskName = "Manufacturing", StartDate = new DateTime(2021, 05, 23), EndDate = new DateTime(2021, 05, 29), Duration = "5", Progress = 30 }, - new TaskData() { TaskId = 31, TaskName = "Assembling material into finished goods", StartDate = new DateTime(2021, 05, 30), EndDate = new DateTime(2021, 06, 05), Duration = "5", Progress = 40 }, - new TaskData() { TaskId = 32, TaskName = "Final product development", StartDate = new DateTime(2021, 06, 06), EndDate = new DateTime(2021, 06, 13), Duration = "6", Progress = 30 }, - new TaskData() { TaskId =33, TaskName = "Important improvement", StartDate = new DateTime(2021, 06, 06), EndDate = new DateTime(2021, 06, 10), Duration="3", ParentId=32 }, - new TaskData() { TaskId = 34, TaskName = "Customer testing and feedback", StartDate = new DateTime(2021, 06, 11), EndDate = new DateTime(2021, 06, 13), Duration = "3", Progress = 30, ParentId=32 }, - new TaskData() { TaskId = 35, TaskName = "Final product development", StartDate = new DateTime(2021, 06, 14), EndDate = new DateTime(2021, 06, 19), Duration = "4", Progress = 40 }, - new TaskData() { TaskId = 36, TaskName = "Important improvement", StartDate = new DateTime(2021, 06, 14), EndDate = new DateTime(2021, 06, 19), Duration = "4", Progress = 30, ParentId = 35 }, - new TaskData() { TaskId = 37, TaskName = "Address any unforeseen issues", StartDate = new DateTime(2021, 06, 14), EndDate = new DateTime(2021, 06, 19), Duration = "4", Progress = 30, ParentId=35 }, - new TaskData() { TaskId = 38, TaskName = "Finalize the product ", StartDate = new DateTime(2021, 06, 20), EndDate = new DateTime(2021, 07, 01), Duration = "8", Progress = 40 }, - new TaskData() { TaskId = 39, TaskName = "Branding the product", StartDate = new DateTime(2021, 06, 20), EndDate = new DateTime(2021, 06, 25), Duration = "4", Progress = 30, ParentId = 38 }, - new TaskData() { TaskId=40, TaskName="Marketing and presales", StartDate=new DateTime(2021,06,26), EndDate=new DateTime(2021,07,01), ParentId=38, Duration="4" } - }; - return Tasks; + return new ObservableCollection() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08) }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } + }; } public class TaskData : INotifyPropertyChanged { - public int TaskId { get; set; } - private string taskName { get; set; } + public int TaskID { get; set; } + + private string taskName; public string TaskName { - get { return taskName; } + get => taskName; set { - if (value != taskName) + if (taskName != value) { taskName = value; - NotifyPropertyChanged("TaskName"); + NotifyPropertyChanged(nameof(TaskName)); } } } public DateTime StartDate { get; set; } public DateTime? EndDate { get; set; } - public string? Duration { get; set; } + public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } public event PropertyChangedEventHandler PropertyChanged; - private void NotifyPropertyChanged(String propertyName) + private void NotifyPropertyChanged(string propertyName) { - if (PropertyChanged != null) - { - PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); - } + PropertyChanged?.Invoke(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName)); } } } -``` -![Property changed in Blazor Gantt Chart](images/blazor-gantt-chart-observable-property-changed.PNG) + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVysjVQBwoWOmGQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Remote Data -To bind remote data to Gantt component, assign service data as an instance of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to the `DataSource` property or by using `SfDataManager` component. To interact with remote data source, provide the endpoint **Url**. +The Syncfusion Blazor component enables remote data binding by connecting UI components to server-side data sources. This approach facilitates fetching, displaying, and manipulating data stored on remote servers. - N> When using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) for data binding, the **TValue** must be provided explicitly in the Gantt component. -
By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses **ODataAdaptor** for remote data-binding. +To bind remote data to the Gantt component, assign service data as an instance of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to the `DataSource` property or use the `SfDataManager` component.Set the service endpoint using the **Url** property to enable data operations. -### Web API + N> When using `SfDataManager` for data binding, the **TValue** must be provided explicitly in the Gantt component. +
By default, `SfDataManager` uses **ODataAdaptor** for remote data-binding. -You can use **WebApiAdaptor** to bind datagrid with Web API created using **OData** endpoint. +### Web API adaptor + +The Gantt Chart component utilizes the **WebApiAdaptor**, an extension of the **ODataAdaptor**, for seamless integration with Web API services, including OData V4 endpoints. This adaptor supports efficient data retrieval and operations such as sorting, filtering, searching, and paging. It communicates with Web API endpoints using HTTP requests in JSON format, ensuring compatibility with OData-formatted queries for stable connectivity to remote data sources. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Data + - + @code{ public class GanttRemoteData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime? StartDate { get; set; } public int? Duration { get; set; } @@ -586,13 +564,14 @@ You can use **WebApiAdaptor** to bind datagrid with Web API created using **ODat public ListSubTasks { get; set; } } } -``` +{% endhighlight %} +{% endtabs %} -![Data Binding in Blazor Gantt Chart](images/blazor-gantt-chart-data-binding.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVoMXhzJQuKjqpZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Binding with OData v4 services +### ODataV4 adaptor -The ODataV4 is an improved version of OData protocols, and the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the [OData documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). To bind OData v4 service, use the **ODataV4Adaptor**. +The Gantt Chart component seamlessly integrates with OData V4 services via the **ODataV4Adaptor**., enabling efficient data retrieval and operations like sorting, filtering, searching, and paging using a queryable Entity Data Model (EDM), ensuring compatibility with the advanced features offered by the OData V4 protocol. For more details on OData v4 services, refer to the [OData documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). {% tabs %} @@ -756,17 +735,18 @@ N>You can find the sample for load on demand [here](https://github.com/Syncfusio ### Load child on demand -To render child records on demand, assign a remote service URL in the instance of **SfDataManager** to the **Url** property. To interact with the remote data source, provide the endpoint **URL** and also define the [GanttTaskFields.HasChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_HasChildMapping) property of Gantt Chart. -The `GanttTaskFields.HasChildMapping` property maps the field name in the data source, which denotes whether the current record holds any child records. This is useful internally to show expand icon while binding child data on demand. +To load child records dynamically, set the remote service URL in `SfDataManager.Url` and configure the [GanttTaskFields.HasChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_HasChildMapping) property. -When [LoadChildOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_LoadChildOnDemand) is disabled, all the root nodes are rendered in a collapsed state at initial load. On expanding the root node, the child nodes will be loaded from the remote server. +The `HasChildMapping` property identifies whether a record contains child items, allowing Gantt to display the expand icon and fetch child data on demand. -When [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableVirtualization) is enabled and `LoadChildOnDemand` is disabled, only the current viewport root nodes are rendered in a collapsed state. +The [LoadChildOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_LoadChildOnDemand) property, when disabled, renders all root nodes in a collapsed state initially. You can expand a node to fetch its children from the server. -When a root node is expanded, its child nodes are rendered and maintained in a collection locally, such that on consecutive expand/collapse actions on the root node, the child nodes are loaded locally instead of from the remote server. +The [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableVirtualization) property, when enabled along with `LoadChildOnDemand` disabled, renders only the visible root nodes in a collapsed state. -When the `LoadChildOnDemand` is enabled, parent records are rendered in an expanded state. +You can expand a root node to load its children, which are then cached locally. On subsequent expand/collapse actions, child records are loaded from the local cache instead of from the remote server. + +The `LoadChildOnDemand` property, when enabled, renders parent records in an expanded state by default. {% tabs %} @@ -1056,19 +1036,19 @@ N>You can find the sample for load on demand [here](https://github.com/Syncfusio ### Sending additional parameters to the server -To add a custom parameter to the data request, use the addParams method of Query class. Assign the Query object with additional parameters to the datagrid's [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) property. +To specify custom parameters in a data request, use the `addParams` method of the `Query` class. The configured `Query` object with additional parameters should be assigned to the Gantt component’s [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) property to include them in server communication. -The following sample code demonstrates sending additional paramaters using the Query property, +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor @using Syncfusion.Blazor.Data @using Syncfusion.Blazor.Gantt - + @@ -1083,62 +1063,63 @@ The following sample code demonstrates sending additional paramaters using the Q 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } } -``` + +{% endhighlight %} +{% endtabs %} ### Handling HTTP error -During server interaction from the datagrid, sometimes server-side exceptions might occur. These error messages or exception details can be acquired in client-side using the `OnActionFailure` event. +Exceptions triggered during Gantt operations can be handled effectively without interrupting the application. These errors are captured using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_OnActionFailure) event, which provides detailed information returned from the server. This allows for appropriate handling, logging, or user notification without affecting the overall workflow. -The argument passed to the `OnActionFailure` event contains the error details returned from the server. +The following sample code demonstrates notifying user when server-side exception has occurred during data operation: -The following sample code demonstrates notifying user when server-side exception has occurred, +{% tabs %} +{% highlight razor %} -```cshtml @using Syncfusion.Blazor @using Syncfusion.Blazor.Data @using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Grids -@ErrorDetails + - + - - @code{ private string ErrorDetails = ""; 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public void ActionFailure(FailureEventArgs args) + public void ActionFailure(Syncfusion.Blazor.Grids.FailureEventArgs args) { - this.ErrorDetails = "Server exception: 404 Not found"; + this.ErrorDetails = args.Error.Message.ToString(); StateHasChanged(); } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrosNrTBJxCLRgJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/gantt-chart/drag-and-drop.md b/blazor/gantt-chart/drag-and-drop.md index b75cb79198..e6bdd067ff 100644 --- a/blazor/gantt-chart/drag-and-drop.md +++ b/blazor/gantt-chart/drag-and-drop.md @@ -7,14 +7,17 @@ control: Gantt Chart documentation: ug --- -# Row Drag and Drop in Blazor Gantt Chart Component +# Row drag and drop in Blazor Gantt Chart component -You can dynamically rearrange the rows in the Gantt Chart component by using the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowRowDragAndDrop) property. Using this property, row drag and drop can be enabled or disabled in Gantt. Using this feature, rows can be dropped above and below as a sibling or child to the existing rows. +The Syncfusion® Blazor Gantt Chart component includes built-in support for row drag and drop, enabling rows to be rearranged within the Gantt chart or dropped into custom components. + +To enable this feature, set the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowRowDragAndDrop) property to **true**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt + @@ -41,18 +44,17 @@ You can dynamically rearrange the rows in the Gantt Chart component by using the private static List GetTaskCollection() { - List Tasks = new List() + return new List { - new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, - 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),TaskID = 1, TaskName = "Project initiation", 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, } + new TaskData { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07) }, + 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; } } @@ -63,12 +65,13 @@ You can dynamically rearrange the rows in the Gantt Chart component by using the ## Multiple row drag and drop -Gantt also supports dragging multiple rows at a time and dropping them on any rows above, below, or at child positions. In Gantt, you can enable the multiple drag and drop by setting the [GanttSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html) to `Multiple` and you should enable the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowRowDragAndDrop) property. +You can drag and drop multiple rows simultaneously in the Gantt Chart component. To enable this functionality, set the [GanttSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html) property to **SelectionType.Multiple** , and set the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowRowDragAndDrop) property is set to **true**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt + @@ -117,45 +120,45 @@ Gantt also supports dragging multiple rows at a time and dropping them on any ro {% previewsample "https://blazorplayground.syncfusion.com/embed/hDrojOWaVUbBQnUF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Drag and drop events - -Several events are available to customize the row drag and drop action. The following table explains about the available events and their details. - -Event Name |Description ------|----- -`OnRowDragStart` |Triggers when drag action starts in Gantt. -`RowDropped` |Triggers when a drag row was dropped on the target row. - - +{% endtabs %} -## Perform row drag and drop action programmatically +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBIMDscqxjeJlaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -Gantt provides option to perform row drag and drop action programmatically by using the [ReorderRowsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ReorderRowAsync_System_Double_System_Double_System_String_) method. This method can be used for any external actions like button click. -The following arguments are used to specify the positions to drag and drop a row: +## Customize the drag and drop action -* `FromIndexes`: Index value of source(dragging) row. -* `ToIndex`: Value of target index. -* `Position`: Drop positions such as above, below, or child. +Customize the drag and drop behavior in the Gantt component using the [RowDragStarting](https://blazor.syncfusion.com/documentation/gantt-chart/events#rowdragstarting), [RowDropping](https://blazor.syncfusion.com/documentation/gantt-chart/events#rowdropping), [RowDropped](https://blazor.syncfusion.com/documentation/gantt-chart/events#rowdropped) events. These events provide control over the drag lifecycle, allowing precise handling of row interactions. -The following code example shows how to drag and drop a row on button click action. +In this example, the row drop action is canceled when the **TaskID** is 2. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt - - - +@using Syncfusion.Blazor.Grids + +
+

@message

+
+ + + + + -@code{ +@code { public SfGantt Gantt; private List TaskCollection { get; set; } + private string message = string.Empty; + protected override void OnInitialized() { - this.TaskCollection = GetTaskCollection(); + TaskCollection = GetTaskCollection(); } - public void drag() + + public void RowDropping(RowDroppingEventArgs args) { - this.Gantt.ReorderRowAsync(2, 6, "Below"); + var draggedTask = args.Data.FirstOrDefault(); + if (draggedTask != null && draggedTask.TaskID == 2) + { + message = $"Drop cancelled for Task: {draggedTask.TaskName} (ID: {draggedTask.TaskID})"; + args.Cancel = true; + } } + public class TaskData { public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime EndDate { get; set; } + public DateTime? EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } public int? ParentID { get; set; } @@ -229,22 +248,21 @@ The following code example shows how to drag and drop a row on button click acti private static List GetTaskCollection() { - List Tasks = new List() + return new List { - new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, - 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),TaskID = 1, TaskName = "Project initiation", 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, } + new TaskData { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07) }, + 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; } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVyNuiYLzDLcwWH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDryMDhrKnUcremA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/gantt-chart/excel-export.md b/blazor/gantt-chart/excel-export.md index f2d53a6b5e..f808235610 100644 --- a/blazor/gantt-chart/excel-export.md +++ b/blazor/gantt-chart/excel-export.md @@ -9,19 +9,26 @@ documentation: ug # Excel Export in Blazor Gantt Chart Component -The excel export allows exporting GanttChart data to Excel and CSV formats. You need to use the **ExcelExportAsync** and **CsvExportAsync** method for exporting. To enable Excel export in the Gantt chart, set the [AllowExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowExcelExport) property as true. +The Syncfusion Blazor Gantt Chart component supports exporting project data to Excel and CSV formats, enabling seamless sharing, reporting, and offline analysis. + +To enable Excel or CSV export functionality, set the [AllowExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowExcelExport) property to **true**. + +You can trigger export operations using the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) methods, typically within the [OnToolbarClick](https://blazor.syncfusion.com/documentation/gantt-chart/events#ontoolbarclick) event. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - + @code{ public SfGantt Gantt; private List TaskCollection { get; set; } + public void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) { if (args.Item.Id == "GanttContainer_excelexport") @@ -40,14 +47,88 @@ The excel export allows exporting GanttChart data to Excel and CSV formats. You 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[] ResourceId { get; set; } + } + + public 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, 07), }, + 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, Predecessor="2", }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, Predecessor="3", }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 10), EndDate = new DateTime(2022, 01, 17), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, Predecessor="4", }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, Predecessor="6", }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, Predecessor="7", } + }; + return Tasks; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLSWtCyhZLeNCwH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Binding custom data source while exporting + +You can bind a custom data source for Excel or CSV export in the Blazor Gantt component by assigning it dynamically before the export begins. To achieve this, set the required data to the `DataSource` property within the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) configuration. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Navigations + + + + + + + +@code { + public SfGantt Gantt; + private List TaskCollection { get; set; } + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + private async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "GanttContainer_excelexport") + { + ExcelExportProperties exportProperties = new ExcelExportProperties + { + DataSource = TaskCollection.Take(4).ToList() + }; + await Gantt.ExportToExcelAsync(exportProperties); + } + } + + 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 string Predecessor { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } public int[] ResourceId { get; set; } } @@ -55,35 +136,185 @@ The excel export allows exporting GanttChart data to Excel and CSV formats. You { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - 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, Predecessor="2", }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, Predecessor="3", }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentId = 5, Predecessor="4", }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentId = 5, Predecessor="6", }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentId = 5, Predecessor="7", } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, Predecessor="2", }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, Predecessor="3", }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 10), EndDate = new DateTime(2022, 01, 17), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, Predecessor="4", }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, Predecessor="6", }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, Predecessor="7", } }; return Tasks; } - } -``` +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBIsjBvUszGyDBd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + +## Export Gantt Chart Data + +To export either the records visible on the current page or all records from the Gantt Chart to Excel or CSV, set the `ExcelExportProperties.ExportType` property. + +- **CurrentPage**: Exports only the records displayed on the current Gantt page. +- **AllPages**: Exports all records from the Gantt Chart. + +In the following example, [EnableRowVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableRowVirtualization) is enabled, and the export type is applied based on the selected value from a dropdown. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Navigations +@using Syncfusion.Blazor.DropDowns + + +
+ + + + +
+ + + + + + + + + + + + + + + + +@code { + public SfGantt Gantt; + private List TaskCollection { get; set; } + private string SelectedExportType = "CurrentPage"; + List DropDownValue = new List + { + new DropDownOrder { Text = "CurrentPage", Value = "CurrentPage" }, + new DropDownOrder { Text = "AllPages", Value = "AllPages" }, + }; + + private async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "GanttContainer_excelexport") + { + ExcelExportProperties exportProperties = new ExcelExportProperties + { + ExportType = SelectedExportType == "AllPages" ? Syncfusion.Blazor.Grids.ExportType.AllPages : Syncfusion.Blazor.Grids.ExportType.CurrentPage + }; + + await Gantt.ExportToExcelAsync(exportProperties); + } + } + + protected override void OnInitialized() + { + this.TaskCollection = VirtualData.GetTreeVirtualData(500); + } + + public class VirtualData + { + public static List GetTreeVirtualData(int count) + { + List DataCollection = new List(); + Random rand = new Random(); + var x = 0; + int duration = 0; + DateTime startDate = new DateTime(2000, 1, 5); + DateTime endDate = new DateTime(2000, 1, 12); + string[] assignee = { "Allison Janney", "Bryan Fogel", "Richard King", "Alex Gibson" }; + string[] reporter = { "James Ivory", "Jordan Peele", "Guillermo del Toro", "Gary Oldman" }; + for (var i = 1; i <= count / 5; i++) + { + var name = rand.Next(0, 100); + TaskData Parent = new TaskData() + { + ID = ++x, + TaskName = "Task " + x, + StartDate = startDate, + EndDate = startDate.AddDays(26), + Duration = "20", + Assignee = "Mark Bridges", + Reporter = "Kobe Bryant", + Progress = 50, + }; + DataCollection.Add(Parent); + for (var j = 1; j <= 4; j++) + { + startDate = startDate.AddDays(j == 1 ? 0 : duration + 2); + duration = 5; + DataCollection.Add(new TaskData() + { + ID = ++x, + TaskName = "Task " + x, + StartDate = startDate, + EndDate = startDate.AddDays(5), + Duration = duration.ToString(), + Assignee = assignee[j - 1], + Reporter = reporter[j - 1], + Progress = 50, + ParentID = Parent.ID, + }); + } + } + return DataCollection; + } + } + + public class TaskData + { + public int ID { get; set; } + public string TaskName { get; set; } + public DateTime? StartDate { get; set; } + public DateTime? EndDate { get; set; } + public string Duration { get; set; } + public string Assignee { get; set; } + public string Reporter { get; set; } + public int Progress { get; set; } + public int? ParentID { get; set; } + public string Predecessor { get; set; } + } + + public class DropDownOrder + { + public string Text { get; set; } + public string Value { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBIiNBPgdsTpwjo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Customize the excel export -The excel export provides an option to customize mapping of the gantt chart to excel document. +You can customize the Excel or CSV export functionality in the Gantt Chart component using the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) configuration object. -### Export hidden columns +### Include hidden columns in export -The excel export provides an option to export hidden columns of gantt chart by defining **IncludeHiddenColumn** as **true**. +To include hidden columns during Excel or CSV export in the Gantt Chart component, set [ExcelExportProperties.IncludeHiddenColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_IncludeHiddenColumn) to **true** in the export configuration. This ensures that hidden columns are included in the exported data. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - + - + @@ -100,6 +331,7 @@ The excel export provides an option to export hidden columns of gantt chart by d ExportProperties.IncludeHiddenColumn = true; if (args.Item.Id == "GanttContainer_excelexport") { + Console.WriteLine(args.Item.Id); this.Gantt.ExportToExcelAsync(ExportProperties); } else if (args.Item.Id == "GanttContainer_csvexport") @@ -114,41 +346,350 @@ The excel export provides an option to export hidden columns of gantt chart by d 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } public 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, 17), }, - 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, 17), }, - 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, } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, + 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, 17), }, + 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; } } -``` -### Theme +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVoMtWIBjILrMBQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Add header and footer to export -The Excel export also provides an option to include custom theme for exported Excel document. To apply theme in exported Excel, define the `Theme` in [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_). +To add header and footer content to exported Excel or CSV files in the Gantt component, configure the `Header` and `Footer` properties within [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) during the [OnToolbarClick](https://blazor.syncfusion.com/documentation/gantt-chart/events#ontoolbarclick) event. This allows you to define custom content that appears at the top and bottom of the exported document. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Navigations + + + + + + + +@code { + public SfGantt Gantt; + private List TaskCollection { get; set; } + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + private async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "GanttContainer_excelexport") + { + var exportProperties = new ExcelExportProperties(); + var header = new ExcelHeader { HeaderRows = 8 }; + + // Initialize the list of rows for the header. + header.Rows = new List + { + // Add a new row to the header with specific cells. + new ExcelRow + { + // Define the cells within this row. + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Value = "Northwind Traders", + Style = new ExcelStyle + { + FontColor = "#C67878", + FontSize = 20, + HAlign = ExcelHorizontalAlign.Center, + Bold = true + } + } + } + }, + new ExcelRow + { + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Value = "2501 Aerial Center Parkway", + Style = new ExcelStyle + { + FontColor = "#C67878", + FontSize = 15, + HAlign = ExcelHorizontalAlign.Center, + Bold = true + } + } + } + }, + new ExcelRow + { + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Value = "Suite 200 Morrisville, NC 27560 USA", + Style = new ExcelStyle + { + FontColor = "#C67878", + FontSize = 15, + HAlign =ExcelHorizontalAlign.Center, + Bold = true + } + } + } + }, + new ExcelRow + { + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Value = "Tel +1 888.936.8638 Fax +1 919.573.0306", + Style = new ExcelStyle + { + FontColor = "#C67878", + FontSize = 15, + HAlign = ExcelHorizontalAlign.Center, + Bold = true + } + } + } + }, + new ExcelRow + { + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Hyperlink = new Hyperlink { Target = "https://www.northwind.com/", DisplayText = "www.northwind.com" }, + Style = new ExcelStyle { HAlign = ExcelHorizontalAlign.Center } + } + } + }, + new ExcelRow + { + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Hyperlink = new Hyperlink { Target = "mailto:support@northwind.com" }, + Style = new ExcelStyle { HAlign = ExcelHorizontalAlign.Center } + } + } + }, + new ExcelRow { }, + new ExcelRow { } + }; + + + var footer = new ExcelFooter { FooterRows = 4 }; + + // Initialize the list of footer rows. + footer.Rows = new List + { + new ExcelRow { }, + new ExcelRow { }, + new ExcelRow + { + // Define the cells within this row. + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Value = "Thank you for your business!", + Style = new ExcelStyle { HAlign = ExcelHorizontalAlign.Center, Bold = true } + } + } + }, + new ExcelRow + { + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Value = "!Visit Again!", + Style = new ExcelStyle { HAlign = ExcelHorizontalAlign.Center, Bold = true } + } + } + } + }; + exportProperties.Header = header; + exportProperties.Footer = footer; + await Gantt.ExportToExcelAsync(exportProperties); + } + } + + 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 string Predecessor { get; set; } + public int? ParentID { get; set; } + public int[] ResourceId { get; set; } + } + + public 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, 07), }, + 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, Predecessor="2", }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, Predecessor="3", }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 10), EndDate = new DateTime(2022, 01, 17), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, Predecessor="4", }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, Predecessor="6", }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, Predecessor="7", } + }; + return Tasks; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLeMDVlqgbyewep?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Add additional worksheets to Excel document while exporting + +To add additional worksheets during export, follow the steps below: + +- Create a new instance of the **Workbook** class and assign it to the `Workbook` property of [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) . +- Use `Worksheets.Add` to append new worksheets to the workbook. +- Set the `GridSheetIndex` property to specify the worksheet index where the Gantt data should be placed. +- Trigger the export operation using [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_). + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Navigations +@using Syncfusion.ExcelExport + + + + + + + +@code { + public SfGantt Gantt; + private List TaskCollection { get; set; } + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + private async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "GanttContainer_excelexport") + { + ExcelExportProperties exportProperties = new ExcelExportProperties(); + // Add a new workbook to the Excel document that contains only 1 worksheet. + exportProperties.Workbook = new Workbook(); + // Add additional worksheets. + exportProperties.Workbook.Worksheets.Add(); + exportProperties.Workbook.Worksheets.Add(); + // Define the Gridsheet index where Grid data must be exported. + exportProperties.GridSheetIndex = 0; + await Gantt.ExportToExcelAsync(exportProperties); + } + } + + 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 string Predecessor { get; set; } + public int? ParentID { get; set; } + public int[] ResourceId { get; set; } + } + + public 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, 07), }, + 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, Predecessor="2", }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, Predecessor="3", }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 10), EndDate = new DateTime(2022, 01, 17), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, Predecessor="4", }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, Predecessor="6", }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, Predecessor="7", } + }; + return Tasks; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBoCjhPgJqqEzmg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Apply font and color themes + +To apply a custom theme, set the [Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Theme) property within [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_). This allows customization of styles for the following sections in the exported file. + +- **caption**: Defines the style for the caption, typically used for titles or descriptions at the top of the sheet. +- **header**: Specifies the styling for column headers. +- **record**: Applies formatting to the data rows exported from the Gantt Chart. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt + - + @@ -175,6 +716,7 @@ The Excel export also provides an option to include custom theme for exported Ex this.Gantt.ExportToExcelAsync(ExportProperties); } } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -182,14 +724,14 @@ The Excel export also provides an option to include custom theme for exported Ex 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 int[] ResourceId { get; set; } } @@ -197,67 +739,90 @@ The Excel export also provides an option to include custom theme for exported Ex { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - 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, Predecessor="2", }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, Predecessor="3", }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentId = 5, Predecessor="4", }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentId = 5, Predecessor="6", }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentId = 5, Predecessor="7", } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, Predecessor="2", }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, Predecessor="3", }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 10), EndDate = new DateTime(2022, 01, 17), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, Predecessor="4", }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, Predecessor="6", }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, Predecessor="7", } }; return Tasks; } } -``` +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLeMtWehZlqyHnz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> By default, material theme is applied to the exported Excel document. -### File name for exported document +### Set custom file name + +To assign a custom name to the exported Excel or CSV file in the Gantt Chart component, set the [FileName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_FileName) property within the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) configuration. This configuration determines the filename applied during the export process. -You can assign the file name for the exported document by defining **FileName** property in excel export properties. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Navigations + +
+ + +
- + + -@code{ +@code { public SfGantt Gantt; + public string FileName { get; set; } = string.Empty; private List TaskCollection { get; set; } + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + public void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) { + var exportFileName = !string.IsNullOrWhiteSpace(FileName) ? FileName : "ExportedData"; + if (args.Item.Id == "GanttContainer_excelexport") { - Syncfusion.Blazor.Grids.ExcelExportProperties ExportProperties = new Syncfusion.Blazor.Grids.ExcelExportProperties(); - ExportProperties.FileName = "Gantt.xlsx"; - this.Gantt.ExportToExcelAsync(ExportProperties); + var exportProps = new ExcelExportProperties + { + FileName = $"{exportFileName}.xlsx" + }; + Gantt.ExportToExcelAsync(exportProps); } else if (args.Item.Id == "GanttContainer_csvexport") { - Syncfusion.Blazor.Grids.ExcelExportProperties ExportProperties = new Syncfusion.Blazor.Grids.ExcelExportProperties(); - ExportProperties.FileName = "Gantt.csv"; - this.Gantt.ExportToCsvAsync(ExportProperties); + var exportProps = new ExcelExportProperties + { + FileName = $"{exportFileName}.csv" + }; + Gantt.ExportToCsvAsync(exportProps); } } - protected override void OnInitialized() - { - this.TaskCollection = GetTaskCollection(); - } 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 int[] ResourceId { get; set; } } @@ -265,19 +830,23 @@ You can assign the file name for the exported document by defining **FileName** { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - 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, Predecessor="2", }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, Predecessor="3", }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentId = 5, Predecessor="4", }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentId = 5, Predecessor="6", }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentId = 5, Predecessor="7", } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, Predecessor="2", }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, Predecessor="3", }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 10), EndDate = new DateTime(2022, 01, 17), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, Predecessor="4", }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, Predecessor="6", }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, Predecessor="7", } }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBSijCGoXwGiALV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap4) to know how to render and configure the Gantt. \ No newline at end of file diff --git a/blazor/gantt-chart/excel-like-filter.md b/blazor/gantt-chart/excel-like-filter.md index 1cf22c139c..98271a81b0 100644 --- a/blazor/gantt-chart/excel-like-filter.md +++ b/blazor/gantt-chart/excel-like-filter.md @@ -7,17 +7,19 @@ control: Gantt Chart documentation: ug --- -# Excel like filter in Blazor Gantt Chart +# Excel like filter in Blazor Gantt Chart component -The Syncfusion® Blazor Gantt Chart offers an Excel-like filter feature, providing a familiar and intuitive interface for filtering project data within the Gantt Chart. This feature simplifies complex filtering operations on specific columns, allowing for quick task location and manipulation, similar to Microsoft Excel. Excel like filtering is especially useful when dealing with large project datasets and complex filtering requirements for project management scenarios. +The Excel-like filter in Syncfusion® Blazor Gantt Chart component enables column-level filtering similar to Microsoft Excel. It supports sorting, clearing filters, and applying advanced conditions through a submenu available in each column header. This feature is highly effective for working with large datasets and applying multiple filter criteria. -Here is an example that showcasing how to render the Excel like filter within the Gantt Chart: +To enable this feature, configure [GanttFilterSettings.FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_FilterType) as **Excel** and set [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering) to **true**. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - - + + @@ -30,54 +32,56 @@ Here is an example that showcasing how to render the Excel like filter within th TaskCollection = GetTaskCollection(); } + 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 int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } - } - - public static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, - }; - return Tasks; + public int? ParentID { get; set; } } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLosDjqgkPbKMzW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} > * The Excel-like filter feature supports various filter conditions, including text-based filters for task names, number-based filters for task Id and progress, and date-based filters for project timelines. > * The filter dialog provides additional options, such as searching for specific task values, and clearing applied project filters. ## Customize the filter choice count -By default, the filter choice count is set to 1000, which means that the filter dialog will display a maximum of 1000 distinct values for each column as a checkbox list data. This default value ensures that the filter operation remains efficient, even with large project datasets. Additionally, the filter dialog retrieves and displays distinct data from the first 1000 task records bound to the Syncfusion® Blazor Gantt Chart to optimize performance, while the remaining records are returned as a result of the search option within the filter dialog. - -The Gantt Chart allows customization of the number of distinct data displayed in the checkbox list of the Excel type filter dialog. This can be useful when working with large project datasets and wanting to customize the default filter choice count values. +The Syncfusion® Blazor Gantt Chart component displays up to 1000 distinct values per column in the filter dialog by default. These values are taken from the first 1000 records bound to the component and shown as checkbox list items to maintain optimal performance. Additional values can be accessed using the search option within the filter dialog. -However, there is flexibility to increase or decrease the filter choice count based on specific project requirements. This can be achieved by adjusting the [FilterChoiceCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.FilterDialogOpeningEventArgs.html#Syncfusion_Blazor_Gantt_FilterDialogOpeningEventArgs_FilterChoiceCount) value in the filter dialog opening event. +To customize this behavior, the [FilterChoiceCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.FilterDialogOpeningEventArgs.html#Syncfusion_Blazor_Gantt_FilterDialogOpeningEventArgs_FilterChoiceCount) property can be configured within the[FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_FilterDialogOpening) event to increase or decrease the number of distinct values displayed, depending on the dataset size and filtering requirements. -The following example demonstrates how to customize the filter choice count in the checkbox list of the filter dialog. In the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_FilterDialogOpening) event, the `FilterChoiceCount` property can be set to the desired value: +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids - - + + @@ -85,7 +89,7 @@ The following example demonstrates how to customize the filter choice count in t @code { private List TaskCollection { get; set; } = new(); - SfGantt? Gantt { get; set; } + SfGantt Gantt { get; set; } public void FilterDialogOpeningHandler(FilterDialogOpeningEventArgs args) { @@ -100,15 +104,15 @@ The following example demonstrates how to customize the filter choice count in t private List GetTaskCollection() { List tasks = new List(); - int taskId = 1; + int TaskID = 1; - // Generate larger dataset for demonstration + // Generate larger dataset for demonstration. for (int i = 1; i <= 50; i++) { - tasks.Add(new TaskData() { TaskId = taskId++, TaskName = $"Project Phase {i}", StartDate = new DateTime(2023, 04, 02), Duration = 10, Progress = 25, ParentId = null }); - tasks.Add(new TaskData() { TaskId = taskId++, TaskName = $"Task A-{i}", StartDate = new DateTime(2023, 04, 02), Duration = 3, Progress = 50, ParentId = taskId - 2 }); - tasks.Add(new TaskData() { TaskId = taskId++, TaskName = $"Task B-{i}", StartDate = new DateTime(2023, 04, 05), Duration = 4, Progress = 75, ParentId = taskId - 3 }); - tasks.Add(new TaskData() { TaskId = taskId++, TaskName = $"Task C-{i}", StartDate = new DateTime(2023, 04, 09), Duration = 3, Progress = 30, ParentId = taskId - 4 }); + tasks.Add(new TaskData() { TaskID = TaskID++, TaskName = $"Project Phase {i}", StartDate = new DateTime(2023, 04, 02), Duration = 10, Progress = 25, ParentID = null }); + tasks.Add(new TaskData() { TaskID = TaskID++, TaskName = $"Task A-{i}", StartDate = new DateTime(2023, 04, 02), Duration = 3, Progress = 50, ParentID = TaskID - 2 }); + tasks.Add(new TaskData() { TaskID = TaskID++, TaskName = $"Task B-{i}", StartDate = new DateTime(2023, 04, 05), Duration = 4, Progress = 75, ParentID = TaskID - 3 }); + tasks.Add(new TaskData() { TaskID = TaskID++, TaskName = $"Task C-{i}", StartDate = new DateTime(2023, 04, 09), Duration = 3, Progress = 30, ParentID = TaskID - 4 }); } return tasks; @@ -116,63 +120,59 @@ The following example demonstrates how to customize the filter choice count in t 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 int Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLSCDjUzNLJlHUQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} > The specified filter choice count value determines the display of unique items as a checkbox list in the Excel type filter dialog. This can result in a delay in rendering these checkbox items when opening the filter dialog. Therefore, it is advisable to set a restricted filter choice count value for optimal project management performance. ## Show customized text in filter dialog -The Syncfusion® Blazor Gantt Chart provides flexibility to customize the text displayed in the Excel filtering options. This allows modification of the default text and provides more meaningful and contextual labels for project filtering, enhancing the project management experience. +You can customize the text shown in the filter dialog of the Syncfusion® Blazor Gantt Chart component by using the [FilterItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_FilterItemTemplate) property. This feature allows you to present meaningful labels based on the values of a specific column. -To customize the text in the Excel filter, define a `FilterItemTemplate` and bind it to the desired column. The `FilterItemTemplate` property allows creation of custom templates for filter items. Any logic and HTML elements can be used within this template to display the desired text or content relevant to project management scenarios. +In the example below, the filter checkbox list for the **Status** column is customized by defining a `FilterItemTemplate` within the column configuration. The **FilterItemTemplateContext** is used to conditionally render descriptive labels: **Completed** when the value is **true**, and **In Progress** when the value is **false**. -In the example below, customization of the text displayed in the filter checkbox list for a **Status** column is demonstrated. This is achieved by defining a `FilterItemTemplate` within the column element. Inside the template, FilterItemTemplateContext can be used to conditionally display **Completed** if the data value is true and **In Progress** if the value is false: +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids - - - + + - - - + + @{ - var filterContext = (context as FilterItemTemplateContext); - var itemTemplateValue = "DefaultText"; - - if (filterContext.Value.ToString() == "False") - { - itemTemplateValue = "In Progress"; - } - else - { - itemTemplateValue = "Completed"; - } + var filterContext = context as FilterItemTemplateContext; + var value = filterContext?.Value?.ToString(); + var itemTemplateValue = value == "True" ? "Completed" : "In Progress"; } @itemTemplateValue - + @code { private List TaskCollection { get; set; } = new(); + protected override void OnInitialized() { TaskCollection = GetTaskCollection(); @@ -180,39 +180,45 @@ In the example below, customization of the text displayed in the filter checkbox private List GetTaskCollection() { - return new List() + return new List { - new TaskData() { TaskId = 1, TaskName = "Project Management", StartDate = new DateTime(2023, 04, 02), Duration = 10, Progress = 40, IsCompleted = true, ParentId = null }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 100, IsCompleted = true, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform Soil test", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, IsCompleted = true, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 100, IsCompleted = true, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project Estimation", StartDate = new DateTime(2023, 04, 02), Duration = 8, Progress = 60, IsCompleted = false, ParentId = null }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan", StartDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 100, IsCompleted = false, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 40, IsCompleted = false, ParentId = 5 } + new TaskData { TaskID = 1, TaskName = "Project Management", StartDate = new DateTime(2023, 04, 03), EndDate = new DateTime(2023, 04, 03), Duration = 10, Progress = 40, IsCompleted = true }, + new TaskData { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 04, 03), EndDate = new DateTime(2023, 04, 03), Duration = 4, Progress = 100, IsCompleted = true, ParentID = 1 }, + new TaskData { TaskID = 3, TaskName = "Perform Soil test", StartDate = new DateTime(2023, 04, 03), EndDate = new DateTime(2023, 04, 03), Duration = 4, Progress = 50, IsCompleted = true, ParentID = 1 }, + new TaskData { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 04, 03), EndDate = new DateTime(2023, 04, 03), Duration = 4, Progress = 100, IsCompleted = true, ParentID = 1 }, + new TaskData { TaskID = 5, TaskName = "Project Estimation", StartDate = new DateTime(2023, 04, 04), EndDate = new DateTime(2023, 04, 04), Duration = 8, Progress = 60, IsCompleted = false }, + new TaskData { TaskID = 6, TaskName = "Develop floor plan", StartDate = new DateTime(2023, 04, 04), EndDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 100, IsCompleted = false, ParentID = 5 }, + new TaskData { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2023, 04, 04), EndDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 40, IsCompleted = false, ParentID = 5 } }; } 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 int Duration { get; set; } public int Progress { get; set; } public bool IsCompleted { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthSCjNqzrNWxSym?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Customize the Excel filter using CSS In the Syncfusion® Blazor Gantt Chart, there is flexibility to enhance the visual presentation of the Excel filter dialog. This can be achieved by utilizing CSS styles to modify the dialog's appearance according to specific project management needs and application aesthetics. -**1. Removing context menu option** +### Removing context menu option -The Excel filter dialog includes several features such as **context menu**, **search box**, and **checkbox list** that may not be required in some project management scenarios. These options can be removed using CSS classes applied to the Gantt Chart. +The Excel filter dialog includes several features such as **context menu**, **search box**, and **checkbox list** that may not be required in some project management scenarios. + +To remove the context menu from the filter dialog, apply the following CSS rule to the Gantt Chart: ```cshtml ``` -The following example demonstrates how to remove the context menu option in the Excel filter dialog using the above mentioned CSS for the Gantt Chart: +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - - + + @@ -247,46 +253,51 @@ The following example demonstrates how to remove the context menu option in the TaskCollection = GetTaskCollection(); } - public static List GetTaskCollection() + private static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, + 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 int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + 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; } } } -``` -**2. Customize the height and width of filter dialog** +{% endhighlight %} +{% endtabs %} -The height and width of each column's filter dialog can be customized using CSS styles in the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_FilterDialogOpening) event. +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLyMtZUJqmzHKur?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -Before opening a filter dialog for each column, the `FilterDialogOpening` event will be triggered. At that point, based on the column name, the height and width of the columns can be set using CSS styles in the following sample. +### Customize the height and width of filter dialog + +You can adjust the height and width of the filter dialog for each column using CSS styles within the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_FilterDialogOpening) event. This event is triggered before the filter dialog opens, allowing you to apply styles conditionally based on the column name. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids + - + @@ -338,90 +349,135 @@ Before opening a filter dialog for each column, the `FilterDialogOpening` event IsSmall = false; } } - public static List GetTaskCollection() + + private static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, + 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 int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + 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; } } } -``` -**3. Customize filter icon for filtered columns** +{% endhighlight %} +{% endtabs %} -After filtering the column, the Gantt Chart will display the built-in filtered icon with predefined styles by default. The filtered icon can also be customized using the `.e-gantt .e-filtered::before` class for enhanced project visualization. +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhoCtXgzJXiUzEe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Customize filter icon for filtered columns + +When a column is filtered, the Gantt Chart displays a default icon with predefined styles. You can customize this icon using the **.e-gantt .e-filtered::before** CSS class for enhanced project visualization. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Grids - - + + + - +@if (IsLarge) +{ + +} +@if (IsSmall) +{ + +} @code { private List TaskCollection { get; set; } = new(); - + public bool IsLarge; + public bool IsSmall; protected override void OnInitialized() { TaskCollection = GetTaskCollection(); } - public class TaskData + public void FilterDialogOpeningHandler(FilterDialogOpeningEventArgs args) { - 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; } + if (args.ColumnName == "TaskName") + { + IsLarge = true; + IsSmall = false; + } + else if (args.ColumnName == "TaskId") + { + IsSmall = true; + IsLarge = false; + } + else + { + IsLarge = false; + IsSmall = false; + } } - public static List GetTaskCollection() + private static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, + 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/LDBSWNtATpopODgg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} > The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page provides comprehensive feature representations. The [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/overview?theme=bootstrap4) demonstrates how to present and manipulate project data effectively. \ No newline at end of file diff --git a/blazor/gantt-chart/filter-menu.md b/blazor/gantt-chart/filter-menu.md index 6c43420cf0..991aba73b3 100644 --- a/blazor/gantt-chart/filter-menu.md +++ b/blazor/gantt-chart/filter-menu.md @@ -1,7 +1,7 @@ --- layout: post -title: Filter in Blazor Gantt Chart | Syncfusion -description: Checkout and learn here all about how to use an Excel like filter in the Syncfusion Blazor Gantt Chart and much more details. Explore to more details. +title: Excel Like Filter in Blazor Gantt Chart | Syncfusion +description: Checkout and learn here all about Excel like filter in Syncfusion Blazor Gantt Chart and much more details. platform: Blazor control: Gantt Chart documentation: ug @@ -281,4 +281,3 @@ The following sample demonstrates how to disable the autofill feature by setting {% endtabs %} {% previewsample "https://blazorplayground.syncfusion.com/embed/BZhosZjKTkWPUTuQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - diff --git a/blazor/gantt-chart/filtering.md b/blazor/gantt-chart/filtering.md index 4c8101695a..41a314c224 100644 --- a/blazor/gantt-chart/filtering.md +++ b/blazor/gantt-chart/filtering.md @@ -9,207 +9,260 @@ documentation: ug # Filtering in Blazor Gantt Chart Component -Filtering allows you to view specific or related records based on filter criteria. This can be done in the Gantt Chart component by using the filter menu and toolbar search. To enable filtering in the Gantt Chart component, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering) to `true`. Menu filtering support can be configured using the `GanttFilterSettings` property and toolbar searching can be configured using the `GanttSearchSettings` property. +Filtering allows you to view specific or related records based on defined criteria. The Gantt Chart component supports options like filter menu, Excel-like filtering, and toolbar search to narrow down visible data. +To enable filtering, set [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering) to **true** in the Gantt Chart configuration. You can define filter options using `GanttFilterSettings` and configure toolbar search using `GanttSearchSettings` property. -The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component provides menu-filtering support for each column. You can enable the filter menu by setting the `AllowFiltering` to `true`. The filter menu UI will be rendered based on its column type, which allows you to filter data. You can filter the records with different operators. +> The filtering UI is rendered based on the column type, allowing data to be filtered using appropriate operators. +> The filter menu is enabled by default. To disable the filtering option for a specific column, set the `AllowFiltering` property of the `GanttColumn` to **false**. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - - + + + @code{ private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + 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 int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } - } - - public static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, - }; - return Tasks; + public int? ParentID { get; set; } } } -``` -![Blazor Gantt Chart with Menu Filter](images/blazor-gantt-chart-menu-filter.png) +{% endhighlight %} +{% endtabs %} -N> The `AllowFiltering` property should be set to `true` to enable the filter menu. Setting the `GanttColumn.AllowFiltering` property to `false` prevents rendering the filter menu for a particular column. +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLIWDNALLvvHCTa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Filter hierarchy modes -The Gantt Chart supports a set of filtering modes with the [GanttFilterSettings.HierarchyMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_HierarchyMode) property. The following are the types of filter hierarchy modes available in the Gantt Chart component: +The Blazor Gantt Chart component supports multiple filtering modes, which can be configured using the [GanttFilterSettings.HierarchyMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_HierarchyMode) property. The available modes are: -* `Parent`: This is the default filter hierarchy mode in Gantt Chart. The filtered records are displayed with its parent records. If the filtered records do not have any parent record, then only the filtered records will be displayed. +- **Parent**: This is the default mode. Filtered records are displayed along with their parent records. If no parent exists, only the filtered records are shown. -* `Child`: Displays the filtered records with its child record. If the filtered records do not have any child record, then only the filtered records will be displayed. +- **Child**: Displays filtered records along with their child records. If no child exists, only the filtered records are shown. -* `Both`: Displays the filtered records with its both parent and child records. If the filtered records do not have any parent and child records, then only the filtered records will be displayed. +- **Both**: Displays filtered records along with both parent and child records. If neither exists, only the filtered records are shown. -* `None`: Displays only the filtered records. +- **None**: Displays only the filtered records without any parent or child context. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - - - - +@using Syncfusion.Blazor.DropDowns + +
+ + + + + +
+ + + -@code{ +@code { + private SfGantt GanttObject; public List TaskCollection { get; set; } + public string SelectedMode { get; set; } = "None"; + public Syncfusion.Blazor.Gantt.FilterHierarchyMode HierarchyMode { get; set; } = Syncfusion.Blazor.Gantt.FilterHierarchyMode.None; + + public List filterModesData = new List + { + new DropDownItem { id = "None", mode = "None" }, + new DropDownItem { id = "Parent", mode = "Parent" }, + new DropDownItem { id = "Child", mode = "Child" }, + new DropDownItem { id = "Both", mode = "Both" }, + }; + protected override void OnInitialized() { - this.TaskCollection = GetTaskCollection(); + TaskCollection = GetTaskCollection(); + } + + private void OnModeChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs< string, DropDownItem> args) + { + SelectedMode = args.Value; + HierarchyMode = Enum.Parse(SelectedMode); + GanttObject.ClearFilteringAsync(); + } + + private List GetTaskCollection() + { + return new List + { + new TaskData { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07) }, + 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", 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 } + }; } 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 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 GetTaskCollection() + public class DropDownItem { - List Tasks = new List() - { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, - }; - return Tasks; + public string id { get; set; } + public string mode { get; set; } } } -``` +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhoijMeicdnXjio?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Initial filter -To apply the filter at initial rendering, set the filter `Predicate` collections in the [GanttFilterSettings.Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_Columns) property. +To apply filtering during the initial render of the Syncfusion® Blazor Gantt Chart component, define the filter conditions using a collection of `PredicateModel` objects within the [GanttFilterSettings.Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_Columns) property. + +The following sample demonstrates how to apply an initial filter where **TaskName** starts with **Identify** and **TaskID** equals **2**, using a `Predicate` condition set to **and**. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml -@using Syncfusion.Blazor @using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor @using Syncfusion.Blazor.Grids - - + + + -@code{ +@code { private List TaskCollection { get; set; } public List FilterColumns { get; set; } = new List { - new PredicateModel() { Field = "TaskName", MatchCase=false, Operator = Operator.StartsWith, Predicate = "and", Value = "Identify" }, - new PredicateModel() { Field = "TaskId", MatchCase=false, Operator = Operator.Equal, Predicate = "and", Value = 2 } + new PredicateModel() { Field = "TaskName", MatchCase = false, Operator = Operator.StartsWith, Predicate = "and", Value = "Identify" }, + new PredicateModel() { Field = "TaskID", MatchCase = false, Operator = Operator.Equal, Predicate = "and", Value = 2 } }; + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + private List GetTaskCollection() + { + return new List + { + new TaskData { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07) }, + 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", 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 } + }; + } + 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 DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } - } - - public static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, - }; - return Tasks; + public int? ParentID { get; set; } } } -``` -![Blazor Gantt Chart with Initial Filter](images/blazor-gantt-chart-initial-filter.png) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLosjNKhcBcgFMa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Filter operators -The filter operator for a column can be defined in the [GanttFilterSettings.Columns.Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_Operators) property. +Filter operators can be set using the [GanttFilterSettings.Columns.Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_Operators) property to define the comparison logic for each column. The available operators and their supported data types are: -Operator |Description |Supported Types ------|-----|----- -startswith |Checks whether the value begins with the specified value. |String -endswith |Checks whether the value ends with the specified value. |String -contains |Checks whether the value contains the specified value. |String -equal |Checks whether the value is equal to the specified value. |String | Number | Boolean | Date -notequal |Checks for the values that are not equal to the specified value. |String | Number | Boolean | Date -greaterthan |Checks whether the value is greater than the specified value. |Number | Date -greaterthanorequal|Checks whether the value is greater than or equal to the specified value. |Number | Date -lessthan |Checks whether the value is less than the specified value. |Number | Date -lessthanorequal |Checks whether the value is less than or equal to the specified value. |Number | Date +| Operator | Description | Supported Types | +|----------------------|-----------------------------------------------------|----------------------------------| +| startswith | Matches values beginning with the specified value. | String | +| endswith | Matches values ending with the specified value. | String | +| contains | Matches values that include the specified value. | String | +| equal | Matches values exactly equal to the specified value. | String, Number, Boolean, Date | +| notequal | Matches values not equal to the specified value. | String, Number, Boolean, Date | +| greaterthan | Matches values greater than the specified value. | Number, Date | +| greaterthanorequal | Matches values greater than or equal to the value. | Number, Date | +| lessthan | Matches values less than the specified value. | Number, Date | +| lessthanorequal | Matches values less than or equal to the value. | Number, Date | N> By default, the `GanttFilterSettings.Columns.Operator` value is `equal` ## Diacritics -By default, the Gantt Chart component ignores the diacritic characters while filtering. To include diacritic characters, set the [GanttFilterSettings.IgnoreAccent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_IgnoreAccent) to true. +By default, the Syncfusion® Blazor Gantt Chart component ignores diacritic characters during filtering. To enable filtering with diacritic sensitivity, set the [GanttFilterSettings.IgnoreAccent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_IgnoreAccent) property to **true**. -In the following sample, type **Perform** in the **TaskName** column to filter diacritic characters. +The following sample demonstrates this behavior: when filtering the **TaskName** column, entries containing diacritic characters (e.g., “Próject”, “Projéct”) will be matched if you enter the base text **Project**. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - + + -@code{ +@code { public List TaskCollection { get; set; } protected override void OnInitialized() { @@ -231,11 +284,11 @@ In the following sample, type **Perform** in the **TaskName** column to filter d { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskId = 1, TaskName = "Projéct initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, new TaskData() { TaskId = 2, TaskName = "Identify site locàtion", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, new TaskData() { TaskId = 3, TaskName = "Perförm soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, new TaskData() { TaskId = 4, TaskName = "Soil tëst appröval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskId = 5, TaskName = "Próject estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, @@ -243,131 +296,486 @@ In the following sample, type **Perform** in the **TaskName** column to filter d return Tasks; } } -``` -![Filtering Diacritic Characters in Blazor Gantt Chart](images/blazor-gantt-chart-filter-diacritic-charater.png) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBoMXDALFmDenyb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Filtering a specific column by method -You can filter the columns dynamically by 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_) method. +You can filter columns dynamically in the Syncfusion® Blazor Gantt Chart component by 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_) method. + +The example below demonstrates how to filter the **TaskName** and **TaskID** columns using a single value. Filtering is triggered by an external button click, which invokes the `FilterByColumnAsync` method. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Buttons -Filter Column - - +Filter Column + + @code{ - public SfGantt Gantt; + public SfGantt GanttInstance; + private List TaskCollection { get; set; } + public async void Filter() { - await this.Gantt.FilterByColumnAsync("TaskName", "startswith", "Iden", "or", true, false); + await this.GanttInstance.FilterByColumnAsync("TaskName", "startswith", "Iden", "or", true, false); } - private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + 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 int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } - } - - public static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, - }; - return Tasks; + public int? ParentID { get; set; } } } -``` -![Filtering Specific Column in Blazor Gantt Chart](images/blazor-gantt-chart-filter-column.png) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLSMDXKrEDLyEcy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Clear filtered columns -You can clear all the filtering condition done in the Gantt Chart component by using the [ClearFilteringAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ClearFilteringAsync) method. +You can clear all the filtering conditions applied in the Gantt Chart component by using the [ClearFilteringAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ClearFilteringAsync) method. -The following code snippet explains the above behavior. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons -Clear Filter - - +Clear Filter + + @code{ + public SfGantt GanttInstance; + private List TaskCollection { get; set; } public List FilterColumns { get; set; } = new List { - new PredicateModel() { Field = "TaskName", MatchCase=false, Operator = Operator.StartsWith, Predicate = "and", - Value = "Identify" }, - new PredicateModel() { Field = "TaskId", MatchCase=false, Operator = Operator.Equal, Predicate = "and", Value = 2 } + new PredicateModel() { Field = "TaskName", MatchCase = false, Operator = Operator.StartsWith, Predicate = "and", Value = "Identify" }, + new PredicateModel() { Field = "TaskID", MatchCase = false, Operator = Operator.Equal, Predicate = "and", Value = 2 } }; - public SfGantt Gantt; - public void ClearFilter() + + public async Task ClearFilter() { - this.Gantt.ClearFilteringAsync(); + await this.GanttInstance.ClearFilteringAsync(); } - private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + 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 int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + 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; } + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNheWDXKBOdpyoxD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Enable different filter for a column + +You can enable different filter types for individual columns in the Syncfusion® Gantt Chart component by setting the[GanttColumn.FilterSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Type) property. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.DropDowns +@using Syncfusion.Blazor.Grids + +
+ + + + + + + + + +
+ + + + + + + + + + + + + +@code { + public SfGantt GanttInstance; + private List TaskCollection { get; set; } = GetTaskCollection(); + public bool flag = false; + public string SelectedColumn { get; set; } + public string SelectedOperator { get; set; } + List LocalData = new List() { "Menu", "Excel" }; + List ColumnData = new List() { "TaskID", "TaskName", "StartDate", "EndDate", "Duration", "Progress", "ParentID" }; + + // Filter settings for each column. + FilterSettings TaskIDFilterSettings = new FilterSettings { Type = Syncfusion.Blazor.Grids.FilterType.Menu }; + FilterSettings TaskNameFilterSettings = new FilterSettings { Type = Syncfusion.Blazor.Grids.FilterType.Menu }; + FilterSettings StartDateFilterSettings = new FilterSettings { Type = Syncfusion.Blazor.Grids.FilterType.Menu }; + FilterSettings EndDateFilterSettings = new FilterSettings { Type = Syncfusion.Blazor.Grids.FilterType.Menu }; + FilterSettings DurationFilterSettings = new FilterSettings { Type = Syncfusion.Blazor.Grids.FilterType.Menu }; + FilterSettings ProgressFilterSettings = new FilterSettings { Type = Syncfusion.Blazor.Grids.FilterType.Menu }; + FilterSettings ParentIDFilterSettings = new FilterSettings { Type = Syncfusion.Blazor.Grids.FilterType.Menu }; + + public void onFieldChange(ChangeEventArgs args) + { + SelectedColumn = args.Value; + flag = true; + } + + public async Task onTypeChange(ChangeEventArgs args) + { + SelectedOperator = args.Value; + await onSingleValueFilter(); + } + + public async Task onSingleValueFilter() + { + Enum.TryParse(SelectedOperator, out Syncfusion.Blazor.Grids.FilterType filterType); + + switch (SelectedColumn) + { + case "TaskID": + TaskIDFilterSettings.Type = filterType; + break; + case "TaskName": + TaskNameFilterSettings.Type = filterType; + break; + case "StartDate": + StartDateFilterSettings.Type = filterType; + break; + case "EndDate": + EndDateFilterSettings.Type = filterType; + break; + case "Duration": + DurationFilterSettings.Type = filterType; + break; + case "Progress": + ProgressFilterSettings.Type = filterType; + break; + } + + await GanttInstance.RefreshAsync(); + } + + private static List GetTaskCollection() + { + return new List + { + new TaskData { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07) }, + 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 } + }; + } + + 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/LXrSijtKAOZnzpjS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Get filtered records + +You can retrieve filtered records from the Gantt Chart component using the [GetFilteredRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetFilteredRecordsAsync) method. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt + +
+ Get Filtered Records + Clear Filters +
+ +@if (!string.IsNullOrEmpty(message)) +{ +
+ @message +
+} + + + + + + + +@if (showRecords) +{ +

Filtered Records

+ + + +} + +@code { + public SfGantt GanttInstance; + private List TaskCollection { get; set; } = GetTaskCollection(); + public List FilteredTasks { get; set; } = new(); + public bool showRecords = false; + public string message = string.Empty; + public bool flag = false; + + public Syncfusion.Blazor.Gantt.FilterType CurrentFilterType { get; set; } = Syncfusion.Blazor.Gantt.FilterType.Menu; + + public async Task click() + { + if (flag) + { + var filteredRecords = await GanttInstance.GetFilteredRecordsAsync(); + FilteredTasks = filteredRecords.Cast().ToList(); + showRecords = true; + message = string.Empty; + } + else + { + showRecords = false; + message = "No Records is filtered "; + } + } + + public void FilteringHandler(Syncfusion.Blazor.Grids.FilteringEventArgs args) + { + flag = args.FilterPredicates != null && args.FilterPredicates.Any(); + } + + public async Task clear() + { + await GanttInstance.ClearFilteringAsync(); + showRecords = false; + message = string.Empty; + flag = false; + } + + private static List GetTaskCollection() + { + return new List + { + new TaskData { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), Duration = "3", Progress = 50 }, + 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), Duration = "6", Progress = 60 }, + 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 } + }; + } + + 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/BDrSCDNSodAFQiMa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Customize filtering action + +You can customize the filtering behavior in the Gantt Chart component using the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_FilterDialogOpening), [FilterDialogOpened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_FilterDialogOpened), [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_Filtering), and [Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_Filtered) events. + +The following `Filtering` event cancels the filter action for the **TaskName** column. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Grids + +@if (Show) +{ +
+ @BeginMessage +

+ @CompleteMessage +
+
+} + + + + + + + + + + + + + + + + +@code { + private SfGantt Gantt; + private List TaskCollection { get; set; } = new(); + private bool Show = false; + private string BeginMessage = string.Empty; + private string CompleteMessage = string.Empty; + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + public Task FilteringHandler(Syncfusion.Blazor.Grids.FilteringEventArgs args) + { + Show = true; + if (args.ColumnName == "TaskName") + { + args.Cancel = true; + BeginMessage = "Filtering is not allowed for TaskName column."; + } + else + { + BeginMessage = $"Filtering started for column: {args.ColumnName}"; + } + return Task.CompletedTask; + } + + public Task FilteredHandler(FilteredEventArgs args) + { + CompleteMessage = $"Filtering completed for column: {args.ColumnName}"; + return Task.CompletedTask; + } + + public Task FilterDialogOpeningHandler(FilterDialogOpeningEventArgs args) + { + Show = true; + BeginMessage = $"Filter dialog opened for column: {args.ColumnName}"; + return Task.CompletedTask; } public static List GetTaskCollection() { - List Tasks = new List() + return new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21) }, new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21) }, new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 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; } } } -``` -![Clearing Column Filter in Blazor Gantt Chart](images/blazor-gantt-chart-clear-filter.png) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtByCDDyykKaWddG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/gantt-chart/frozen-columns.md b/blazor/gantt-chart/frozen-columns.md index 30eeba4bbe..d19a95c9e1 100644 --- a/blazor/gantt-chart/frozen-columns.md +++ b/blazor/gantt-chart/frozen-columns.md @@ -9,15 +9,17 @@ documentation: ug # Frozen columns in Blazor Gantt Component -The frozen columns feature in the Syncfusion® Blazor Gantt Chart provides the ability to fix certain columns on the left-hand side of the grid in gantt chart while the user scrolls horizontally. This feature improves the readability and allows for easier navigation. +The frozen columns feature in the Syncfusion® Blazor Gantt Chart allows specific columns to stay fixed on the left side while scrolling horizontally. This enhances readability and simplifies navigation across wide dataset -To enable frozen columns, use the [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_FrozenColumns) property of the Gantt component. In the example code provided, the FrozenColumns value is set to 2, which means that the first two columns of the grid will remain fixed while the user scrolls horizontally. +To enable frozen columns, use the [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_FrozenColumns) property in the Gantt component. + +The following example demonstrates setting the `FrozenColumns` value to 2, which keeps the first two columns fixed during horizontal scrolling. {% tabs %} {% highlight razor tabtitle="Index.razor" %} - @using Syncfusion.Blazor.Gantt + @@ -26,6 +28,7 @@ To enable frozen columns, use the [FrozenColumns](https://help.syncfusion.com/cr @code { private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -65,14 +68,15 @@ To enable frozen columns, use the [FrozenColumns](https://help.syncfusion.com/cr ## Freeze particular column -To freeze a specific column in the Gantt Chart, you can use the [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_IsFrozen) property of the [GanttColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html) component. +To freeze a specific column in the Gantt Chart, set the[IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_IsFrozen) property to **true** on the corresponding [GanttColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html) component. -In the following code snippet, the columns with the field names `TaskID` and `TaskName` are frozen by setting the IsFrozen property of the corresponding GanttColumn to true: +The following example demonstrates that the **TaskID** and **TaskName** columns are frozen. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt + @@ -89,6 +93,7 @@ In the following code snippet, the columns with the field names `TaskID` and `Ta @code { private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -128,18 +133,20 @@ In the following code snippet, the columns with the field names `TaskID` and `Ta ## Freeze direction -The [Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Freeze) property in the `GanttColumn` allows you to freeze the column either the left or right side of the grid while the remaining columns remain movable. The `IsFrozen` property should be set to true for the frozen columns. +You can freeze a column on either the left or right side of the grid while the remaining columns remain movable by using the [Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Freeze) property in the `GanttColumn` component. To apply this, the [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_IsFrozen) property must also be set to **true**. -The [FreezeDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html) property has two values: [FreezeDirection.Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html#Syncfusion_Blazor_Grids_FreezeDirection_Left) allows you to freeze columns on the left side, while [FreezeDirection.Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html#Syncfusion_Blazor_Grids_FreezeDirection_Right) allows you to freeze columns on the right side. +The following two freeze direction options are supported: -To use `FreezeDirection` in the Blazor Gantt chart, you need to set `IsFrozen` property of GanttColumn in addition to the `Freeze` property. In the below code sample , the `TaskID` column is frozen on the left side of the grid, while the `TaskName` column is frozen on the right side. +- [FreezeDirection.Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html#Syncfusion_Blazor_Grids_FreezeDirection_Left) – Freezes the column on the left side. +- [FreezeDirection.Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html#Syncfusion_Blazor_Grids_FreezeDirection_Right) – Freezes the column on the right side. -The following is the sample code for using `FreezeDirection` in the Blazor Gantt chart: +The following example demonstrates that the **TaskID** column is frozen on the left and the **TaskName** column is frozen on the right. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt + @@ -156,6 +163,7 @@ The following is the sample code for using `FreezeDirection` in the Blazor Gantt @code { private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -195,14 +203,15 @@ The following is the sample code for using `FreezeDirection` in the Blazor Gantt ## Add or remove frozen columns by dragging the column separator -The Gantt Chart allows users to add or remove frozen columns by dragging and dropping the column separator. The column separator is a draggable line that separates the frozen columns from the non-frozen columns in the Gantt Chart. It is displayed as a vertical line between the columns. +Frozen columns can be added or removed by dragging the column separator in the Gantt Chart.This separator is a draggable vertical line that separates frozen columns from non-frozen ones. -To enable this feature, you need to set the [AllowFreezeLineMoving](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFreezeLineMoving) property to true. If no columns are specified as frozen, the frozen column separator will be displayed at the left and right ends of the grid in Gantt Chart. +To enable this feature, set the [AllowFreezeLineMoving](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFreezeLineMoving) property to **true**. If no columns are configured as frozen, the separator appears at both the left and right edges of the grid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt + @@ -219,6 +228,7 @@ To enable this feature, you need to set the [AllowFreezeLineMoving](https://help @code { private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -257,18 +267,22 @@ To enable this feature, you need to set the [AllowFreezeLineMoving](https://help {% previewsample "https://blazorplayground.syncfusion.com/embed/hXLeMZZKfMsDAtUw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Change default frozen line color + +You can customize the color of the default frozen line in the Gantt Chart by applying custom CSS styles. -The following code example shows how to change the color of the default frozen line in the Gantt Chart by customizing the CSS styles. The following demo provides an example of how to change the default frozen line color to blue. +The following example demonstrates how to change the frozen line color to blue. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt + + + @code { private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); diff --git a/blazor/gantt-chart/getting-started-with-maui-app.md b/blazor/gantt-chart/getting-started-with-maui-app.md index c273fe8f44..e7dcdf51a8 100644 --- a/blazor/gantt-chart/getting-started-with-maui-app.md +++ b/blazor/gantt-chart/getting-started-with-maui-app.md @@ -11,7 +11,7 @@ documentation: ug This section explains you through the step-by-step process of integrating the Syncfusion® Blazor GanttChart component into your Blazor MAUI application using both Visual Studio and Visual Studio Code. -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) {% tabcontents %} @@ -21,7 +21,7 @@ This section explains you through the step-by-step process of integrating the Sy To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -## Create a new Blazor MAUI App in Visual Studio +## Create a new Blazor MAUI app in Visual Studio You can create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. @@ -48,11 +48,11 @@ N> Syncfusion® Blazor components are availa To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -## Create a new Blazor MAUI App in Visual Studio Code +## Create a new Blazor MAUI app in Visual Studio code -You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +You can create a Blazor MAUI app using Visual Studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. -## Install Blazor Gantt and Themes NuGet in the App +## Install Blazor Gantt and Themes NuGet in the app To add **Blazor Gantt Chart** component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). @@ -87,9 +87,9 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor Service +## Register Syncfusion® Blazor service -Register the Syncfusion® Blazor Service in the **~/MauiProgram.cs** file. +Register the Syncfusion® Blazor service in the **~/MauiProgram.cs** file. {% tabs %} {% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="2 19" %} @@ -150,15 +150,8 @@ Add the Syncfusion® Blazor Gantt Chart comp {% highlight razor %} - + - - - - - - - @code{ @@ -170,21 +163,27 @@ Add the Syncfusion® Blazor Gantt Chart comp 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + private static List GetTaskCollection() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, 06), 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; } @@ -193,6 +192,8 @@ Add the Syncfusion® Blazor Gantt Chart comp {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthyWNVzLgvAOlvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ### How to Run the Sample on Windows Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. @@ -207,7 +208,7 @@ Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/devi N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). -## Binding Gantt Chart with Data and 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. @@ -218,13 +219,23 @@ This following sample shows self-referential data binding in the Gantt Chart by {% tabs %} {% highlight razor %} +@using Syncfusion.Blazor.Grids + - + + + + + + + + @code{ private List TaskCollection { get; set; } + private string NumberFormat = "C"; protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -232,21 +243,27 @@ This following sample shows self-referential data binding in the Gantt Chart by 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + private static List GetTaskCollection() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, 06), 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; } @@ -255,9 +272,13 @@ This following sample shows self-referential data binding in the Gantt Chart by {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeWDVzBAiIgBkv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLeMZLfLAFkPmGF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## Defining columns -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: +The Gantt Chart has an option to define columns using the [GanttColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumns.html) component. To configure each column, use 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. @@ -272,10 +293,10 @@ Gantt Chart has an option to define columns as an array. You can manage the orde @using Syncfusion.Blazor.Grids - + - + @@ -293,21 +314,27 @@ Gantt Chart has an option to define columns as an array. You can manage the orde 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + private static List GetTaskCollection() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, 06), 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; } @@ -316,17 +343,19 @@ Gantt Chart has an option to define columns as an array. You can manage the orde {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeWDVzBAiIgBkv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + For further details regarding columns, refer [here](https://blazor.syncfusion.com/documentation/gantt-chart/columns). ## Enable editing -The editing feature enables you to edit the tasks in the Gantt Chart component. It can be enabled by using the [EditSettings.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowEditing) and [EditSettings.AllowTaskbarEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowTaskbarEditing) properties. +The editing feature enables you to edit the tasks in the Gantt Chart component. To activate this functionality, set both [EditSettings.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowEditing) and [EditSettings.AllowTaskbarEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowTaskbarEditing) properties to **true**. {% tabs %} {% highlight razor %} - + @@ -340,21 +369,27 @@ The editing feature enables you to edit the tasks in the Gantt Chart component. 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + private static List GetTaskCollection() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, 06), 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; } @@ -363,19 +398,21 @@ The editing feature enables you to edit the tasks in the Gantt Chart component. {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeWDVzBAiIgBkv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + N> When the edit mode is set to `Auto`, you can change the cells to editable mode by double-clicking anywhere at the Tree Grid and edit the task details in the edit dialog by double-clicking anywhere at the chart. You can find the full information regarding Editing from [here](https://blazor.syncfusion.com/documentation/gantt-chart/managing-tasks) ## Enable filtering -The filtering feature enables you to view the reduced amount of records based on filter criteria. Gantt Chart provides the menu filtering support for each column. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering) property to `true`. Filtering feature can also be customized using the [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_FilterSettings) property. +The filtering feature enables you to view the reduced amount of records based on filter criteria. The Gantt Chart supports column-wise menu filtering. To enable this feature, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering) property to **true**. The filtering behavior can be customized using the [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_FilterSettings) property. {% tabs %} {% highlight razor %} - + @@ -388,21 +425,27 @@ The filtering feature enables you to view the reduced amount of records based on 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + private static List GetTaskCollection() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, 06), 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; } @@ -411,17 +454,19 @@ The filtering feature enables you to view the reduced amount of records based on {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjheMNhfrqtjOYfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + You can find the full information regarding Filtering from [here](https://blazor.syncfusion.com/documentation/gantt-chart/filtering) ## Enable sorting -The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowSorting) property to `true`. The sorting feature can be customized using the [SortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SortSettings) property. +The sorting feature enables you to order the records. To enable sorting in the Gantt Chart, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowSorting) property to **true**. The sorting behavior can be customized using the [SortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SortSettings) property to define the sorting configuration. {% tabs %} {% highlight razor %} - + @@ -434,21 +479,27 @@ The sorting feature enables you to order the records. It can be enabled by setti 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + private static List GetTaskCollection() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, 06), 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; } @@ -457,23 +508,26 @@ The sorting feature enables you to order the records. It can be enabled by setti {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLeCZLJVrvlKPai?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + You can find the full information regarding Sorting from [here](https://blazor.syncfusion.com/documentation/gantt-chart/sorting) -## Enabling Predecessors or Task Relationships +## Enabling Predecessors or task relationships -Predecessor or task dependency in the Gantt Chart component is used to depict the relationship between the tasks. +The Gantt Chart component supports task dependencies to define the logical sequence of task execution. These relationships control the scheduling behavior between tasks based on their start and finish times. -* Start to Start (SS): You cannot start a task until the dependent task starts. -* Start to Finish (SF): You cannot finish a task until the dependent task finishes. -* Finish to Start (FS): You cannot start a task until the dependent task completes. -* Finish to Finish (FF): You cannot finish a task until the dependent task completes. -You can show the relationship in tasks by using the `Dependency` property as shown in the following code example. +- **Start to Start (SS)**: The successor task begins when the predecessor task begins. +- **Start to Finish (SF)**: The successor task finishes when the predecessor task begins. +- **Finish to Start (FS)**: The successor task begins when the predecessor task finishes. +- **Finish to Finish (FF)**: The successor task finishes when the predecessor task finishes. + +These relationships can be configured using the [Dependency](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Dependency) property in the task data. {% tabs %} {% highlight razor %} - + @@ -486,22 +540,22 @@ You can show the relationship in tasks by using the `Dependency` property as sho 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 static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1, Predecessor = "2" } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentID = 1, Predecessor = "2" } }; return Tasks; } @@ -510,15 +564,13 @@ You can show the relationship in tasks by using the `Dependency` property as sho {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrSsXrzhfcIfBtG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + You can find the full information regarding Predecessors from [here](https://blazor.syncfusion.com/documentation/gantt-chart/task-dependencies) ## 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. - -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. +Exceptions triggered during Gantt operations can be handled effectively without interrupting the application. These errors are captured using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_OnActionFailure) event, which provides detailed information returned from the server. This allows for appropriate handling, logging, or user notification without affecting the overall workflow. The following sample code demonstrates notifying user when server-side exception has occurred during data operation, @@ -530,35 +582,29 @@ The following sample code demonstrates notifying user when server-side exception @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids -@ErrorDetails + - + - - @code{ private string ErrorDetails = ""; 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public void ActionFailure(FailureEventArgs args) + public void ActionFailure(Syncfusion.Blazor.Grids.FailureEventArgs args) { this.ErrorDetails = args.Error.Message.ToString(); StateHasChanged(); @@ -568,6 +614,8 @@ The following sample code demonstrates notifying user when server-side exception {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrosNrTBJxCLRgJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/GanttChart). ## See also diff --git a/blazor/gantt-chart/getting-started-with-server-app.md b/blazor/gantt-chart/getting-started-with-server-app.md index 58b63b2622..0f54d454cd 100644 --- a/blazor/gantt-chart/getting-started-with-server-app.md +++ b/blazor/gantt-chart/getting-started-with-server-app.md @@ -11,7 +11,7 @@ documentation: ug This section briefly explains about how to include [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component in your Blazor server app using Visual Studio and Visual Studio code. -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) To get start quickly with Blazor Gantt Chart, you can check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/GanttChart) sample: @@ -658,4 +658,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- * [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file diff --git a/blazor/gantt-chart/getting-started-with-web-app.md b/blazor/gantt-chart/getting-started-with-web-app.md index fdbaea0db4..237612297c 100644 --- a/blazor/gantt-chart/getting-started-with-web-app.md +++ b/blazor/gantt-chart/getting-started-with-web-app.md @@ -7,11 +7,11 @@ component: Gantt Chart documentation: ug --- -# Getting Started with Blazor Gantt Chart Component in Web App +# Getting started with Blazor Gantt Chart component in web app This section briefly explains about how to include [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) {% tabcontents %} @@ -56,9 +56,9 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio Code +## Create a new Blazor Web App in Visual Studio code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +You can create a **Blazor Web App** using Visual Studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). @@ -74,11 +74,11 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -## Install Syncfusion® Blazor Gantt and Themes NuGet in the App +## Install Syncfusion® Blazor Gantt and Themes NuGet in the app If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. +* Press Ctrl+` to open the integrated terminal in Visual Studio code. * Ensure you’re in the project root directory where your `.csproj` file is located. * Run the following command to install a [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. @@ -132,7 +132,7 @@ cd BlazorApp.Client This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. -## Install Syncfusion® Blazor Gantt and Themes NuGet in the App +## Install Syncfusion® Blazor Gantt and Themes NuGet in the app Here's an example of how to add **Blazor Gantt Chart** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. @@ -154,7 +154,7 @@ N> Syncfusion® Blazor components are availa {% endtabcontents %} -## Add Import Namespaces +## Add import namespaces Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Gantt` namespace. @@ -167,9 +167,9 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor Service +## Register Syncfusion® Blazor service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. @@ -251,15 +251,8 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% highlight razor %} - + - - - - - - - @code{ @@ -271,21 +264,27 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + private static List GetTaskCollection() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, 06), 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; } @@ -294,7 +293,9 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -## Binding Gantt Chart with Data and Mapping Task Fields +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthyWNVzLgvAOlvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## 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. @@ -306,7 +307,7 @@ This following sample shows self-referential data binding in the Gantt Chart by {% highlight razor %} - + @@ -319,21 +320,27 @@ This following sample shows self-referential data binding in the Gantt Chart by 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + private static List GetTaskCollection() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, 06), 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; } @@ -342,9 +349,11 @@ This following sample shows self-referential data binding in the Gantt Chart by {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLeMZLfLAFkPmGF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## Defining columns -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: +The Gantt Chart has an option to define columns using the [GanttColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumns.html) component. To configure each column, use 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. @@ -359,10 +368,10 @@ Gantt Chart has an option to define columns as an array. You can manage the orde @using Syncfusion.Blazor.Grids - + - + @@ -380,21 +389,27 @@ Gantt Chart has an option to define columns as an array. You can manage the orde 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + private static List GetTaskCollection() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, 06), 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; } @@ -403,17 +418,19 @@ Gantt Chart has an option to define columns as an array. You can manage the orde {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeWDVzBAiIgBkv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + For further details regarding columns, refer [here](https://blazor.syncfusion.com/documentation/gantt-chart/columns). ## Enable editing -The editing feature enables you to edit the tasks in the Gantt Chart component. It can be enabled by using the [EditSettings.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowEditing) and [EditSettings.AllowTaskbarEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowTaskbarEditing) properties. +The editing feature enables you to edit the tasks in the Gantt Chart component. To activate this functionality, set both [EditSettings.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowEditing) and [EditSettings.AllowTaskbarEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowTaskbarEditing) properties to **true**. {% tabs %} {% highlight razor %} - + @@ -427,21 +444,27 @@ The editing feature enables you to edit the tasks in the Gantt Chart component. 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + private static List GetTaskCollection() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, 06), 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; } @@ -450,19 +473,21 @@ The editing feature enables you to edit the tasks in the Gantt Chart component. {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeWDVzBAiIgBkv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + N> When the edit mode is set to `Auto`, you can change the cells to editable mode by double-clicking anywhere at the Tree Grid and edit the task details in the edit dialog by double-clicking anywhere at the chart. You can find the full information regarding Editing from [here](https://blazor.syncfusion.com/documentation/gantt-chart/managing-tasks) ## Enable filtering -The filtering feature enables you to view the reduced amount of records based on filter criteria. Gantt Chart provides the menu filtering support for each column. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering) property to `true`. Filtering feature can also be customized using the [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_FilterSettings) property. +The filtering feature enables you to view the reduced amount of records based on filter criteria. The Gantt Chart supports column-wise menu filtering. To enable this feature, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering) property to **true**. The filtering behavior can be customized using the [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_FilterSettings) property. {% tabs %} {% highlight razor %} - + @@ -475,21 +500,27 @@ The filtering feature enables you to view the reduced amount of records based on 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + private static List GetTaskCollection() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, 06), 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; } @@ -498,17 +529,19 @@ The filtering feature enables you to view the reduced amount of records based on {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjheMNhfrqtjOYfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + You can find the full information regarding Filtering from [here](https://blazor.syncfusion.com/documentation/gantt-chart/filtering) ## Enable sorting -The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowSorting) property to `true`. The sorting feature can be customized using the [SortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SortSettings) property. +The sorting feature enables you to order the records. To enable sorting in the Gantt Chart, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowSorting) property to **true**. The sorting behavior can be customized using the [SortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SortSettings) property to define the sorting configuration. {% tabs %} {% highlight razor %} - + @@ -521,21 +554,27 @@ The sorting feature enables you to order the records. It can be enabled by setti 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + private static List GetTaskCollection() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, 06), 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; } @@ -544,25 +583,28 @@ The sorting feature enables you to order the records. It can be enabled by setti {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLeCZLJVrvlKPai?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + You can find the full information regarding Sorting from [here](https://blazor.syncfusion.com/documentation/gantt-chart/sorting) N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/GanttChart). -## Enabling Predecessors or Task Relationships +## Enabling Predecessors or task relationships + +The Gantt Chart component supports task dependencies to define the logical sequence of task execution. These relationships control the scheduling behavior between tasks based on their start and finish times. -Predecessor or task dependency in the Gantt Chart component is used to depict the relationship between the tasks. +- **Start to Start (SS)**: The successor task begins when the predecessor task begins. +- **Start to Finish (SF)**: The successor task finishes when the predecessor task begins. +- **Finish to Start (FS)**: The successor task begins when the predecessor task finishes. +- **Finish to Finish (FF)**: The successor task finishes when the predecessor task finishes. -* Start to Start (SS): You cannot start a task until the dependent task starts. -* Start to Finish (SF): You cannot finish a task until the dependent task finishes. -* Finish to Start (FS): You cannot start a task until the dependent task completes. -* Finish to Finish (FF): You cannot finish a task until the dependent task completes. -You can show the relationship in tasks by using the `Dependency` property as shown in the following code example. +These relationships can be configured using the [Dependency](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Dependency) property in the task data. {% tabs %} {% highlight razor %} - + @@ -575,22 +617,22 @@ You can show the relationship in tasks by using the `Dependency` property as sho 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 static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1, Predecessor = "2" } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentID = 1, Predecessor = "2" } }; return Tasks; } @@ -599,15 +641,17 @@ You can show the relationship in tasks by using the `Dependency` property as sho {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrSsXrzhfcIfBtG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + You can find the full information regarding Predecessors from [here](https://blazor.syncfusion.com/documentation/gantt-chart/task-dependencies) {% previewsample "https://blazorplayground.syncfusion.com/embed/hZrTDWLOAOhAyPxe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Handling exceptions -Exception handling in [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) is crucial for identifying errors, displaying error messages, and devising recovery strategies. You can access error messages and exception details via the -[OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_OnActionFailure) event. -Common Errors and Their Resolutions: +Exceptions triggered during Gantt operations can be handled effectively without interrupting the application. These errors are captured using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_OnActionFailure) event, which provides detailed information returned from the server. This allows for appropriate handling, logging, or user notification without affecting the overall workflow. + +Common errors and their resolutions: * **ResourceFields Configuration Error** @@ -625,11 +669,7 @@ Common Errors and Their Resolutions: Ensure that the [GanttSegmentFields.StartDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSegmentFields-2.html#Syncfusion_Blazor_Gantt_GanttSegmentFields_2_StartDate) field is properly configured by following the guidelines in the [Split Task documentation](https://blazor.syncfusion.com/documentation/gantt-chart/split-task). -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. - -The following sample code demonstrates how to notify the user when a server-side exception occurs during a data operation: +The following sample code demonstrates notifying user when server-side exception has occurred during data operation, {% tabs %} {% highlight razor %} @@ -639,35 +679,29 @@ The following sample code demonstrates how to notify the user when a server-side @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids -@ErrorDetails + - + - - @code{ private string ErrorDetails = ""; 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public void ActionFailure(FailureEventArgs args) + public void ActionFailure(Syncfusion.Blazor.Grids.FailureEventArgs args) { this.ErrorDetails = args.Error.Message.ToString(); StateHasChanged(); @@ -677,11 +711,10 @@ The following sample code demonstrates how to notify the user when a server-side {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBTZCBkAYLYNvrK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Gantt Chart](images/blazor-gantt-chart-handling-exception.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrosNrTBJxCLRgJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## See also 1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) 3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) - diff --git a/blazor/gantt-chart/getting-started.md b/blazor/gantt-chart/getting-started.md index 5448e3995e..a1dfc00154 100644 --- a/blazor/gantt-chart/getting-started.md +++ b/blazor/gantt-chart/getting-started.md @@ -7,11 +7,11 @@ control: Gantt Chart documentation: ug --- -# Getting Started with Blazor Gantt Chart Component +# Getting started with Blazor Gantt Chart component This section briefly explains about how to include [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component in your Blazor WebAssembly App using Visual Studio, Visual Studio Code and .NET CLI. -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) {% tabcontents %} @@ -21,11 +21,11 @@ This section briefly explains about how to include [Blazor Gantt Chart](https:// * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +## Create a new Blazor app in Visual Studio You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. -## Install Syncfusion® Blazor Gantt and Themes NuGet in the App +## Install Syncfusion® Blazor Gantt and Themes NuGet in the app To add **Blazor Gantt Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. @@ -48,9 +48,9 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +## Create a new Blazor app in Visual Studio code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +You can create a **Blazor WebAssembly app** using Visual Studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). @@ -65,9 +65,9 @@ cd BlazorApp {% endtabs %} -## Install Syncfusion® Blazor Gantt and Themes NuGet in the App +## Install Syncfusion® Blazor Gantt and Themes NuGet in the app -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. +* Press Ctrl+` to open the integrated terminal in Visual Studio code. * Ensure you’re in the project root directory where your `.csproj` file is located. * Run the following command to install a [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. @@ -116,9 +116,9 @@ cd BlazorApp This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. -## Install Syncfusion® Blazor Gantt and Themes NuGet in the App +## Install Syncfusion® Blazor Gantt and Themes NuGet in the app -Here's an example of how to add **Blazor Gantt Chart** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +Use the following command to add **Blazor Gantt Chart** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -136,7 +136,7 @@ N> Syncfusion® Blazor components are availa {% endtabcontents %} -## Add Import Namespaces +## Add import namespaces Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Gantt` namespace. @@ -149,9 +149,9 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor Service +## Register Syncfusion® Blazor service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -189,7 +189,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Blazor Gantt Chart component +## Add Syncfusion® Blazor Gantt Chart component Add the Syncfusion® Blazor Gantt Chart component in the **~/Pages/Index.razor** file. @@ -197,15 +197,8 @@ Add the Syncfusion® Blazor Gantt Chart comp {% highlight razor %} - + - - - - - - - @code{ @@ -217,29 +210,38 @@ Add the Syncfusion® Blazor Gantt Chart comp 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + private static List GetTaskCollection() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, 06), 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; } } + {% endhighlight %} {% endtabs %} -## Binding Gantt Chart with Data and Mapping Task Fields +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthyWNVzLgvAOlvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## 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. @@ -251,7 +253,7 @@ This following sample shows self-referential data binding in the Gantt Chart by {% highlight razor %} - + @@ -264,21 +266,27 @@ This following sample shows self-referential data binding in the Gantt Chart by 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + private static List GetTaskCollection() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, 06), 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; } @@ -287,9 +295,11 @@ This following sample shows self-referential data binding in the Gantt Chart by {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLeMZLfLAFkPmGF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## Defining columns -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: +The Gantt Chart has an option to define columns using the [GanttColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumns.html) component. To configure each column, use 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. @@ -304,10 +314,10 @@ Gantt Chart has an option to define columns as an array. You can manage the orde @using Syncfusion.Blazor.Grids - + - + @@ -325,21 +335,27 @@ Gantt Chart has an option to define columns as an array. You can manage the orde 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + private static List GetTaskCollection() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, 06), 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; } @@ -348,17 +364,19 @@ Gantt Chart has an option to define columns as an array. You can manage the orde {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeWDVzBAiIgBkv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + For further details regarding columns, refer [here](https://blazor.syncfusion.com/documentation/gantt-chart/columns). ## Enable editing -The editing feature enables you to edit the tasks in the Gantt Chart component. It can be enabled by using the [EditSettings.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowEditing) and [EditSettings.AllowTaskbarEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowTaskbarEditing) properties. +The editing feature enables you to edit the tasks in the Gantt Chart component. To activate this functionality, set both [EditSettings.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowEditing) and [EditSettings.AllowTaskbarEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowTaskbarEditing) properties to **true**. {% tabs %} {% highlight razor %} - + @@ -372,21 +390,27 @@ The editing feature enables you to edit the tasks in the Gantt Chart component. 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + private static List GetTaskCollection() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, 06), 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; } @@ -395,19 +419,21 @@ The editing feature enables you to edit the tasks in the Gantt Chart component. {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeWDVzBAiIgBkv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + N> When the edit mode is set to `Auto`, you can change the cells to editable mode by double-clicking anywhere at the Tree Grid and edit the task details in the edit dialog by double-clicking anywhere at the chart. You can find the full information regarding Editing from [here](https://blazor.syncfusion.com/documentation/gantt-chart/managing-tasks) ## Enable filtering -The filtering feature enables you to view the reduced amount of records based on filter criteria. Gantt Chart provides the menu filtering support for each column. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering) property to `true`. Filtering feature can also be customized using the [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_FilterSettings) property. +The filtering feature enables you to view the reduced amount of records based on filter criteria. The Gantt Chart supports column-wise menu filtering. To enable this feature, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering) property to **true**. The filtering behavior can be customized using the [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_FilterSettings) property. {% tabs %} {% highlight razor %} - + @@ -420,21 +446,27 @@ The filtering feature enables you to view the reduced amount of records based on 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + private static List GetTaskCollection() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, 06), 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; } @@ -443,17 +475,19 @@ The filtering feature enables you to view the reduced amount of records based on {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjheMNhfrqtjOYfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + You can find the full information regarding Filtering from [here](https://blazor.syncfusion.com/documentation/gantt-chart/filtering) ## Enable sorting -The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowSorting) property to `true`. The sorting feature can be customized using the [SortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SortSettings) property. +The sorting feature enables you to order the records. To enable sorting in the Gantt Chart, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowSorting) property to **true**. The sorting behavior can be customized using the [SortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SortSettings) property to define the sorting configuration. {% tabs %} {% highlight razor %} - + @@ -466,21 +500,27 @@ The sorting feature enables you to order the records. It can be enabled by setti 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + private static List GetTaskCollection() { - List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 } + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + 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, 06), 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; } @@ -489,23 +529,26 @@ The sorting feature enables you to order the records. It can be enabled by setti {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLeCZLJVrvlKPai?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + You can find the full information regarding Sorting from [here](https://blazor.syncfusion.com/documentation/gantt-chart/sorting) -## Enabling Predecessors or Task Relationships +## Enabling Predecessors or task relationships + +The Gantt Chart component supports task dependencies to define the logical sequence of task execution. These relationships control the scheduling behavior between tasks based on their start and finish times. -Predecessor or task dependency in the Gantt Chart component is used to depict the relationship between the tasks. +- **Start to Start (SS)**: The successor task begins when the predecessor task begins. +- **Start to Finish (SF)**: The successor task finishes when the predecessor task begins. +- **Finish to Start (FS)**: The successor task begins when the predecessor task finishes. +- **Finish to Finish (FF)**: The successor task finishes when the predecessor task finishes. -* Start to Start (SS): You cannot start a task until the dependent task starts. -* Start to Finish (SF): You cannot finish a task until the dependent task finishes. -* Finish to Start (FS): You cannot start a task until the dependent task completes. -* Finish to Finish (FF): You cannot finish a task until the dependent task completes. -You can show the relationship in tasks by using the `Dependency` property as shown in the following code example. +These relationships can be configured using the [Dependency](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Dependency) property in the task data. {% tabs %} {% highlight razor %} - + @@ -518,22 +561,22 @@ You can show the relationship in tasks by using the `Dependency` property as sho 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 static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentId = 1, Predecessor = "2" } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentID = 1, Predecessor = "2" } }; return Tasks; } @@ -542,18 +585,18 @@ You can show the relationship in tasks by using the `Dependency` property as sho {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrSsXrzhfcIfBtG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + You can find the full information regarding Predecessors from [here](https://blazor.syncfusion.com/documentation/gantt-chart/task-dependencies) {% previewsample "https://blazorplayground.syncfusion.com/embed/hZrTDWLOAOhAyPxe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## 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. +Exceptions triggered during Gantt operations can be handled effectively without interrupting the application. These errors are captured using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_OnActionFailure) event, which provides detailed information returned from the server. This allows for appropriate handling, logging, or user notification without affecting the overall workflow. 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. - The following sample code demonstrates notifying user when server-side exception has occurred during data operation, {% tabs %} @@ -564,35 +607,29 @@ The following sample code demonstrates notifying user when server-side exception @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids -@ErrorDetails + - + - - @code{ private string ErrorDetails = ""; 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } - public void ActionFailure(FailureEventArgs args) + public void ActionFailure(Syncfusion.Blazor.Grids.FailureEventArgs args) { this.ErrorDetails = args.Error.Message.ToString(); StateHasChanged(); @@ -602,7 +639,7 @@ The following sample code demonstrates notifying user when server-side exception {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBTZCBkAYLYNvrK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Gantt Chart](images/blazor-gantt-chart-handling-exception.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrosNrTBJxCLRgJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/GanttChart). diff --git a/blazor/gantt-chart/globalization.md b/blazor/gantt-chart/globalization.md index 3d1e4fa6ad..acea0c7d04 100644 --- a/blazor/gantt-chart/globalization.md +++ b/blazor/gantt-chart/globalization.md @@ -7,7 +7,9 @@ control: Gantt Chart documentation: ug --- -# Globalization in Blazor Gantt Chart Component +# Globalization in Blazor Gantt Chart component + +The Syncfusion Blazor Gantt Chart component provides a feature known as Globalization (global and local), which makes the application more accessible and useful for individuals from different regions and language backgrounds. You have the ability to view data in your preferred language and format, resulting in an enhanced overall experience. Add **UseRequestLocalization** middle-ware in the **Program.cs** file to get browser Culture Info. @@ -31,7 +33,6 @@ The Resource file is an XML file which contains the strings(key and value pairs) * Add **.resx** file to [Resources](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/localization?view=aspnetcore-7.0) folder and enter the key value (Locale Keywords) in the **Name** column and the translated string in the **Value** column as follows. - Name |Value (in Deutsch culture) -----|----- Gantt_EmptyRecord | Keine Datensätze zum Anzeigen @@ -354,25 +355,26 @@ N> ClientApplication denotes the ApplicationNameSpace of your project. ## Internationalization -* The Syncfusion® Blazor UI components are specific to the `American English (en-US)` culture by default. It utilizes the `Blazor Internationalization` package to parse and format the number and date objects based on the chosen culture. - -* Suppose, if you want to change any specific culture, then add the corresponding culture resource (`.resx`) file by using the below reference. +You can customize the culture settings of Syncfusion® Blazor UI components using the Blazor `Internationalization` package, which formats numbers and dates based on the selected culture. By default, components use `en-US`, and to switch to another culture, you need to add the corresponding `.resx` resource file to your application. [Changing culture and Adding Resx file in the application](https://blazor.syncfusion.com/documentation/gantt-chart/globalization#localization) + ## Right to left (RTL) -RTL provides an option to switch the text direction and layout of the Gantt component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). In the following sample, **EnableRtl** property is used to enable RTL in the Gantt. +You can enable right-to-left layout and text direction in the Gantt component using the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableRtl) property, which improves accessibility and user experience for languages such as Arabic, Farsi, and Urdu. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - - + + + @code{ - public SfGantt Gantt; private List TaskCollection { get; set; } protected override void OnInitialized() @@ -382,35 +384,39 @@ RTL provides an option to switch the text direction and layout of the Gantt comp 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 DateTime? EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } - private static List GetTaskCollection() + public 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, 23), }, - 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, 23), }, - 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, } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBesDVrThGvRASc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap5) to know how to render and configure the gantt. ## See also -* [How to enable RTL based on Syncfusion® blazor service](https://blazor.syncfusion.com/documentation/common/right-to-left#enable-rtl-for-all-components) \ No newline at end of file +* [How to enable RTL based on Syncfusion® Blazor service?](https://blazor.syncfusion.com/documentation/common/right-to-left#enable-rtl-for-all-components) \ No newline at end of file diff --git a/blazor/gantt-chart/indent-outdent.md b/blazor/gantt-chart/indent-outdent.md index cd562a8a29..327c1865f1 100644 --- a/blazor/gantt-chart/indent-outdent.md +++ b/blazor/gantt-chart/indent-outdent.md @@ -68,4 +68,3 @@ The following example shows how to enable built-in indent and outdent actions us {% endtabs %} {% previewsample "https://blazorplayground.syncfusion.com/embed/LXhSZaryzFrDtBuk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - diff --git a/blazor/gantt-chart/overview.md b/blazor/gantt-chart/overview.md index df52640719..20c37420d5 100644 --- a/blazor/gantt-chart/overview.md +++ b/blazor/gantt-chart/overview.md @@ -13,19 +13,75 @@ The Gantt Chart in Blazor offers a project management interface similar to Micro ## Key features -* [**Data sources**](./data-binding/) - The Blazor Gantt Chart component can be integrated with various remote API service for data binding by using the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or an enumerable collection of objects by using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DataSource) property. -* [**Large data binding**](./data-binding/) - Optimize performance when dealing with extensive datasets by initially loading only parent records. Child records are rendered dynamically upon expansion, reducing initial load times and improving user experience with large project structures. -* [**Editing**](./managing-tasks/): Directly edit task details such as duration, start and end dates, and dependencies within the Gantt Chart. Use the Edit dialog for structured input or interact with taskbars for a more visual editing approach. -* [**Task dependencies**](./task-dependencies/): Define and manage task relationships using various dependency types, including finish-to-start, start-to-finish, start-to-start, and finish-to-finish. This feature helps in accurately modeling project schedules and dependencies. -* [**Customizable timeline**](./time-line/): Adjust the timeline view to show time scales ranging from minutes to decades. The timeline can be customized to display specific intervals and custom text, and can be formatted in either one-tier or two-tier layouts. -* [**Taskbars**](./scheduling-tasks/): Customize the appearance of taskbars, including support for unscheduled tasks and the ability to display baselines. Taskbars visually represent the schedule and progress of tasks. -* [**Critical path**](./criticalpath/): Identify the sequence of critical tasks that determine the project's finish date. Delays in tasks on the critical path will directly impact the overall project schedule, allowing for better focus on crucial tasks. -* [**Columns**](./columns/): Customize the grid columns to display specific information and add custom columns as needed. This allows for tailored views and enhanced data presentation. -* [**Resources**](./resources/): Allocate and manage resources such as personnel, equipment, and materials. This feature helps in tracking resource availability and ensuring that tasks are assigned appropriately. -* [**Filtering**](./filtering/): Filter tasks and data using individual column filters and a toolbar search box. This functionality helps users quickly locate and manage specific tasks within the Gantt Chart. -* [**Toolbar**](./tool-bar/): Use the toolbar to manage various aspects of the Gantt Chart, including data operations and chart settings. The toolbar provides quick access to essential functions and controls. -* [**Rows**](./rows/): Customize and add rows to the Gantt Chart both at initialization and dynamically. This feature allows for flexible data presentation and organization of tasks. -* [**Selection**](./selection/): Customize how rows and cells are selected within the Gantt Chart, both at initialization and dynamically. This enables precise selection and interaction with tasks. -* [**Data markers or indicators**](./data-markers/): Display visual indicators and flags alongside taskbars and labels to highlight important data points or statuses. -* [**Event markers**](./event-markers/): Use event markers to emphasize significant days or milestones within the project timeline, aiding in tracking important events and deadlines. -* [**Holidays**](./holidays/): Define and manage non-working days (holidays) within the project calendar. This ensures that project schedules account for holidays and non-working periods. +**1. Data & Handling** +Supports flexible data integration and efficient processing through structured field mapping, remote data connectivity, and performance-optimized rendering for large datasets. + * [Data Binding](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding): The Gantt component supports both **hierarchical** and **self-referential** JSON structures. It also integrates seamlessly with remote data sources using the DataManager component, enabling RESTful API connections, OData, and other services. This flexibility allows dynamic data loading. + * [Task Field Mapping](https://blazor.syncfusion.com/documentation/gantt-chart/getting-started-with-web-app#binding-gantt-chart-with-data-and-mapping-task-fields): Maps specific data fields to Gantt chart properties using the `GanttTaskFields` configuration. Required fields include id, name, and startDate, with optional fields like duration, progress, and parentID to define task hierarchy and scheduling. + * [Large Data](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#load-child-on-demand): Optimized for large datasets using **virtualization** and **load-on-demand** techniques. Improves performance by rendering only visible rows and timeline cells during scroll operations. + +**2. Task Management** +Provides comprehensive tools for creating, scheduling, and modifying tasks, including support for dependencies, milestones, and dynamic updates to reflect real-time project changes. + * [Tasks](https://blazor.syncfusion.com/documentation/gantt-chart/scheduling-tasks): Supports both scheduled and unscheduled tasks. Scheduled tasks include start and end dates, durations, and dependencies, with flexible duration units such as days, hours, or minutes. Unscheduled tasks can be defined with only one or none of these values, allowing placeholders or milestones to be represented without fixed dates. This setup enables precise control over task planning and visibility within the project timeline. + * [Milestones](https://blazor.syncfusion.com/documentation/gantt-chart/scheduling-tasks#milestone): Represents tasks with zero duration that require both a start and end date. Milestones are used to mark key events in the project and are included in the timeline, impacting scheduling and progress tracking. + * [Split Tasks](https://blazor.syncfusion.com/documentation/gantt-chart/split-task#split-and-merge-tasks-dynamically) : Allows tasks to be divided into segments with gaps, useful for modeling interruptions or phased work. + * [Editing](https://blazor.syncfusion.com/documentation/gantt-chart/editing-tasks): Task details can be modified using different methods such as cell editing, dialog forms, and taskbar adjustments. Tasks can be changed by entering new values or by dragging and resizing directly on the timeline. + * [Row Drag/Drop](https://blazor.syncfusion.com/documentation/gantt-chart/resource-view#taskbar-drag-and-drop-between-resources): Allows tasks to be reordered or moved to a different position within the task hierarchy using drag-and-drop actions. + * [Dependencies](https://blazor.syncfusion.com/documentation/gantt-chart/task-dependencies): Defines relationships between tasks to control their sequence and timing. Supports standard dependency types such as Finish-to-Start (FS), Start-to-Finish (SF), Start-to-Start (SS), and Finish-to-Finish (FF). These relationships help maintain logical task flow and ensure accurate scheduling. + * [Critical Path](https://blazor.syncfusion.com/documentation/gantt-chart/criticalpath): Identifies and highlights tasks that directly affect the overall project completion timeline, aiding in risk and delay analysis. + * [Auto-Scheduling](https://blazor.syncfusion.com/documentation/gantt-chart/scheduling-tasks#automatically-scheduled-tasks): Automatically adjusts task start and end dates based on dependencies, constraints, working hours, holidays, and weekends. When enabled, parent tasks are scheduled according to the earliest start and latest end dates of their child tasks. Any updates to child tasks will automatically reflect in the parent task’s schedule and progress. + +**3. Timeline** +Enables time-based planning through configurable views, scalable timelines, and working time settings, supporting precise scheduling across various time units and calendar structures. + * [Views](https://blazor.syncfusion.com/documentation/gantt-chart/resources): Provides task visualization from different perspectives, including project-focused and resource-focused views. Helps in analyzing task progress, resource usage, and allocation based on the selected context. + * [Timeline](https://blazor.syncfusion.com/documentation/gantt-chart/time-line): Displays the project duration using time units such as minutes, days, or years. Supports single or dual-tier layouts, with each cell representing a specific time unit and format for scheduling tasks. + * [Work Hours](https://blazor.syncfusion.com/documentation/gantt-chart/scheduling-tasks#working-time-range): Defines daily working time ranges for accurate task scheduling. + * [Workweek](https://blazor.syncfusion.com/documentation/gantt-chart/scheduling-tasks#weekend-or-non-working-days):Configures which weekdays are considered working and which are non-working. This setup influences task planning and progress calculations. + * [Non-Working Time](https://blazor.syncfusion.com/documentation/gantt-chart/scheduling-tasks#weekend-or-non-working-days): Excludes specific hours or days from scheduling calculations. + * [Holidays](https://blazor.syncfusion.com/documentation/gantt-chart/holidays): Defines non-working dates within the project timeline to reflect organizational calendars. These dates are excluded from task scheduling and progress calculations. + * [Timezone](https://blazor.syncfusion.com/documentation/gantt-chart/timezone): Configures task scheduling based on a specific time zone. By default, it aligns with the system time zone, but can be set to follow any defined time zone to ensure accurate timeline alignment across different regions. + * [Zooming](https://blazor.syncfusion.com/documentation/gantt-chart/zooming): Adjusts the timeline scale by modifying cell width and switching between time units. Supports viewing task schedules across various time ranges, from minute-level detail to long-term planning. + +**4. Visualization** +Supports customizable visual elements for task representation, including taskbars, indicators, event markers, and timeline templates, enabling clear tracking and styling through themes and layout configurations. + * [Taskbars](https://blazor.syncfusion.com/documentation/gantt-chart/taskbar): Displays various task types including scheduled, unscheduled, split, and milestone. Supports visual enhancements like baselines, tooltips, and interactive drag-and-drop. + * [Event Markers](https://blazor.syncfusion.com/documentation/gantt-chart/event-markers): Adds vertical indicators to highlight specific dates such as milestones or deadlines. + * [Indicators](https://blazor.syncfusion.com/documentation/gantt-chart/data-markers): Shows visual cues like icons, flags, or badges to represent task status or priority. + * [Templates](https://blazor.syncfusion.com/documentation/gantt-chart/taskbar#tooltip-template): Enables customization of taskbar tooltips using `GanttTooltipSettings.TaskbarTemplate`, allowing display of specific task details in a user-defined format when hovering over tasks. + * [Timeline Template](https://blazor.syncfusion.com/documentation/gantt-chart/time-line#template): Allows customization of timeline cells for enhanced visual representation. + * [Themes](https://blazor.syncfusion.com/documentation/appearance/theme-studio#common-variables): Supports multiple design systems including Fluent, Tailwind, Bootstrap, and Material. Theme Studio enables branding and style customization. + +**5. Grid Setup** +Defines the tabular structure of the Gantt chart, allowing customization of columns, rows, and selection behavior to support readable layouts and interactive data handling. + * [Columns](https://blazor.syncfusion.com/documentation/gantt-chart/columns): Defines the structure and layout of the grid by specifying which task fields are displayed. Supports reordering and resizing to allow users to adjust column positions and widths. Templates can be used to customize both cell and header content for advanced formatting. Includes support for WBS columns to represent hierarchical task numbering and frozen columns to keep key fields visible during horizontal scrolling. Column rendering is optimized for performance, and a column chooser is available to control visibility dynamically. + * [Rows](https://blazor.syncfusion.com/documentation/gantt-chart/rows): Allows customization of row appearance, including styling and height adjustments to suit layout and readability requirements. + * [Selection](https://blazor.syncfusion.com/documentation/gantt-chart/selection): Provides functionality for selecting rows or individual cells within the grid. Supports both single and multiple selection modes. + +**6. Resources** +Handles resource planning and tracking through effort-based work mapping and allocation management, including detection of overallocation across personnel and assets. + * [Work Mapping](https://blazor.syncfusion.com/documentation/gantt-chart/work): Maps effort units to tasks using the `work` field, allowing precise control over resource allocation and planning based on assigned hours or workload. + * [Allocation](https://blazor.syncfusion.com/documentation/gantt-chart/resource-view#resource-overallocation): Resources such as personnel, equipment, and materials can be assigned to tasks. If a resource is given more work than its available capacity for a day, it is marked as over allocation. This helps maintain balanced workloads and prevents scheduling conflicts. + +**7. Interaction** +Enables user-driven control through filtering, toolbar actions, drag-and-drop, context menus, and keyboard navigation, supporting efficient task manipulation and grid operations. + * [Filtering](https://blazor.syncfusion.com/documentation/gantt-chart/filtering): Helps organize and focus task data using column Menu filters, Excel-style filtering, and toolbar search. These options make it easier to view specific tasks or values within the Gantt chart. + * [Toolbar](https://blazor.syncfusion.com/documentation/gantt-chart/tool-bar): Includes built-in and customizable command buttons for performing various actions related to task and chart management. + * [Drag and Drop](https://blazor.syncfusion.com/documentation/gantt-chart/drag-and-drop): Allows tasks and rows to be moved interactively for reordering and rescheduling within the Gantt chart. + * [Context Menu](https://blazor.syncfusion.com/documentation/gantt-chart/context-menu): Enables quick access to task and column operations through right-click interaction. Menu options vary based on the selected element, such as task rows, column headers, or chart areas. + * [Keyboard](https://blazor.syncfusion.com/documentation/gantt-chart/accessibility#keyboard-navigation): Enables efficient interaction through keyboard shortcuts for navigating tasks, editing values, and selecting rows or cells within the Gantt chart. + +**8. Performance** +Optimizes rendering and responsiveness through virtual scrolling, loading animations, and read-only configurations for handling large datasets effectively. + * [Virtual Scrolling](https://blazor.syncfusion.com/documentation/gantt-chart/virtualization): Enhances rendering efficiency by loading only the visible rows during scroll operations, which significantly improves responsiveness when handling large datasets. + +**9. Globalization** +Supports internationalization and accessibility through localization, right-to-left layout rendering, and compliance with accessibility standards like WCAG and ADA. + * [Localization](https://blazor.syncfusion.com/documentation/gantt-chart/globalization#localization): Automatically adjusts date formats, currencies, and textual labels based on the selected language and regional settings, using built-in internationalization support. + * [RTL](https://blazor.syncfusion.com/documentation/gantt-chart/globalization#right-to-left-rtl): Supports right-to-left layout rendering for languages such as Arabic, ensuring proper alignment and readability across UI components. + * [Accessibility](https://blazor.syncfusion.com/documentation/gantt-chart/accessibility): Complies with WCAG 2.2, Section 508, and ADA standards. Includes ARIA attributes and screen reader compatibility. + +**10. Export & Events** +Enables structured data export to Excel, CSV, and PDF formats, and provides event hooks for customizing chart behavior during rendering, editing, and user interactions. + * **Export:** + * [Excel and CSV](https://blazor.syncfusion.com/documentation/gantt-chart/excel-export): Enables exporting Gantt chart data to Excel and CSV formats, simplifying structured data handling for reporting and offline analysis. + * [PDF](https://blazor.syncfusion.com/documentation/gantt-chart/pdf-export): Allows exporting the chart as a PDF document, with support for single-page layout to generate compact and printable visual summaries. + * [Event Hooks](https://blazor.syncfusion.com/documentation/gantt-chart/events): Provides lifecycle events that enable customization of chart behavior during rendering, editing, and user interactions (e.g., DataBound, TaskbarEdited). diff --git a/blazor/gantt-chart/performance.md b/blazor/gantt-chart/performance.md index 1a8ecd9616..16896c7e53 100644 --- a/blazor/gantt-chart/performance.md +++ b/blazor/gantt-chart/performance.md @@ -1,17 +1,17 @@ --- layout: post -title: Performance tips for Blazor Gantt Chart Component | Syncfusion -description: Check out and learn here all about how to improve the loading performance of Syncfusion Blazor Gantt Chart component and more. +title: Syncfusion Blazor Gantt Chart Performance Optimization Guide +description: Learn how to optimize the loading and rendering performance of the Syncfusion Blazor Gantt Chart component, especially when working with large datasets. platform: Blazor control: Gantt Chart documentation: ug --- -# Performance tips for Blazor Gantt Chart Component +# Performance tips for Blazor Gantt Chart component -This article is a comprehensive guide on enhancing the loading performance of the Blazor Gantt Chart component, particularly when managing large datasets and numerous columns. It provides valuable insights into effective strategies and best practices for binding extensive data sources without encountering performance degradation. Through detailed explanations and actionable tips, this resource aims to equip users with the knowledge needed to optimize the performance of the Gantt Chart component during data binding, ensuring a smooth and responsive user experience. +This guide provides practical strategies to enhance the loading performance of the Blazor Gantt Chart component, especially when dealing with large datasets and multiple columns. It provides valuable insights into effective strategies and best practices for binding extensive data sources without encountering performance degradation. It includes actionable tips to ensure smooth data binding and a responsive user experience. -## How to improve loading performance by binding large dataset +## How to improve loading performance by binding large dataset? A Gantt chart consists of rows, columns, and taskbars. For example, binding 10 rows and 10 columns results in rendering 100 elements in the Document Object Model (DOM) of Grid area and 10 elements in the Document Object Model (DOM) of chart area. To ensure optimal loading performance for the component, it is recommended to limit the number of rows and columns rendered. This approach helps in efficiently managing large datasets and enhancing the overall user experience. @@ -29,7 +29,7 @@ To enhance the efficiency of the Blazor Gantt Chart, particularly when handling For the most comprehensive performance optimization, combining row, column, and timeline virtualization in the Blazor Gantt Chart allows efficient management of extensive datasets and timelines. By dynamically loading only the visible rows, columns, and timeline cells, this approach minimizes memory usage and ensures smooth scrolling and interaction across large projects. This combined strategy significantly improves performance, reduces initial load times, and enhances the overall user experience by maintaining a responsive and efficient Gantt Chart. -## How to improve performance of Gantt chart in Blazor WASM application +## How to improve performance of Gantt chart in Blazor WASM application? This section provides performance guidelines for using the Syncfusion® Gantt Chart component efficiently in Blazor WebAssembly (WASM) applications. For general Blazor WebAssembly performance best practices, please refer to the official guidelines [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/performance?view=aspnetcore-8.0). @@ -40,20 +40,21 @@ This section provides performance guidelines for using the Syncfusion  ``` -N> When setting `AutoCalculateDateScheduling` property to `false`, you must provide the valid data source; otherwise, the Gantt chart will render with invalid dates. +N> When setting `AutoCalculateDateScheduling` property to **false**, you must provide the valid data source; otherwise, the Gantt chart will render with invalid dates. -## How to improve loading performance by binding large data by showing custom text or element +## How to improve loading performance by binding large data by showing custom text or element? When integrating images or custom template elements into Gantt chart columns in the Blazor Gantt Chart, it is recommended to use the [Column Template](https://blazor.syncfusion.com/documentation/gantt-chart/column-template) feature rather than customizing data through event handlers such as [RowDataBound](https://blazor.syncfusion.com/documentation/gantt-chart/events#rowdatabound) or [QueryCellInfo](https://blazor.syncfusion.com/documentation/gantt-chart/events#querycellinfo). These events are triggered for every row and cell during rendering, which can significantly slow down the component’s rendering process, especially with large datasets. Additionally, using these events for custom element rendering can lead to performance degradation over time due to the accumulation of rendered elements. By utilizing the Column Template feature, you can efficiently render custom content without experiencing rendering delays, ensuring a smoother and more responsive user experience. -## How to improve loading performance by binding data from service +## How to improve loading performance by binding data from service? 1. Instead of fetching and binding data directly in the `OnInitializedAsync` method, it is advisable to set the data source in the Gantt Chart's [Created](https://blazor.syncfusion.com/documentation/gantt-chart/events#created) event. Fetching data within `OnInitializedAsync` can delay the application's startup time and affect the rendering of the Gantt Chart, especially if the service call is slow. By assigning the data inside the `Created` event, the Gantt Chart will have already been created/rendered. This way, you are only assigning the data that was previously fetched and stored in a variable, rather than making a service call during the component’s initialization. @@ -62,7 +63,7 @@ By utilizing the Column Template feature, you can efficiently render custom cont * [Custom binding](https://blazor.syncfusion.com/documentation/gantt-chart/custom-binding) * [Injecting service into CustomAdaptor](https://blazor.syncfusion.com/documentation/gantt-chart/custom-binding#inject-service-into-custom-adaptor) -## How to improve loading performance by referring individual script and CSS +## How to improve loading performance by referring individual script and CSS? Instead of using the consolidated `Syncfusion.Blazor` package, which includes all Syncfusion® Blazor components and can result in a larger package size, you should use the specific NuGet package for the Gantt Chart component, such as `Syncfusion.Blazor.Gantt`. This approach ensures that only the necessary components and dependencies for the Gantt Chart are included, leading to improved performance and reduced load times. @@ -72,9 +73,9 @@ Refer the below documentation * [Individual nuget package](https://blazor.syncfusion.com/documentation/gantt-chart/getting-started-with-web-app#install-syncfusion-blazor-gantt-and-themes-nuget-in-the-blazor-web-app) * [Adding script and CSS](https://blazor.syncfusion.com/documentation/gantt-chart/getting-started-with-web-app#add-stylesheet-and-script-resources) -By adopting these strategies, you can significantly improve the performance of the Blazor Gantt Chart during initial rendering and ensure a more responsive user experience. +These strategies help improve initial rendering performance and deliver a smoother user experience. -## How to optimize server-side data operations with adaptors +## How to optimize server-side data operations with adaptors? The Blazor Gantt Chart supports various adaptors (OData, ODataV4, WebAPI, URL, etc.) to facilitate server-side data operations and CRUD functionalities. By utilizing these adaptors along with the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component, you can seamlessly bind remote data sources to the Gantt Chart and execute actions. During data operations such as filtering and sorting, the corresponding action queries are generated according to the adaptor’s requirements. It is crucial to handle these actions on the application side and return the processed data back to the Gantt Chart. For efficient data processing, the suggested order for returning processed data to the Gantt Chart is as follows: @@ -85,9 +86,9 @@ The Blazor Gantt Chart supports various adaptors (OData, ODataV4, WebAPI, URL, e Understanding the concerns related to latency in the Syncfusion® Blazor Gantt Chart component, several factors contributing to responsiveness issues have been identified. Notably, when using features like filtering, taskbar resizing, and dialog edit in the Gantt Chart, delays may occur due to client-server interactions, if the server is located far from the client. -### Potential Solutions to Mitigate Delay +### Potential solutions to mitigate delay -**Network Latency**: Increased distance between the client and server can result in higher latency, affecting the responsiveness of client-server communication. +**Network latency**: Increased distance between the client and server can result in higher latency, affecting the responsiveness of client-server communication. **Solution**: Host the server in a region closer to the majority of your users to reduce network latency. Selecting a server location nearer to your target audience can significantly enhance response times. diff --git a/blazor/gantt-chart/responsive-columns.md b/blazor/gantt-chart/responsive-columns.md deleted file mode 100644 index fcf30a0839..0000000000 --- a/blazor/gantt-chart/responsive-columns.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -layout: post -title: Responsive columns in Blazor Gantt Chart Component | Syncfusion -description: Checkout and learn here all about Responsive columns in Syncfusion Blazor Gantt Chart component and much more. -platform: Blazor -control: Gantt Chart -documentation: ug ---- - -# Responsive columns in Blazor Gantt Chart Component - -You can toggle the column visibility based on media queries, which are defined in the `HideAtMedia`. The `HideAtMedia` accepts valid [Media Queries]( http://cssmediaqueries.com/what-are-css-media-queries.html ). - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Gantt - - - - - - - - - -@code{ - private List TaskCollection { get; set; } - protected override void OnInitialized() - { - this.TaskCollection = GetTaskCollection(); - } - - 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; } - } - - public static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, - new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, - new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, - new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } - }; - return Tasks; - } -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhyiNDuKAHMJvWZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/gantt-chart/row-selection.md b/blazor/gantt-chart/row-selection.md index a8a5231dd3..ccc2a86569 100644 --- a/blazor/gantt-chart/row-selection.md +++ b/blazor/gantt-chart/row-selection.md @@ -7,21 +7,28 @@ control: Gantt Chart documentation: ug --- -# Row Selection in Blazor Gantt Chart Component +# Row selection in Blazor Gantt Chart Component -The row selection in the Gantt Chart component can be enabled or disabled using the `AllowSelection` property. You can get the selected row object using the [GetSelectedRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetSelectedRecordsAsync) method. The following code example shows how to disable the row selection in Gantt Chart. +The Blazor Gantt Chart Component supports row selection using mouse clicks or keyboard navigation (arrow keys). This enables users to highlight, manipulate, or trigger actions on selected task rows. + +## Enable single row selection + +You can enable single row selection in the Gantt Chart component by setting [SelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SelectionMode.html) to **Row** and [SelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SelectionType.html) to **Single**. This allows you to select only one task row at a time. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt - + + - + + @code{ private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -58,18 +65,78 @@ The row selection in the Gantt Chart component can be enabled or disabled using {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrSiZtusYuuRsAU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBIWXWeopsBqWld?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> `Row` selection is the default type of Gantt Chart selection mode. -## Selecting a row on initial load +## Enable multiple row selection + +You can enable multiple row selection in the Gantt Chart component by setting [SelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SelectionMode.html) to **Row** and [SelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SelectionType.html) to **Multiple**. This allows selection of more than one task row at a time by holding down the **Ctrl** key while clicking on multiple rows. + + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt + + + + + + + +@code{ + private List TaskCollection { get; set; } + + protected override void OnInitialized() + { + this.TaskCollection = GetTaskCollection(); + } + + 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; } + } + + public static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 07), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 02), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } + }; + return Tasks; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVyCNiyyfKZoZzh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can select a row at the time of loading by setting the index of the row to the [SelectedRowIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SelectedRowIndex) property. Find the following code example for details. +## Select row at initial rendering + +You can highlight or pre-select a specific row during the initial rendering of the Gantt Chart component by setting the [SelectedRowIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SelectedRowIndex) property. This selects the row at the specified index when the Gantt Chart loads. + +The following example selects the row at index 3 during initial load: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt + @@ -77,6 +144,7 @@ You can select a row at the time of loading by setting the index of the row to t @code{ private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -115,35 +183,45 @@ You can select a row at the time of loading by setting the index of the row to t {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBSsXZaVthZuiLH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Selecting a row dynamically -You can select a single row dynamically using the [SelectRowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowAsync_System_Double_System_Nullable_System_Boolean__) method. Similarly, you can use the [SelectRowsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowAsync_System_Double_System_Nullable_System_Boolean__) method to dynamically select multiple rows. The following code demonstrates how to select a single or multiple rows dynamically by clicking the custom button. +## Select rows externally + +You can programmatically or dynamically select single rows, multiple rows, or a range of rows in the Blazor Gantt Chart component. + +### Single row selection + +Select a single row in the Gantt Chart component by calling the [SelectRowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowAsync_System_Double_System_Nullable_System_Boolean__) method with the desired row index. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Buttons - -Select Row -Select Rows - - - - - - +@using Syncfusion.Blazor.Inputs + +
+ + + Select Row +
+
+ + + + + +
+ @code{ - public SfGantt Gantt; - public void SelectRow() - { - this.Gantt.SelectRowAsync(2); - } - public void SelectRows() + public SfGantt GanttInstance; + public int RowIndexValue; + private List TaskCollection { get; set; } + + public async Task SelectRow() { - this.Gantt.SelectRowsAsync(new int[] {1,2,3}); + await GanttInstance.SelectRowAsync(RowIndexValue); } - private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -180,25 +258,46 @@ You can select a single row dynamically using the [SelectRowAsync](https://help. {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNryiZNaVtmBfDkH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVIMXMoSPiWnjYY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Multiple row selection +### Multiple rows selection -You can select multiple rows by setting the `SelectionSettings.Type` property to [Multiple](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SelectionType.html#Syncfusion_Blazor_Grids_SelectionType_Multiple). You can select more than one row by holding down the CTRL key while selecting multiple rows. The following code example explains how to enable multiple selection in Gantt Chart. +Select multiple rows in the Gantt Chart component by using the [SelectRowsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowsAsync_System_Int32___) method with an array of row indexes. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt -@using Syncfusion.Blazor.Grids - +@using Syncfusion.Blazor.Buttons + +
+ Select [1, 3] + Select [0, 2] + Select [2, 4] + Select [0, 5] + Select [1, 6] +
+
+ Select [0, 2, 7] + Select [1, 3, 4] + Select [4, 5, 6] + Select [2, 5, 6] +
+ @code{ + public SfGantt GanttInstance; private List TaskCollection { get; set; } + + public async Task SelectMultipleRows(int[] rowIndexes) + { + await GanttInstance.SelectRowsAsync(rowIndexes); + } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -235,4 +334,138 @@ You can select multiple rows by setting the `SelectionSettings.Type` property to {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVeMtXaLtvMvIVa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtryWZMSybRBQhJP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Get selected row information + +To access selected row details in the Blazor Gantt Chart component: + +- [GetSelectedRowIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetSelectedRowIndexesAsync) – Returns an array of index positions of the selected rows. +- [GetSelectedRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetSelectedRecordsAsync) – Returns an array of data objects corresponding to the selected rows. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Grids + +
+ Show Selected Tasks +
+@if (SelectedRecords?.Count > 0 && SelectedIndexes?.Count > 0) +{ +
+ + + + + + + + + @for (int i = 0; i < Math.Min(SelectedRecords.Count, SelectedIndexes.Count); i++) + { + var record = SelectedRecords[i]; + var index = SelectedIndexes[i]; + + + + + } + +
IndexTask Details
@index +
Task ID: @record.TaskID
+
Task Name: @record.TaskName
+
Start Date: @record.StartDate.ToString("MM/dd/yyyy")
+
Duration: @(record.Duration ?? "N/A")
+
Progress: @record.Progress %
+
+
+} + + + + + + + +@code { + private SfGantt Gantt; + private List TaskCollection { get; set; } + private List SelectedRecords { get; set; } = new(); + private List SelectedIndexes { get; set; } = new(); + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + private async Task GetSelectedRowInfo() + { + SelectedIndexes = await Gantt.GetSelectedRowIndexesAsync(); + SelectedRecords = await Gantt.GetSelectedRecordsAsync(); + } + + 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; } + } + + public static List GetTaskCollection() + { + return new List + { + new TaskData { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08) }, + new TaskData { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "3", Progress = 30, ParentID = 1 }, + new TaskData { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08) }, + new TaskData { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } + }; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhyCXWeRNkmGqpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/gantt-chart/rows.md b/blazor/gantt-chart/rows.md index bf667a9345..d2415a48de 100644 --- a/blazor/gantt-chart/rows.md +++ b/blazor/gantt-chart/rows.md @@ -9,11 +9,11 @@ documentation: ug # Rows in Blazor Gantt Chart Component -Row represents task information from the data source, and it is possible to perform the following actions in Gantt Chart rows. +Each row in the Blazor Gantt Chart Component represents a record from the data source and displays its associated field values in both tabular and timeline views. Rows support various interactions such as selection, cell editing, taskbar manipulation, sorting, filtering, and event triggering. ## Row height -It is possible to change the height of the row in Gantt Chart by setting row height in pixels to the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.IGantt.html#Syncfusion_Blazor_Gantt_IGantt_RowHeight) property. The following code example explains how to change the row height in Gantt Chart at load time. +You can customize row height in the Syncfusion® Gantt Chart by setting the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.IGantt.html#Syncfusion_Blazor_Gantt_IGantt_RowHeight) property. This helps display additional content within a row or reduce its height to align with the content size. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -69,11 +69,11 @@ It is possible to change the height of the row in Gantt Chart by setting row hei ## Expand or collapse row -In Gantt Chart, parent tasks are expanded/collapsed by using expand/collapse icons, expand all/collapse all toolbar items, and public methods. By default, all tasks in Gantt Chart are rendered in expanded state, but you can change this status using the properties below. +You can expand or collapse parent tasks in the Gantt Chart using expand/collapse icons, toolbar actions like Expand All or Collapse All, or public methods. By default, all tasks are rendered in an expanded state. -### Collapse all tasks at Gantt chart load +### Render parent rows in collapsed state -All tasks available in Gantt Chart are rendered in collapsed state by setting the [CollapseAllParentTasks](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_CollapseAllParentTasks) property as `true`. The following code example shows how to use this property. +You can collapse all parent rows during initial rendering by setting the [CollapseAllParentTasks](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_CollapseAllParentTasks) property in the Gantt Chart component. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -127,9 +127,9 @@ All tasks available in Gantt Chart are rendered in collapsed state by setting th {% previewsample "https://blazorplayground.syncfusion.com/embed/LDrIsNXEVMOywXCX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Define Expand/Collapse Status of Tasks +### Retain expand/collapse state on initial load -In Gantt Chart, you can render some tasks in collapsed state and some tasks in expanded state by defining expand status of the task in the data source. This value was mapped to Gantt Chart component by using [GanttTaskFields.ExpandState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_ExpandState) property. The following code example shows how to use this property. +You can retain the expand or collapse state of parent rows in the Gantt Chart during initial rendering by specifying the expand status in the data source and assigning it to [GanttTaskFields.ExpandState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_ExpandState) property. This property defines whether a parent row is displayed as expanded or collapsed when the component loads. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -186,7 +186,11 @@ In Gantt Chart, you can render some tasks in collapsed state and some tasks in e ### Customize expand and collapse action -You can use [GanttEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html) to handle on expand action, `Expanding` and `Expanded` events will be triggered with current expanding row’s information. Similarly, on collapse action, `Collapsing` and `Collapsed` events will be triggered. Using these events and their arguments, you can customize the expand/collapse action. The following code example shows how to prevent the particular row from expand/collapse action using the `Expanding` and `Collapsing` events. +You can customize expand and collapse behavior in the Syncfusion® Blazor Gantt component using the [expanding](https://blazor.syncfusion.com/documentation/gantt-chart/events#expanding), [expanded](https://blazor.syncfusion.com/documentation/gantt-chart/events#expanded), [collapsing](https://blazor.syncfusion.com/documentation/gantt-chart/events#collapsing), and [collapsed](https://blazor.syncfusion.com/documentation/gantt-chart/events#collapsed) events. + +The following example demonstrates how to: +- Cancel the expand action when the **TaskID** column value is 1. +- Cancel the collapse action when the **TaskID** column value is 5. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -258,9 +262,22 @@ You can use [GanttEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo {% previewsample "https://blazorplayground.syncfusion.com/embed/LthIWDZOLVCYxrbg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customize rows and cells +## Customize rows style + +You can customize the appearance of rows in the Blazor Gantt Chart using either events or CSS. + +### Using event + +To modify the appearance of rows in the grid portion, use the [RowDataBound](https://blazor.syncfusion.com/documentation/gantt-chart/events#rowdatabound) event. This event allows styling or other row-level customizations based on the data or specific logic. + +To customize rows in the chart portion, use the [QueryChartRowInfo](https://blazor.syncfusion.com/documentation/gantt-chart/events#querychartrowinfo) event. This event provides access to chart row elements and enables styling based on task data. -While rendering the Tree Grid part in Gantt Chart, the [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_RowDataBound) and [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_QueryCellInfo) events trigger for every row and cell. Using these events, you can customize the rows and cells. To customize the appearance of a row on the chart side by using the [QueryChartRowInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_QueryChartRowInfo) event. The following code example shows how to customize the cell and row elements using these events. +To customize grid cells, use the [QueryCellInfo](https://blazor.syncfusion.com/documentation/gantt-chart/events#querycellinfo) event. It is triggered for each cell in the grid and can be used to apply styles or logic based on specific condition. + +The following example demonstrates how to apply custom styles to rows and cells in the Gantt Chart component: + +- If **TaskID** is 4, a custom background style is applied to both the grid row and chart row. +- If the **Progress** column value is 30, a custom style is applied to the grid cell. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -269,8 +286,7 @@ While rendering the Tree Grid part in Gantt Chart, the [RowDataBound](https://he @using Syncfusion.Blazor.Grids - + @@ -291,10 +307,11 @@ While rendering the Tree Grid part in Gantt Chart, the [RowDataBound](https://he background-color: #FFFF00; } - .red-cell { + .green-cell { background-color: #20B2AA; } + @code{ public void QueryCellInfo(Syncfusion.Blazor.Grids.QueryCellInfoEventArgs args) { @@ -306,10 +323,11 @@ While rendering the Tree Grid part in Gantt Chart, the [RowDataBound](https://he } else { - args.Cell.AddClass(new string[] { "red-cell" }); + args.Cell.AddClass(new string[] { "green-cell" }); } } } + public void RowDataBound(RowDataBoundEventArgs args) { if (args.Data.TaskID == 4) @@ -317,6 +335,7 @@ While rendering the Tree Grid part in Gantt Chart, the [RowDataBound](https://he args.Row.AddClass(new string[] { "custom-row" }); } } + public void queryChart(QueryChartRowInfoEventArgs args) { if (args.Data.TaskID == 4) @@ -324,6 +343,7 @@ While rendering the Tree Grid part in Gantt Chart, the [RowDataBound](https://he args.Row.AddClass(new string[] { "custom-row" }); } } + private List TaskCollection { get; set; } protected override void OnInitialized() @@ -364,9 +384,23 @@ While rendering the Tree Grid part in Gantt Chart, the [RowDataBound](https://he {% previewsample "https://blazorplayground.syncfusion.com/embed/hDhIsDNuLVgNyliS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Styling alternate rows +### Using CSS - You can change the background color of alternative rows in Gantt chart by overriding the class as shown below. +The Syncfusion® Blazor Gantt Chart component allows row-level customization through CSS. Each row is assigned specific class names, enabling precise styling to improve readability and visual presentation. + +**Customize selected row:** + +To highlight the currently selected row, override the default styles using the following CSS: + +```css + .e-gantt .e-selectionbackground, .e-gantt .e-active { + background-color: #f9920b !important; + } +``` + +**Alternate row customization:** + +To create visual separation between consecutive rows, style alternate rows using the following class. ```css .e-altrow, tr.e-chart-row:nth-child(odd) { @@ -384,13 +418,20 @@ While rendering the Tree Grid part in Gantt Chart, the [RowDataBound](https://he ParentID="ParentID"> + + @code{ private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -427,21 +468,20 @@ While rendering the Tree Grid part in Gantt Chart, the [RowDataBound](https://he {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBIsXXELhxiOcmv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Row Style in Blazor Gantt Chart](images/blazor-gantt-chart-row-style.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBoMDWQfWWUnwjT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Accessing row task model information programmatically -The Blazor Gantt Chart Component provides a method called [GetRowTaskModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetRowTaskModel__0_) that can be used to obtain the values associated with task model details. These details include the level, expanded status, task width, task left, task progress width and more. +You can access task model information in the Blazor Gantt Chart using the [GetRowTaskModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetRowTaskModel__0_) method. It returns details such as task level, expand status, task width, left position, progress width, and other related values. -This is demonstrated in the below sample code, where the [GetRowTaskModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetRowTaskModel__0_) method is called on selecting the row, which returns the value of the task model details of the selected record. +The following example demonstrates how the `GetRowTaskModel` method is used within the [RowSelected](https://blazor.syncfusion.com/documentation/gantt-chart/events#rowselected) event to retrieve task model details for the selected record. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids; +
Task Model Properties:
@@ -527,25 +567,38 @@ This is demonstrated in the below sample code, where the [GetRowTaskModel](https ## Row hover -The `EnableRowHover` feature allows users to easily identify the current row by highlighting it when the mouse hovers over it. This feature can be activated by setting the [EnableRowHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableRowHover) property to true. The following code example explains how to enable row hover selection in Gantt Chart. +To highlight the current row when the mouse hovers over it, set the [EnableRowHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableRowHover) property to **true**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Buttons - +
+ + @(IsRowHoverEnabled ? "Disable Row Hover" : "Enable Row Hover") + +
+ @code{ private List TaskCollection { get; set; } + private bool IsRowHoverEnabled { get; set; } = true; + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + private void ToggleRowHover() + { + IsRowHoverEnabled = !IsRowHoverEnabled; + } + public class TaskData { public int TaskID { get; set; } @@ -577,29 +630,28 @@ The `EnableRowHover` feature allows users to easily identify the current row by {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrSCjDuBzJJpeHj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLIsDCwzLfDBScV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Clip mode -The clip mode provides options to display its overflow cell content and it can be defined by the `GanttColumn.ClipMode` property. +The clip mode provides options to display its overflow cell content and it can be defined by the [GanttColumn.ClipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_ClipMode) property. The following are three types of `ClipMode`: -* `Clip`: Truncates the cell content when it overflows its area. -* `Ellipsis`: Displays ellipsis when content of the cell overflows its area. -* `EllipsisWithTooltip`: Displays ellipsis when content of the cell overflows its area; it displays the tooltip content when hover over ellipsis. - -N> By default, all the column's `ClipMode` property is defined as `EllipsisWithTooltip`. +* **Clip**: Truncates the cell content when it overflows its area. +* **Ellipsis**: Displays ellipsis when content of the cell overflows its area. +* **EllipsisWithTooltip**: Displays ellipsis when content of the cell overflows its area; it displays the tooltip content when hover over ellipsis. ### Cell tooltip -You can enable the Grid cell tooltip by setting the [GanttColumn.ClipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_ClipMode) property to `EllipsisWithTooltip`. +You can enable the Grid cell tooltip by setting the [GanttColumn.ClipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_ClipMode) property to **EllipsisWithTooltip**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids + diff --git a/blazor/gantt-chart/searching.md b/blazor/gantt-chart/searching.md index cc0b6fe0ec..357264f41b 100644 --- a/blazor/gantt-chart/searching.md +++ b/blazor/gantt-chart/searching.md @@ -9,13 +9,16 @@ documentation: ug # Search in Blazor Gantt Chart Component -You can search for records in the Gantt Chart component by using the [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SearchAsync_System_String_) method with search key as a parameter. The Gantt Chart component provides an option to integrate the search text box in the toolbar by adding the search item to the `Toolbar` property. +The Syncfusion® Blazor Gantt Chart component allows quick filtering of records based on search input, improving access to relevant data in large datasets. + +To enable this feature, add the **Search** option to the `Toolbar` configuration. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt - + + @@ -27,135 +30,187 @@ You can search for records in the Gantt Chart component by using the [SearchAsyn this.TaskCollection = GetTaskCollection(); } + 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 DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } public int? ParentID { get; set; } } - - public static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, - new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, - new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, - new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }, - }; - return Tasks; - } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVosNjOVyjoYGal?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrSWZZSJQLgfUSZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Initial search -In the Gantt Chart component, you can load a task with some search criteria by using the [GanttSearchSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSearchSettings.html) property. To apply a search at initial rendering, set the value for `Fields`, `Operator`, `Key`, and `IgnoreCase` in the `GanttSearchSettings` property. +The Syncfusion® Blazor Gantt Chart component allows applying search criteria during initial load using the [GanttSearchSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSearchSettings.html) property. + +To configure this feature, define the following properties: + +| Property | Description | +|---------------|----------------------------------------------------------------------------------------------| +| `Fields` | Defines the fields where the search should be applied. | +| `Operator` | Sets the condition for matching (e.g., Contains, Equals). | +| `Key` | Specifies the value to search for. | +| `IgnoreCase` | Determines if the search should be case-insensitive. | +| `IgnoreAccent`| Ignores diacritic characters or accents during the search. + + +The following sample demonstrates an initial search where `Fields` is set to **TaskName**, `Operator` is **Contains**, `Key` is **Product**, and `IgnoreCase` is **true**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} -@using Syncfusion.Blazor @using Syncfusion.Blazor.Gantt - + + - + @code{ private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + 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 locàtion", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perförm soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil tëst appröval", 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 DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } public int? ParentID { get; set; } } - - public static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, - new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, - new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, - new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }, - }; - return Tasks; - } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhyCNDYLesldWCV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLyiDDSIBEAoMzK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Search operators -The search operator can be defined in the [GanttSearchSettings.Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSearchSettings.html#Syncfusion_Blazor_Gantt_GanttSearchSettings_Operator) property to configure specific searching. +Search operators specify the type of comparison used during a search. These are configured through the [GanttSearchSettings.Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSearchSettings.html#Syncfusion_Blazor_Gantt_GanttSearchSettings_Operator) property. The following operators are supported in searching: -Operator |Description ------|----- -startsWith |Checks whether a value begins with the specified value. -endsWith |Checks whether a value ends with the specified value. -contains |Checks whether a value contains the specified value. -equal |Checks whether a value is equal to the specified value. -notEqual |Checks for the values that are not equal to the specified value. +| Operator | Description | +|--------------|--------------------------------------------------| +| startsWith | Matches values that begin with the specified text. | +| endsWith | Matches values that end with the specified text. | +| contains | Matches values that include the specified text. | +| equal | Matches values that exactly match the specified text. | +| notEqual | Matches values that do not match the specified text. | -N> By default, the `GanttSearchSettings.Operator` value is *contains*. - -## Search by external button - -To search the Gantt Chart records from an external button, invoke the `SearchAsync` method. +> The default value for `GanttSearchSettings.Operator` is `contains`. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt -@using Syncfusion.Blazor.Buttons -Search - +@using Syncfusion.Blazor.DropDowns + +Gantt Search Operator + +
+ + + + + + +
+ + -@code{ - public SfGantt Gantt; - public void Search() + +@code { + private List TaskCollection { get; set; } + public Syncfusion.Blazor.Operator SearchOperator { get; set; } = Syncfusion.Blazor.Operator.StartsWith; + + public class DropDownOrder { - this.Gantt.SearchAsync("Perform"); + public string Text { get; set; } + public Syncfusion.Blazor.Operator Value { get; set; } } - private List TaskCollection { get; set; } + + List DropDownData = new List + { + new DropDownOrder(){Text="StartsWith",Value= Syncfusion.Blazor.Operator.StartsWith }, + new DropDownOrder(){Text="EndsWith",Value=Syncfusion.Blazor.Operator.EndsWith}, + new DropDownOrder(){Text="Contains",Value=Syncfusion.Blazor.Operator.Contains}, + new DropDownOrder(){Text="Equal",Value=Syncfusion.Blazor.Operator.Equal} + }; + + public void OnValueChange(ChangeEventArgs args) + { + SearchOperator = args.Value; + } + protected override void OnInitialized() { - this.TaskCollection = GetTaskCollection(); + TaskCollection = GetTaskCollection(); + } + + private static List GetTaskCollection() + { + return new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07) }, + 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 } + }; } public class TaskData @@ -163,45 +218,107 @@ To search the Gantt Chart records from an external button, invoke the `SearchAsy public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { 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/VDhyCXDyyrZiOnqz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Search by external button - public static List GetTaskCollection() +To perform a search from an external button in the Syncfusion® Blazor Gantt Chart component, call the [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SearchAsync_System_String_) method programmatically with the desired keyword. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Buttons + +
+ + Search +
+ + + + + +@code { + private SfGantt GanttInstance; + private string SearchText { get; set; } = string.Empty; + private List TaskCollection { get; set; } + + protected override void OnInitialized() { - List Tasks = new List() + TaskCollection = GetTaskCollection(); + } + + private void Search() + { + this.GanttInstance?.SearchAsync(SearchText); + } + + private void OnTextChanged(Syncfusion.Blazor.Inputs.ChangeEventArgs args) + { + if (string.IsNullOrWhiteSpace(args?.Value)) { - new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, - new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, - new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, - new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }, + this.GanttInstance?.SearchAsync(""); + } + } + + private static List GetTaskCollection() + { + return new List + { + new TaskData { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07) }, + 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/VDVyWjDEhySSElVj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLSWXtSfkTkIRvv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> You should set the `AllowFiltering` property to `true` for searching the content externally. ## Search specific columns -By default, the Gantt Chart component searches all the columns. You can search specific columns by defining the specific columns' field names in the [GanttSearchSettings.Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSearchSettings.html#Syncfusion_Blazor_Gantt_GanttSearchSettings_Fields) property. +To search specific columns in the Gantt Chart component, use the [GanttSearchSettings.Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSearchSettings.html#Syncfusion_Blazor_Gantt_GanttSearchSettings_Fields) property. This allows you to define which column fields should be included in the search, instead of searching across all columns by default. + +This following sample demonstrates searching only within the **TaskName** and **Duration** columns. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt - + + @@ -209,58 +326,59 @@ By default, the Gantt Chart component searches all the columns. You can search s @code{ private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + 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 DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } public int? ParentID { get; set; } } - - public static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, - new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, - new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, - new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }, - }; - return Tasks; - } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVIsZDareOpCZHb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhIsjteTkwVEGvi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> In above sample, you can search only `TaskName` and `Duration` column values. ## Clear search by external button -You can pass the `empty` string to the `SearchAsync` method to clear the searched Gantt records from the external button. +To clear the search results in the Syncfusion® Blazor Gantt Chart from an external button, you can invoke the [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SearchAsync_System_String_) method with an empty string to reset the search. {% tabs %} {% highlight razor tabtitle="Index.razor" %} -@using Syncfusion.Blazor @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Buttons -Clear Search - + +Clear Search + @code{ - public SfGantt Gantt; + public SfGantt GanttInstance; private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + public void Clear() { - this.Gantt.SearchAsync(""); + this.GanttInstance?.SearchAsync(""); + } + + 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 DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } public int? ParentID { get; set; } } - - public static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, - new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, - new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, - new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }, - }; - return Tasks; - } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrIijNYhHCLjwYA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVIstNSeXFfGxal?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/gantt-chart/selection.md b/blazor/gantt-chart/selection.md index 0c76953222..4da9f6b3d3 100644 --- a/blazor/gantt-chart/selection.md +++ b/blazor/gantt-chart/selection.md @@ -9,40 +9,68 @@ documentation: ug # Selection in Blazor Gantt Chart Component -Selection provides an option to highlight a row or a cell. It can be done using arrow keys or by scrolling down the mouse. To disable selection in the Gantt Chart component, set the `AllowSelection` to false. +The Selection feature provides the ability to highlight a row or cell in the Gantt component. Selection can be performed using arrow keys or mouse clicks. -The Gantt Chart component supports two types of selection that can be set by using the [SelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SelectionType.html) property. They are: +By default, selection is enabled. To disable selection, set the [AllowSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowSelection) property to **false**. -* `Single`: Sets a single value by default and allows only selection of a single row or a cell. -* `Multiple`: Allows you to select multiple rows or cells. To perform the multi-selection, press and hold the CTRL key and click the desired rows or cells. +The Gantt component supports two types of selection that can be set by using the [SelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SelectionType.html) property. They are: + +* **Single:** Allows selection of only one row or cell at a time. This is the default behavior. +* **Multiple:** Enables selection of multiple rows or cells. To perform multi-selection, press and hold the **Ctrl** key (on Windows/Linux) or **Cmd** key (on macOS) while clicking the desired rows or cells. ## Selection mode -The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component supports three types of selection modes that can be set by using the [SelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SelectionMode.html). They are: +The Syncfusion Blazor Gantt Chart component supports three selection modes, configured using [SelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SelectionMode.html) property. They are: -* `Row`: Allows you to select only rows, and the row value is set by default. -* `Cell`: Allows you to select only cells. -* `Both`: Allows you to select rows and cells at the same time. +- **Row:** Selects only rows. This is the default mode. +- **Cell:** Selects only individual cells. +- **Both:** Enables selection of both rows and cells at the same time. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids - - - - +@using Syncfusion.Blazor.DropDowns + +
+ + + + + +
+ + + -@code{ +@code { private List TaskCollection { get; set; } + public Syncfusion.Blazor.Grids.SelectionMode SelectionModeValue { get; set; } = Syncfusion.Blazor.Grids.SelectionMode.Both; + public class DropDownOrder + { + public string Text { get; set; } + public Syncfusion.Blazor.Grids.SelectionMode Value { get; set; } + } + List DropDownData = new List + { + new DropDownOrder() { Text = "Both", Value = Syncfusion.Blazor.Grids.SelectionMode.Both }, + new DropDownOrder() { Text = "Row", Value = Syncfusion.Blazor.Grids.SelectionMode.Row }, + new DropDownOrder() { Text = "Cell", Value = Syncfusion.Blazor.Grids.SelectionMode.Cell }, + }; + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + public void OnChange(ChangeEventArgs Args) + { + SelectionModeValue = Args.Value; + } + public class TaskData { public int TaskID { get; set; } @@ -56,13 +84,13 @@ The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gan public static List GetTaskCollection() { - List Tasks = new List() + List Tasks = new List() { - new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08) }, new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08) }, new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 07), Duration = "0", Progress = 30, ParentID = 5 } @@ -74,12 +102,13 @@ The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gan {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVyCZjurxAfnrAQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjresXWoKPmfErzv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Toggle selection -The toggle selection allows you to select and deselect a specific row or cell. To enable toggle selection, set the [EnableToggle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_EnableToggle) property of the `SelectionSettings` to `true`. If you click the selected row or cell, then it will be deselected and vice versa. -By default, the `EnableToggle` property is set to `false`. +Toggle selection allows you to select and deselect a specific row or cell with repeated clicks. To enable this feature, set the [EnableToggle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_EnableToggle) property of `SelectionSettings` to **true**. + +When enabled, clicking a selected row or cell will deselect it, and clicking it again will reselect it—vice versa. By default, the `EnableToggle` property is set to **false**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -88,7 +117,9 @@ By default, the `EnableToggle` property is set to `false`. @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons -Disable Toggle +
+ @buttonText +
@@ -98,10 +129,14 @@ By default, the `EnableToggle` property is set to `false`. @code{ public SfGantt Gantt; private bool toggle = true; - public void DisableToggle() + private string buttonText = "Disable Toggle"; + + private void ToggleSelection() { - this.toggle = false; + toggle = !toggle; + buttonText = toggle ? "Disable Toggle" : "Enable Toggle"; } + private List TaskCollection { get; set; } protected override void OnInitialized() { @@ -139,21 +174,22 @@ By default, the `EnableToggle` property is set to `false`. {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhSCDjaBdzGWiZk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLICXCdiRznIEHP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Drag selection -The Gantt Chart allows to select range of cells or rows by mouse or touch dragging. To enable drag selection, set the [AllowDragSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_AllowDragSelection) property of [GanttSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html) as true and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Type) property as `Multiple`. +The Gantt Chart component allows to select range of cells or rows by mouse or touch dragging. To enable this, set [GanttSelectionSettings.AllowDragSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_AllowDragSelection) to **true** and [GanttSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html) to **Multiple**. -* GanttChart supports drag selection in all selection modes. Selection mode can be set using [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Mode) property. +>* Drag selection is supported in all selection modes, configurable using the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Mode) property. -* GanttChart supports drag selection in both [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_CellSelectionMode) `Flow` and `Box` when cell selection enabled. +>* When cell selection is enabled, it works with both **Flow** and **Box** types defined by [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_CellSelectionMode) property. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids + @@ -202,7 +238,7 @@ The Gantt Chart allows to select range of cells or rows by mouse or touch draggi ## Clear selection -You can clear the selected cells and selected rows by using a method called [ClearSelectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ClearSelectionAsync). The following code example demonstrates how to clear the selected rows in Gantt Chart. +To clear selected rows and cells in the Gantt component, use the [ClearSelectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ClearSelectionAsync) method. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -211,28 +247,34 @@ You can clear the selected cells and selected rows by using a method called [Cle @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons -Select Rows -Clear Selection - + +
+ Select Rows + Clear Selection +
+ @code{ - public SfGantt Gantt; + public SfGantt GanttInstance; + private List TaskCollection { get; set; } + public void select() { - this.Gantt.SelectRowsAsync(new int[] {1,2,3}); + this.GanttInstance.SelectRowsAsync(new int[] {1,2,3}); } public void clear() { - this.Gantt.ClearSelectionAsync(); + this.GanttInstance.ClearSelectionAsync(); } - private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + public class TaskData { public int TaskID { get; set; } @@ -264,85 +306,14 @@ You can clear the selected cells and selected rows by using a method called [Cle {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrSiXDahdvPdbpH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -## Get selected row indexes and records - -You can get the selected row indexes by using the [GetSelectedRowIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetSelectedRowIndexesAsync) method. And by using [GetSelectedRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetSelectedRecordsAsync) method, you can get the selected record details. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Gantt -@using Syncfusion.Blazor.Grids - - - - - - - -@code{ - public SfGantt Gantt; - public async Task rowSelect(RowSelectEventArgs args) - { - var selectedRowIndexes = await this.Gantt.GetSelectedRowIndexesAsync(); - foreach (int rowIndex in selectedRowIndexes) - { - Console.WriteLine(rowIndex); - } - var selectedRecords = await this.Gantt.GetSelectedRecordsAsync(); - foreach (var record in selectedRecords) - { - Console.WriteLine(record.TaskID); - } - } - - private List TaskCollection { get; set; } - protected override void OnInitialized() - { - this.TaskCollection = GetTaskCollection(); - } - - 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; } - } - - public static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "3", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, - new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, - new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, - new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } - }; - return Tasks; - } -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVyMNtuVwtqsZpp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZryWDMeJjRDhaTI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Touch interaction -The touch interaction feature in the Blazor Gantt Chart component enables seamless interaction with the Gantt chart on touch screen devices. This functionality enhances usability on mobile devices and tablets, allowing users to effortlessly navigate and interact with the Gantt chart's content through touch gestures. +The Syncfusion® Blazor Gantt Chart component supports touch interaction, allowing you to intuitively navigate and interact with chart elements on touch-enabled devices like smart phones and tablets. This feature enhances usability by allowing intuitive gestures for selecting and managing tasks. -[Single Row selection](selection#selection-mode) : When you tap on a row using a touch screen, the row is automatically selected, providing a simple and intuitive way to select individual rows using a touch interface. +[Single Row selection](selection#selection-mode): Tapping a row on a touch screen automatically selects it, offering a straightforward way to interact with the chart. -[Multiple Row selection](selection#multiple-row-selection) : To select multiple rows, you can use the multi-row selection feature. When you tap on a row, a popup appears, offering the option to enable multi-row selection. Simply tap on the popup, then tap on each of the rows you wish to select. This functionality allows you to easily select and interact with multiple rows at once, enhancing efficiency and control, as demonstrated in the following image: +[Multiple Row selection](selection#multiple-row-selection): To select multiple rows, tap a row to display a popup that activates multi-selection mode. After tapping the popup, continue tapping the desired rows to select them. This allows you to select multiple rows simultaneously, as illustrated below: ![Multiple selection in Blazor Gantt Chart](images/blazor-gantt-chart-multiple-selection.PNG) \ No newline at end of file diff --git a/blazor/gantt-chart/sorting.md b/blazor/gantt-chart/sorting.md index bb6faeb1a6..aeea47bf11 100644 --- a/blazor/gantt-chart/sorting.md +++ b/blazor/gantt-chart/sorting.md @@ -9,14 +9,17 @@ documentation: ug # Sorting in Blazor Gantt Chart Component -Sorting enables you to sort data in the ascending or descending order. To sort a column, click the column header. To sort multiple columns, press and hold the CTRL key and click the column header. You can clear sorting of any one of the multi-sorted columns by pressing and holding the SHIFT key and clicking the specific column header. +The Syncfusion® Blazor Gantt Chart component provides sorting functionality to arrange task data in ascending or descending order based on column values. -To enable sorting in the Gantt Chart component, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowSorting) property to true. Sorting options can be configured through the [GanttSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSortSettings.html) property. +To enable sorting, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowSorting) property to **true**. You can configure sorting option using the [GanttSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSortSettings.html) property. + +Sorting is applied by clicking a column header. For multi-column sorting, hold the **CTRL** key while selecting additional headers. To remove sorting from a specific column in a multi-sorted view, hold the **SHIFT** key and click the column header. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt + @@ -24,6 +27,7 @@ To enable sorting in the Gantt Chart component, set the [AllowSorting](https://h @code{ private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -62,18 +66,21 @@ To enable sorting in the Gantt Chart component, set the [AllowSorting](https://h {% previewsample "https://blazorplayground.syncfusion.com/embed/LZVyCtjuUCssasrw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> * Gantt Chart columns are sorted in the ascending order. If you click the already sorted column, the sort direction toggles. -
* To disable sorting for a particular column, set the `GanttColumn.AllowSorting` property to false. +> * The Gantt Chart columns are sorted in the ascending order. If you click the already sorted column, the sort direction toggles. +> * To disable sorting for a particular column, set the `GanttColumn.AllowSorting` property to **false**. + +## Initial sorting -## Sorting column on Gantt chart initialization +You can configure sorting during the initial render of the Syncfusion Blazor Gantt Chart by setting the [GanttSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSortSettings.html) property. Within this configuration, define each column in the `GanttSortSettings.GanttSortDescriptors` collection using the `Field` and `Direction` properties to ensure the Gantt Chart loads with the desired sort order applied to the specified columns. -The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component can be rendered with sorted columns initially, and this can be achieved by using the `GanttSortSettings` property. You can add columns that are sorted initially in the `GanttSortSettings.GanttSortDescriptors` collection defined with `Field` and `Direction` properties. The following code example shows how to add the sorted column to Gantt Chart initialization. +The following code example shows how to add sorted columns during Gantt initialization, with `Field` set to **TaskID** and `Direction` to **Descending**, and another with `Field` as **TaskName** and `Direction` as **Ascending**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids + @@ -125,27 +132,37 @@ The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gan {% previewsample "https://blazorplayground.syncfusion.com/embed/BXrIitZEKiKMRFOb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Sorting column dynamically +## Sort columns externally + +You can externally sort columns, clear all sorting in the Syncfusion® Blazor Gantt Chart component using button clicks. -Columns in the Gantt Chart component can be sorted dynamically using the [SortByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SortByColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) method. The following code example demonstrates how to invoke the `SortByColumnAsync` method by clicking the custom button. +### Add sort columns + +You can externally sort a column in the Gantt Chart component using the [SortByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SortByColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) method with parameters for column name, sort direction, and multi-sort configuration. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt - - +@using Syncfusion.Blazor.Buttons + + + Sort Taskname Column + + @code{ - public SfGantt Gantt; + public SfGantt GanttInstance; + private List TaskCollection { get; set; } + public void Sorting() { - this.Gantt.SortByColumnAsync("TaskName", Syncfusion.Blazor.Grids.SortDirection.Descending, false); + this.GanttInstance.SortByColumnAsync("TaskName", Syncfusion.Blazor.Grids.SortDirection.Descending, false); } - private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -182,17 +199,21 @@ Columns in the Gantt Chart component can be sorted dynamically using the [SortBy {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLoMtNOACUwzssB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVICNWSBQXfbtDF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Clear all the sorted columns dynamically +### Clear sorting -In the Gantt Chart component, you can clear all the sorted columns and return to previous position using the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ClearSortingAsync) public method. The following code snippet shows how to clear all the sorted columns by clicking the custom button. +You can clear all sorted columns in the Gantt Chart component using the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ClearSortingAsync) method to reset the Gantt chart to its unsorted state. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt - +@using Syncfusion.Blazor.Buttons + + + Clear Sorting + @@ -247,17 +268,23 @@ In the Gantt Chart component, you can clear all the sorted columns and return to {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhyCtXEAWJByjUt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhyMXWeLHFWXGAv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Sorting events +## Customize the sort action -During the sort action, the Gantt Chart component triggers two events. The [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) event triggers before the sort action starts, and the [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted) event triggers after the sort action is completed. +You can customize sorting behavior using the [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) and the [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted) events. + +The following sample demonstrates how to cancel sorting on the **TaskID** column using the `Sorting` event. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids + + @@ -265,15 +292,25 @@ During the sort action, the Gantt Chart component triggers two events. The [Sort @code { + private string SortMessage { get; set; } + private List TaskCollection { get; set; } + + public void SortingHandler(SortingEventArgs args) { - Console.WriteLine(args.ColumnName + " " + args.Direction); + if (args.ColumnName == "TaskID") + { + args.Cancel = true; + SortMessage = $"Sorting on '{args.ColumnName}' is disabled."; + } } + public void SortedHandler(SortedEventArgs args) { - Console.WriteLine(args.ColumnName + " " + args.Direction); + SortMessage = $"Sorted by '{args.ColumnName}' in '{args.Direction}' order."; } - private List TaskCollection { get; set; } + + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -310,20 +347,24 @@ During the sort action, the Gantt Chart component triggers two events. The [Sort {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLeMZtkACJEJfta?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhosXioACzAmTYJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Sorting custom columns -In Gantt, you can sort custom columns of different types like string, numeric, etc., By adding the custom column in the column collection, you can perform initial sort using the `GanttSortSettings` or you can also sort the column dynamically by a button click. +You can sort custom columns of different types, such as string or numeric, by adding them to the column collection. Initial sorting can be configured using [GanttSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSortSettings.html), or the columns can be sorted dynamically through button clicks. -The following code snippets explains how to achieve this. +The following sample demonstrates sorting a custom column using an external button click: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt - - +@using Syncfusion.Blazor.Buttons + + + Sort Custom Column + + @@ -336,12 +377,14 @@ The following code snippets explains how to achieve this. @code{ - public SfGantt Gantt; + public SfGantt GanttInstance; + private List TaskCollection { get; set; } + public void Sorting() { - this.Gantt.SortByColumnAsync("CustomColumn", Syncfusion.Blazor.Grids.SortDirection.Descending, false); + this.GanttInstance.SortByColumnAsync("CustomColumn", Syncfusion.Blazor.Grids.SortDirection.Descending, false); } - private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -379,11 +422,11 @@ The following code snippets explains how to achieve this. {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyCjjEAiSSbmLG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLeMZWIgraoifUQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Touch interaction -To perform `tap` action on a column header, trigger [Sorting](https://blazor.syncfusion.com/documentation/gantt-chart/sorting) operation to the selected column. A popup is displayed for multi-column sorting. To sort multiple columns, tap the popup, and then tap the desired column headers. +To perform a tap action on a column header in the Syncfusion® Blazor Gantt component, the [Sorting](https://blazor.syncfusion.com/documentation/gantt-chart/sorting) operation is triggered for the selected column. A popup appears when multi-column sorting is enabled. To sort multiple columns, tap the popup and then tap the desired column headers. The following screenshot shows Gantt touch sorting, diff --git a/blazor/gantt-chart/state-management.md b/blazor/gantt-chart/state-management.md index 82e22e98ac..16b8c245eb 100644 --- a/blazor/gantt-chart/state-management.md +++ b/blazor/gantt-chart/state-management.md @@ -9,7 +9,7 @@ documentation: ug # State Management in Blazor Gantt Chart Component -Gantt Chart component retains its state using local storage on browser reload. Also, it allows users to save and load the Gantt state manually. The Gantt will use a user-provided state to render instead of its properties provided declaratively. +The Syncfusion® Blazor Gantt Chart component supports state management by retaining its configuration and data in browser local storage after a refresh within the same session. It also provides options to save and load the Gantt state manually. The properties below can be saved and loaded into a Gantt chart: @@ -26,7 +26,7 @@ ProjectEndDate | ## Enabling persistence -State persistence allows the Gantt chart to retain the current Gantt state in the browser's local storage for state maintenance. This action is handled through the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnablePersistence) property, which is disabled by default. When it is enabled, some properties of the Gantt will be retained even after refreshing the page. +You can enable persistence to maintain the Gantt chart’s current state in the browser’s local storage. This helps retain settings such as expanded rows and selected tasks after a page reload. To enable this behavior, set the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnablePersistence) property to **true**. N> The state will be persisted based on the **ID** property. So, it is recommended to explicitly set the **ID** property for the Gantt chart. @@ -36,11 +36,9 @@ N> The state will be persisted based on the **ID** property. So, it is recommend @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Navigations - + - + ParentID="ParentID"> @code{ private SfGantt Gantt; @@ -79,11 +77,11 @@ N> The state will be persisted based on the **ID** property. So, it is recommend ## Handling gantt state manually -You can manually handle the Gantt chart’s state by using built-in state persistence methods. You can use `GetPersistDataAsync`, `SetPersistDataAsync`, and `ResetPersistDataAsync` methods of the Gantt chart to save, load, and reset the Gantt chart's persisted state, respectively. +To manually manage the Gantt chart’s persisted state, use the following methods to save the current state, load a previously stored one, and reset the chart to its default configuration: -* `GetPersistData` - Returns Gantt chart properties as a string value, which is suitable for sending them over a network and storing them in databases. -* `SetPersistData` - Loads already saved state of the Gantt chart. -* `ResetPersistData` - Clears persisted data in window local storage and renders the Gantt chart with its original property values. +* [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetPersistDataAsync) - Saves the current chart state as a string, suitable for transmission or storage. +* [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SetPersistDataAsync_System_String_) - Loads a previously saved state into the chart. +* [ResetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ResetPersistDataAsync) - Resets the chart by clearing stored data and restoring its default configuration. {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/gantt-chart/templates.md b/blazor/gantt-chart/templates.md index b4aa043674..50ddbae050 100644 --- a/blazor/gantt-chart/templates.md +++ b/blazor/gantt-chart/templates.md @@ -7,25 +7,31 @@ control: Gantt Chart documentation: ug --- -# Templates in Blazor Gantt Chart Component +# Templates in Blazor Gantt Chart component -Blazor has templated components thats accepts one or more UI segments as input that can be rendered as part of the component during component rendering. Gantt Chart is a templated razor component, that allows customizing various part of the UI using template parameters. It allows rendering custom components or content based on its logic. +Blazor supports templated components that accept one or more UI segments as input, which are rendered as part of the component during execution. The Gantt Chart is a templated Razor component that allows customization of various UI elements using template parameters. This allows rendering of custom content or components based on application logic. -The available template options in Gantt Chart are as follows, -* [Column template](https://blazor.syncfusion.com/documentation/gantt-chart/column-template) - Used to customize cell content. -* [Header template](https://blazor.syncfusion.com/documentation/gantt-chart/columns#header-template) - Used to customize header cell content. +The Gantt Chart provides several template options for customization, such as: -## Template context +- [Column template](https://blazor.syncfusion.com/documentation/gantt-chart/column-template) – Used to customize the content of individual cells. +- [Header template](https://blazor.syncfusion.com/documentation/gantt-chart/columns#header-template) – Used to customize the content of header cells. -Most of the templates used by the Gantt Chart are of type `RenderFragment` and they will be passed with parameters. The parameters passed can be accessed to the templates using implicit parameter named `context`. This implicit parameter name can also be changed using the `Context` attribute. +## Template Context -For example, the data of the column template can be accessed using `context` as follows. +Most templates used in the Gantt Chart are of type `RenderFragment` and are passed with parameters. These parameters can be accessed within the template using an implicit parameter named `context`. The name of this implicit parameter can also be customized using the `Context` attribute. +For example, the data in a column template can be accessed using `context` as shown below: -## GanttChartTemplates component - -If a component contains any `RenderFragment` type property then it does not allow any child components other than the render fragment property, which is [by design in Blazor](https://github.com/dotnet/aspnetcore/issues/10836). +```razor + + + +``` -This prevents from directly specifying templates such as `TaskbarTemplate` and `MilestoneTemplate` as descendant of the Gantt Chart component. Hence the templates such as `TaskbarTemplate` and `MilestoneTemplate` should be wrapped around a component named `GanttTemplates` as follows. +## GanttChartTemplates component +In Blazor, when a component includes a `RenderFragment` property, it restricts the use of other child components outside that fragment. This is a framework-defined behavior [by design in Blazor](https://github.com/dotnet/aspnetcore/issues/10836), which prevents placing additional child components directly within the parent component. +Due to this limitation, templates such as `TaskbarTemplate` and `MilestoneTemplate` cannot be declared directly under the Gantt Chart component. Instead, they must be wrapped inside a `GanttTemplates` component to ensure proper structure and rendering. \ No newline at end of file diff --git a/blazor/gantt-chart/timezone.md b/blazor/gantt-chart/timezone.md index a5d0882a3b..790b82e178 100644 --- a/blazor/gantt-chart/timezone.md +++ b/blazor/gantt-chart/timezone.md @@ -9,24 +9,34 @@ documentation: ug # Timezone support in Blazor Gantt Chart -The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component schedules and displays dates and times based on the system timezone. To configure the Gantt Chart to use a specific timezone, assign the desired value to the [Timezone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Timezone) property accepts a standard IANA timezone string, such as `UTC` or `America/New_York`. This ensures that task dates, event markers, baseline dates, and indicators are interpreted and rendered in the specified timezone, with automatic handling of daylight saving time (DST) transitions. +The Blazor Gantt Chart component schedules and displays dates and times based on the system timezone by default. To configure it to use a specific timezone, assign a standard IANA timezone string such as `UTC` or `America/New_York` to the [Timezone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Timezone) property. + +This configuration ensures that task dates, event markers, baseline dates, and indicators are interpreted and rendered in the specified timezone. It also automatically adjusts for daylight saving time (DST) transitions, providing accurate scheduling and visualization across different regions. ## Timezone date conversion -The `Timezone` property enables the Gantt Chart to convert and display all task-related dates, including start dates, end dates, event markers, and baseline dates, in the specified timezone. For example, a `DateTime` value defined as `new DateTime(2025, 2, 4, 8, 0, 0)` in a system set to Pacific Standard Time (PST, UTC-08:00) will be adjusted to `2025-02-03 09:30 PM` when the `Timezone` property is set to `America/New_York` (ET, UTC-05:00 during standard time). This conversion ensures accurate scheduling and visualization of tasks across different timezones, accounting for DST where applicable. +The [timezone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Timezone) property allows the Gantt Chart to convert and display all task-related dates, including start dates, end dates, event markers, and baseline dates, in the specified timezone. + +For example, a `DateTime` value defined as `new DateTime(2025, 2, 4, 8, 0, 0)` in a system set to Pacific Standard Time (PST, UTC-08:00) will be adjusted to `2025-02-03 09:30 PM` when the `Timezone` property is set to `America/New_York` (ET, UTC-05:00 during standard time). + +This conversion ensures accurate scheduling and visualization across timezones, with adjustments for daylight saving time where applicable. ## Setting the timezone -The `Timezone` property can be assigned a standard IANA timezone string, such as `UTC`, `America/New_York`, or `Europe/London`, to control how dates are displayed. The following example demonstrates configuring the Gantt Chart with the `America/New_York` timezone and includes a dropdown to dynamically update the timezone, triggering a re-render of all task dates. +Set the [timezone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Timezone) property to a valid IANA timezone string such as UTC, America/New_York, or Europe/London. This ensures consistent task date displays and aligns taskbars with database times. + +The following example demonstrates configuring the Gantt Chart with the `America/New_York` timezone and includes a dropdown to dynamically update the timezone, triggering a re-render of all task dates. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.DropDowns @using Syncfusion.Blazor.Navigations - + @@ -102,50 +112,55 @@ The `Timezone` property can be assigned a standard IANA timezone string, such as } 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 static List GetTaskCollection() { List Tasks = new List() { - new TaskData { TaskId = 1, TaskName = "Project Schedule", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 4, 10, 0, 0, 0), Progress = 0 }, - new TaskData { TaskId = 2, TaskName = "Planning", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), ParentId = 1, Progress = 0 }, - new TaskData { TaskId = 3, TaskName = "Plan timeline", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), Duration = "6", Progress = 60, ParentId = 2 }, - new TaskData { TaskId = 4, TaskName = "Plan budget", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), Duration = "6", Progress = 90, ParentId = 2 }, - new TaskData { TaskId = 5, TaskName = "Allocate resources", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), Duration = "6", Progress = 75, ParentId = 2 }, - new TaskData { TaskId = 6, TaskName = "Planning complete", StartDate = new DateTime(2025, 3, 6, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), Duration = "0", Predecessor = "3FS,4FS,5FS", ParentId = 2, Progress = 0 }, - new TaskData { TaskId = 7, TaskName = "Design", StartDate = new DateTime(2025, 3, 13, 8, 0, 0), EndDate = new DateTime(2025, 3, 17, 8, 0, 0), ParentId = 1, Progress = 0 }, - new TaskData { TaskId = 8, TaskName = "Software Specification", StartDate = new DateTime(2025, 3, 13, 8, 0, 0), EndDate = new DateTime(2025, 3, 15, 0, 0, 0), Duration = "3", Progress = 60, Predecessor = "6FS", ParentId = 7 }, - new TaskData { TaskId = 9, TaskName = "Develop prototype", StartDate = new DateTime(2025, 3, 13, 8, 0, 0), EndDate = new DateTime(2025, 3, 15, 0, 0, 0), Duration = "3", Progress = 100, Predecessor = "6FS", ParentId = 7 }, - new TaskData { TaskId = 10, TaskName = "Get approval from customer", StartDate = new DateTime(2025, 3, 16, 8, 0, 0), EndDate = new DateTime(2025, 3, 17, 8, 0, 0), Duration = "2", Progress = 100, Predecessor = "9FS", ParentId = 7 }, - new TaskData { TaskId = 11, TaskName = "Design complete", StartDate = new DateTime(2025, 3, 17, 8, 0, 0), EndDate = new DateTime(2025, 3, 17, 8, 0, 0), Duration = "0", Predecessor = "10FS", ParentId = 7, Progress = 0 } + new TaskData { TaskID = 1, TaskName = "Project Schedule", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 4, 10, 0, 0, 0), Progress = 0 }, + new TaskData { TaskID = 2, TaskName = "Planning", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), ParentID = 1, Progress = 0 }, + new TaskData { TaskID = 3, TaskName = "Plan timeline", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), Duration = "6", Progress = 60, ParentID = 2 }, + new TaskData { TaskID = 4, TaskName = "Plan budget", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), Duration = "6", Progress = 90, ParentID = 2 }, + new TaskData { TaskID = 5, TaskName = "Allocate resources", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), Duration = "6", Progress = 75, ParentID = 2 }, + new TaskData { TaskID = 6, TaskName = "Planning complete", StartDate = new DateTime(2025, 3, 6, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), Duration = "0", Predecessor = "3FS,4FS,5FS", ParentID = 2, Progress = 0 }, + new TaskData { TaskID = 7, TaskName = "Design", StartDate = new DateTime(2025, 3, 13, 8, 0, 0), EndDate = new DateTime(2025, 3, 17, 8, 0, 0), ParentID = 1, Progress = 0 }, + new TaskData { TaskID = 8, TaskName = "Software Specification", StartDate = new DateTime(2025, 3, 13, 8, 0, 0), EndDate = new DateTime(2025, 3, 15, 0, 0, 0), Duration = "3", Progress = 60, Predecessor = "6FS", ParentID = 7 }, + new TaskData { TaskID = 9, TaskName = "Develop prototype", StartDate = new DateTime(2025, 3, 13, 8, 0, 0), EndDate = new DateTime(2025, 3, 15, 0, 0, 0), Duration = "3", Progress = 100, Predecessor = "6FS", ParentID = 7 }, + new TaskData { TaskID = 10, TaskName = "Get approval from customer", StartDate = new DateTime(2025, 3, 16, 8, 0, 0), EndDate = new DateTime(2025, 3, 17, 8, 0, 0), Duration = "2", Progress = 100, Predecessor = "9FS", ParentID = 7 }, + new TaskData { TaskID = 11, TaskName = "Design complete", StartDate = new DateTime(2025, 3, 17, 8, 0, 0), EndDate = new DateTime(2025, 3, 17, 8, 0, 0), Duration = "0", Predecessor = "10FS", ParentID = 7, Progress = 0 } }; return Tasks; } } -``` -![Timezone in Blazor Gantt Chart](./images/gantt-timezone.gif) + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrIZuLqprprdGQl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### CRUD operations with timezone -CRUD operations in the Blazor Gantt Chart respect the configured `Timezone` property, ensuring consistent date and time handling. When adding a task, the start date is calculated based on the minimum start date in the dataset and converted to the specified timezone. Editing or deleting tasks processes `StartDate` and `EndDate` values in the configured timezone, maintaining consistency in visualization, data storage, and export operations. +CRUD operations in the Blazor Gantt Chart respect the configured [Timezone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Timezone) property to ensure consistent date and time handling. When a task is added, the start date is calculated based on the minimum start date in the dataset and converted to the specified timezone. Editing or deleting tasks processes `StartDate` and `EndDate` values in the same timezone, maintaining consistency across visualization, data storage, and export operations. + +The following sample demonstrates how to enable task creation, modification, and deletion in the `America/New_York` timezone. CRUD functionality is configured using [GanttEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html) properties ([AllowAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowAdding), [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowEditing), [AllowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowDeleting), [AllowTaskbarEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowTaskbarEditing)). The `Timezone` property ensures accurate date conversion and display. `GanttTaskFields` support nullable `StartDate` and `EndDate` values, and [GanttDayWorkingTimeCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttDayWorkingTimeCollection.html) allows 24-hour scheduling. -This following code enables adding, editing, and deleting tasks in the Blazor Gantt Chart, with all operations processed in the `America/New_York` timezone. The `GanttEditSettings` properties (`AllowAdding`, `AllowEditing`, `AllowDeleting`, `AllowTaskbarEditing`) enable CRUD functionality, while the `Timezone` property ensures that task dates are converted and displayed consistently. The `GanttTaskFields` map nullable `StartDate` and `EndDate` properties to handle optional date values, and the `GanttDayWorkingTimeCollection` supports 24-hour scheduling in the specified timezone. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - + @@ -164,33 +179,36 @@ This following code enables adding, editing, and deleting tasks in the Blazor Ga } 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 static List GetTaskCollection() { List Tasks = new List() { - new TaskData { TaskId = 1, TaskName = "Project Schedule", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 4, 10, 0, 0, 0), Progress = 0 }, - new TaskData { TaskId = 2, TaskName = "Planning", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), ParentId = 1, Progress = 0 }, - new TaskData { TaskId = 3, TaskName = "Plan timeline", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), Duration = "6", Progress = 60, ParentId = 2 }, - new TaskData { TaskId = 4, TaskName = "Plan budget", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), Duration = "6", Progress = 90, ParentId = 2 }, - new TaskData { TaskId = 5, TaskName = "Allocate resources", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), Duration = "6", Progress = 75, ParentId = 2 }, - new TaskData { TaskId = 6, TaskName = "Planning complete", StartDate = new DateTime(2025, 3, 6, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), Duration = "0", Predecessor = "3FS,4FS,5FS", ParentId = 2, Progress = 0 }, - new TaskData { TaskId = 7, TaskName = "Design", StartDate = new DateTime(2025, 3, 13, 8, 0, 0), EndDate = new DateTime(2025, 3, 17, 8, 0, 0), ParentId = 1, Progress = 0 }, - new TaskData { TaskId = 8, TaskName = "Software Specification", StartDate = new DateTime(2025, 3, 13, 8, 0, 0), EndDate = new DateTime(2025, 3, 15, 0, 0, 0), Duration = "3", Progress = 60, Predecessor = "6FS", ParentId = 7 }, - new TaskData { TaskId = 9, TaskName = "Develop prototype", StartDate = new DateTime(2025, 3, 13, 8, 0, 0), EndDate = new DateTime(2025, 3, 15, 0, 0, 0), Duration = "3", Progress = 100, Predecessor = "6FS", ParentId = 7 }, - new TaskData { TaskId = 10, TaskName = "Get approval from customer", StartDate = new DateTime(2025, 3, 16, 8, 0, 0), EndDate = new DateTime(2025, 3, 17, 8, 0, 0), Duration = "2", Progress = 100, Predecessor = "9FS", ParentId = 7 }, - new TaskData { TaskId = 11, TaskName = "Design complete", StartDate = new DateTime(2025, 3, 17, 8, 0, 0), EndDate = new DateTime(2025, 3, 17, 8, 0, 0), Duration = "0", Predecessor = "10FS", ParentId = 7, Progress = 0 } + new TaskData { TaskID = 1, TaskName = "Project Schedule", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 4, 10, 0, 0, 0), Progress = 0 }, + new TaskData { TaskID = 2, TaskName = "Planning", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), ParentID = 1, Progress = 0 }, + new TaskData { TaskID = 3, TaskName = "Plan timeline", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), Duration = "6", Progress = 60, ParentID = 2 }, + new TaskData { TaskID = 4, TaskName = "Plan budget", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), Duration = "6", Progress = 90, ParentID = 2 }, + new TaskData { TaskID = 5, TaskName = "Allocate resources", StartDate = new DateTime(2025, 3, 4, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), Duration = "6", Progress = 75, ParentID = 2 }, + new TaskData { TaskID = 6, TaskName = "Planning complete", StartDate = new DateTime(2025, 3, 6, 8, 0, 0), EndDate = new DateTime(2025, 3, 10, 0, 0, 0), Duration = "0", Predecessor = "3FS,4FS,5FS", ParentID = 2, Progress = 0 }, + new TaskData { TaskID = 7, TaskName = "Design", StartDate = new DateTime(2025, 3, 13, 8, 0, 0), EndDate = new DateTime(2025, 3, 17, 8, 0, 0), ParentID = 1, Progress = 0 }, + new TaskData { TaskID = 8, TaskName = "Software Specification", StartDate = new DateTime(2025, 3, 13, 8, 0, 0), EndDate = new DateTime(2025, 3, 15, 0, 0, 0), Duration = "3", Progress = 60, Predecessor = "6FS", ParentID = 7 }, + new TaskData { TaskID = 9, TaskName = "Develop prototype", StartDate = new DateTime(2025, 3, 13, 8, 0, 0), EndDate = new DateTime(2025, 3, 15, 0, 0, 0), Duration = "3", Progress = 100, Predecessor = "6FS", ParentID = 7 }, + new TaskData { TaskID = 10, TaskName = "Get approval from customer", StartDate = new DateTime(2025, 3, 16, 8, 0, 0), EndDate = new DateTime(2025, 3, 17, 8, 0, 0), Duration = "2", Progress = 100, Predecessor = "9FS", ParentID = 7 }, + new TaskData { TaskID = 11, TaskName = "Design complete", StartDate = new DateTime(2025, 3, 17, 8, 0, 0), EndDate = new DateTime(2025, 3, 17, 8, 0, 0), Duration = "0", Predecessor = "10FS", ParentID = 7, Progress = 0 } }; return Tasks; } } -``` -![Crud operations with Timezone in Blazor Gantt Chart](./images/gantt-crud-operations-timezone.gif) \ No newline at end of file + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLyNargJLGOfAuL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/gantt-chart/wbs-column.md b/blazor/gantt-chart/wbs-column.md index 05b353937b..ca16f26975 100644 --- a/blazor/gantt-chart/wbs-column.md +++ b/blazor/gantt-chart/wbs-column.md @@ -7,23 +7,25 @@ control: Gantt Chart documentation: ug --- -# Work Breakdown Structure (WBS) in Blazor Gantt component +# Work Breakdown Structure (WBS) in Blazor Gantt Component -The Work Breakdown Structure (WBS) organizes project tasks hierarchically in the Gantt component by assigning unique codes to each task. This system enhances visualization and management by clearly reflecting task relationships and levels through a structured numbering scheme (1, 1.1, 1.1.1, etc.). It proves especially valuable in complex environments like construction projects or enterprise-scale software development. +The Work Breakdown Structure (WBS) organizes tasks hierarchically by assigning structured codes to each item. This improves task visibility and management by clearly representing relationships and levels using a numbering format (e.g., 1, 1.1, 1.1.1). It is especially useful in complex scenarios such as construction or enterprise-scale software projects. WBS provides a structured coding system for tasks, enabling clear hierarchy and predecessor relationships. The automatic code generation ensures efficient task organization, while auto-updates maintain accuracy during sorting, filtering, editing, and row operations. This enhances project tracking in hierarchical structures with event-driven control for performance optimization. -## Configuration and implementation +## Configuration and Implementation -To enable WBS in the Blazor Gantt component, set the [ShowWbsColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ShowWbsColumn) property to `true`. This displays the WBS column in the treegrid area of the Gantt chart. +To display the WBS column in the Gantt treegrid, set the [ShowWbsColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ShowWbsColumn) property to **true**. -The [AutoGenerateWbs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AutoGenerateWbs) property handles WBS code generation automatically. When enabled, the component creates WBS codes based on the task hierarchy and maintains updated codes when tasks are added, deleted, moved, edited, indented, outdented, sorted, filtered, or searched. +To automatically generate and maintain WBS codes based on task hierarchy, enable the [AutoGenerateWbs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AutoGenerateWbs) property. WBS codes are updated when tasks are added, deleted, moved, edited, indented, outdented, sorted, filtered, or searched. -To render the WBS and WBS Predecessor columns, you need to bind the `WbsCode` and `WbsPredecessor` fields in `GanttTaskFields`. +To render WBS and WBS Predecessor columns, bind the `WbsCode` and `WbsPredecessor` fields in `GanttTaskFields`. -The WBS code generation follows a hierarchical numbering pattern where parent tasks receive sequential numbers (1, 2, 3), and child tasks append decimal notation (1.1, 1.2, 1.1.1). This automatic generation recalculates codes whenever the task hierarchy changes through operations like indenting, outdenting, or reordering tasks. +WBS codes follow a hierarchical structure: parent tasks use sequential numbers (e.g., 1, 2, 3), and child tasks use decimal notation (e.g., 1.1, 1.2, 1.1.1). Codes are recalculated automatically when the task hierarchy changes due to operations like indenting, outdenting, or reordering. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - - + @@ -65,40 +66,46 @@ The WBS code generation follows a hierarchical numbering pattern where parent ta { return new List() { - new TaskData() { TaskId = 1, TaskName = "Project Management", StartDate = new DateTime(2023, 04, 02), Duration = 5, Progress = 40, ParentId = null }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform Soil test", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, ParentId = 1, Predecessor = "3FS" }, - new TaskData() { TaskId = 5, TaskName = "Project Estimation", StartDate = new DateTime(2023, 04, 02), Duration = 5, Progress = 40, ParentId = null }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 40, ParentId = 5, Predecessor = "6FS" } + new TaskData() { TaskID = 1, TaskName = "Project Management", StartDate = new DateTime(2023, 04, 02), Duration = 5, Progress = 40, ParentID = null }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform Soil test", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, ParentID = 1, Predecessor = "3FS" }, + new TaskData() { TaskID = 5, TaskName = "Project Estimation", StartDate = new DateTime(2023, 04, 02), Duration = 5, Progress = 40, ParentID = null }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 40, ParentID = 5, Predecessor = "6FS" } }; } 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 int Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } public string Predecessor { get; set; } - public string? WbsCode { get; set; } - public string? WbsPredecessor { get; set; } + public string WbsCode { get; set; } + public string WbsPredecessor { get; set; } } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLoDEroBqxKFzeJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + > The WBS column in Gantt chart currently supports string data types for both WBS codes and WBS predecessor values, ensuring consistent text-based representation across all project hierarchy levels and dependency relationships. -## Performance optimization with conditional updates +## Performance Optimization with Conditional Updates -For enhanced performance in large datasets, controlling when WBS codes are recalculated by through the [DataBound](https://blazor.syncfusion.com/documentation/gantt-chart/events#databound) and [RowDropped](https://blazor.syncfusion.com/documentation/gantt-chart/events#rowdropped) events. This approach optimizes performance during intensive operations like drag-and-drop by enabling auto-update only when necessary. +To improve performance with large datasets, control WBS code recalculation using the [DataBound](https://blazor.syncfusion.com/documentation/gantt-chart/events#databound) and [RowDropped](https://blazor.syncfusion.com/documentation/gantt-chart/events#rowdropped) events. This approach ensures updates occur only when necessary, such as during drag-and-drop operations. -The following example demonstrates conditional WBS auto-update activation specifically during row drag and drop operations, preventing unnecessary recalculations during other interactions. +The example below demonstrates how WBS auto-update is conditionally triggered during row drag-and-drop, avoiding unnecessary recalculations during other interactions. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids @@ -109,19 +116,18 @@ The following example demonstrates conditional WBS auto-update activation specif ShowWbsColumn="true" AutoGenerateWbs="@EnableAutoUpdate" AllowRowDragAndDrop="true"> - - + @@ -165,30 +171,33 @@ The following example demonstrates conditional WBS auto-update activation specif { return new List() { - new TaskData() { TaskId = 1, TaskName = "Project Management", StartDate = new DateTime(2023, 04, 02), Duration = 5, Progress = 40, ParentId = null }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform Soil test", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project Estimation", StartDate = new DateTime(2023, 04, 02), Duration = 5, Progress = 40, ParentId = null }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 40, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project Management", StartDate = new DateTime(2023, 04, 02), Duration = 5, Progress = 40, ParentID = null }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform Soil test", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project Estimation", StartDate = new DateTime(2023, 04, 02), Duration = 5, Progress = 40, ParentID = null }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 40, ParentID = 5 } }; } 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 int Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } - public string? WbsCode { get; set; } - public string? WbsPredecessor { get; set; } + public int? ParentID { get; set; } + public string WbsCode { get; set; } + public string WbsPredecessor { get; set; } } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZryNEBeVUcysGjr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Limitations @@ -199,9 +208,9 @@ The WBS feature has a few limitations in the Gantt component: * WBS Code and WBS Predecessor fields cannot be mapped directly from the data source as they are generated dynamically by the component based on task hierarchy. ## See Also -- [How to define columns manually in Blazor Gantt Chart](https://ej2.syncfusion.com/blazor/documentation/gantt-chart/columns/column) -- [How to customize column headers in Blazor Gantt Chart](https://ej2.syncfusion.com/blazor/documentation/gantt-chart/columns/column-headers) -- [How to use the column menu in Blazor Gantt Chart](https://ej2.syncfusion.com/blazor/documentation/gantt-chart/columns/column-menu) -- [How to reorder columns in Blazor Gantt Chart](https://ej2.syncfusion.com/blazor/documentation/gantt-chart/columns/column-reorder) -- [How to resize columns in Blazor Gantt Chart](https://ej2.syncfusion.com/blazor/documentation/gantt-chart/columns/column-resizing) -- [How to use column templates in Blazor Gantt Chart](https://ej2.syncfusion.com/blazor/documentation/gantt-chart/columns/column-template) \ No newline at end of file +- [How to define columns manually in Blazor Gantt Chart?](https://ej2.syncfusion.com/blazor/documentation/gantt-chart/columns/column) +- [How to customize column headers in Blazor Gantt Chart?](https://ej2.syncfusion.com/blazor/documentation/gantt-chart/columns/column-headers) +- [How to use the column menu in Blazor Gantt Chart?](https://ej2.syncfusion.com/blazor/documentation/gantt-chart/columns/column-menu) +- [How to reorder columns in Blazor Gantt Chart?](https://ej2.syncfusion.com/blazor/documentation/gantt-chart/columns/column-reorder) +- [How to resize columns in Blazor Gantt Chart?](https://ej2.syncfusion.com/blazor/documentation/gantt-chart/columns/column-resizing) +- [How to use column templates in Blazor Gantt Chart?](https://ej2.syncfusion.com/blazor/documentation/gantt-chart/columns/column-template) \ No newline at end of file diff --git a/blazor/gantt-chart/webassembly-performance.md b/blazor/gantt-chart/webassembly-performance.md index 53dbad23a3..9ec87948d2 100644 --- a/blazor/gantt-chart/webassembly-performance.md +++ b/blazor/gantt-chart/webassembly-performance.md @@ -9,23 +9,25 @@ documentation: ug # WebAssembly Performance in Blazor Gantt Component -This section provides performance guidelines for using the Syncfusion® Gantt Chart component efficiently in the Blazor WebAssembly application. The general framework Blazor WebAssembly performance guidelines can be found [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/performance?view=aspnetcore-7.0). +This guide outlines performance optimization strategies for using the Syncfusion® Gantt Chart component efficiently in the Blazor WebAssembly application. The general framework Blazor WebAssembly performance guidelines can be found [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/performance?view=aspnetcore-7.0). N> Refer to the Getting Started with [Blazor Server-Side Gantt](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) and [Blazor WebAssembly Gantt](https://blazor.syncfusion.com/documentation/gantt-chart/how-to/blazor-webassembly-gantt-using-visual-studio) documentation pages for configuration specifications. ## Avoid unnecessary component renders -During Blazor diffing algorithm, every cell of the Gantt Chart component and its child component will be checked for re-rendering. For instance, having [EventCallBack](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.eventcallback?view=aspnetcore-6.0) on the application or Gantt Chart will check every child component once the event callback is completed. +During Blazor's diffing algorithm, every cell of the Gantt Chart component and its child components is evaluated for re-rendering. For example, using [EventCallBack](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.eventcallback?view=aspnetcore-6.0) in the application or Gantt Chart causes all child components to be checked once the callback completes. -You can have fine-grained control over Gantt Chart component rendering. The [PreventRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_PreventRender_System_Boolean_) method helps you to avoid unnecessary re-rendering of the Gantt Chart component. This method internally overrides the [ShouldRender](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase.shouldrender?view=aspnetcore-6.0) method of the Gantt Chart to prevent rendering. +To avoid unnecessary re-rendering, use the [PreventRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_PreventRender_System_Boolean_) method. This method internally overrides [ShouldRender](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase.shouldrender?view=aspnetcore-6.0) to control the rendering process. In the following example: * The [PreventRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_PreventRender_System_Boolean_) method is called in the **IncrementCount** method which is a click callback. -* Now, Gantt Chart component will not be a part of the rendering which happens because of the click event and **currentCount** alone will get updated. +* As a result, the Gantt Chart component will be excluded from the rendering triggered by the click event and **currentCount** alone will get updated. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt

Counter

@@ -35,7 +37,7 @@ In the following example: - + @@ -57,45 +59,53 @@ In the following example: 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 int? ParentId { get; set; } + public int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Product concept", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 21), Duration = "5days" }, - new TaskData() { TaskId = 2, TaskName = "Defining the product usage", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 21), Duration = "3", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Defining the Target audience", EndDate = new DateTime(2022, 01, 10), Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Prepare product sketch and notes", StartDate = new DateTime(2022, 01, 04), Duration = "2", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Concept approval", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 21), Duration="0" }, - new TaskData() { TaskId = 6, TaskName = "Market Research", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 21), Duration = "4", Progress = 30 }, - new TaskData() { TaskId = 7, TaskName = "Demand Analysis", Duration = "4", Progress = 40, ParentId = 6 }, - new TaskData() { TaskId = 8, TaskName = "Customer Strength", StartDate = new DateTime(2022, 01, 10), EndDate = new DateTime(2022, 01, 21), Duration = "4", Progress = 30, ParentId = 7 }, - new TaskData() { TaskId = 9, TaskName = "Market Opportunity analysis", StartDate = new DateTime(2022, 01, 10), EndDate = new DateTime(2022, 01, 21), Duration="4", ParentId= 7 } + new TaskData() { TaskID = 1, TaskName = "Product concept", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), Duration = "5days" }, + new TaskData() { TaskID = 2, TaskName = "Defining the product usage", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Defining the Target audience", EndDate = new DateTime(2022, 01, 10), Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Prepare product sketch and notes", StartDate = new DateTime(2022, 01, 04), Duration = "2", EndDate = new DateTime(2022, 01, 05), Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Concept approval", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 04), Duration="0" }, + new TaskData() { TaskID = 6, TaskName = "Market Research", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 13), Duration = "4", Progress = 30 }, + new TaskData() { TaskID = 7, TaskName = "Demand Analysis", Duration = "4", Progress = 40, ParentID = 6 }, + new TaskData() { TaskID = 8, TaskName = "Customer Strength", StartDate = new DateTime(2022, 01, 10), EndDate = new DateTime(2022, 01, 13), Duration = "4", Progress = 30, ParentID = 7 }, + new TaskData() { TaskID = 9, TaskName = "Market Opportunity analysis", StartDate = new DateTime(2022, 01, 10), EndDate = new DateTime(2022, 01, 13), Duration="4", ParentID= 7 } }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLeNOryrTDbPabb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> The [PreventRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_PreventRender_System_Boolean_) method accepts the Boolean argument that accepts true or false to disable or enable rendering respectively. This method can be used only after the Gantt component completed the initial rendering. Calling this method during initial rendering will not have any effect. ## Avoid unnecessary initial auto-scheduling validation -The Blazor Gantt chart default scheduling is [auto-scheduling](https://blazor.syncfusion.com/documentation/gantt-chart/scheduling-tasks#automatically-scheduled-tasks) which has initial auto-scheduling validation of the data source. When you are using the validated data source in the Gantt chart, then it is not necessary to validate again on load time and this improves loading time performance of Gantt Chart Hence, it is possible to skip the load time scheduling validation by using [AutoCalculateDateScheduling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AutoCalculateDateScheduling) property as false and to skip dependency validation by using [EnablePredecessorValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnablePredecessorValidation) property as false. Later, you can enable these validations for dynamic actions in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_Created) event. +The Blazor Gantt Chart uses [auto-scheduling](https://blazor.syncfusion.com/documentation/gantt-chart/scheduling-tasks#automatically-scheduled-tasks) by default, which includes initial validation of the data source. If the data source is already validated, repeating this validation during load is unnecessary and affects performance. + +To improve load time, set [AutoCalculateDateScheduling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AutoCalculateDateScheduling) to **false** to disable date scheduling validation, and [EnablePredecessorValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnablePredecessorValidation) to **false** to disable dependency validation. These validations can be enabled later during dynamic actions using the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_Created) event. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - + @@ -115,29 +125,33 @@ The Blazor Gantt chart default scheduling is [auto-scheduling](https://blazor.sy } 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 static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 05), EndDate = new DateTime(2019, 04, 10), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 05), EndDate = new DateTime(2019, 04, 05),Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 05), EndDate = new DateTime(2019, 04, 10), Duration = "4", Progress = 40, Predecessor = "2", ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 11), EndDate = new DateTime(2019, 04, 18), Predecessor = "1FS", }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 11),EndDate = new DateTime(2019, 04, 15), Duration = "3", Progress = 30, Predecessor = "4" , ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 16),EndDate = new DateTime(2019, 04, 18), Duration = "3", Progress = 40, Predecessor = "6" , ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2019, 04, 18), EndDate = new DateTime(2019, 04, 18),Duration = "0", Progress = 30, Predecessor = "7" , ParentId = 5 }, + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 05), EndDate = new DateTime(2019, 04, 10), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 05), EndDate = new DateTime(2019, 04, 05),Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 05), EndDate = new DateTime(2019, 04, 10), Duration = "4", Progress = 40, Predecessor = "2", ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 11), EndDate = new DateTime(2019, 04, 18), Predecessor = "1FS", }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 11),EndDate = new DateTime(2019, 04, 15), Duration = "3", Progress = 30, Predecessor = "4" , ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 16),EndDate = new DateTime(2019, 04, 18), Duration = "3", Progress = 40, Predecessor = "6" , ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2019, 04, 18), EndDate = new DateTime(2019, 04, 18),Duration = "0", Progress = 30, Predecessor = "7" , ParentID = 5 }, }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBIZasQguoaqPvv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file