diff --git a/blazor-toc.html b/blazor-toc.html index 6f7b982aae..579184bef5 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -3057,7 +3057,6 @@
  • Column Template
  • Column Menu
  • Column Chooser
    • -
  • Responsive Column
  • WBS Column
    • diff --git a/blazor/blazor-toc.html b/blazor/blazor-toc.html new file mode 100644 index 0000000000..d975c0f6ea --- /dev/null +++ b/blazor/blazor-toc.html @@ -0,0 +1,4973 @@ + + diff --git a/blazor/gantt-chart/cell-selection.md b/blazor/gantt-chart/cell-selection.md index 28cf6a7b79..484e6b0311 100644 --- a/blazor/gantt-chart/cell-selection.md +++ b/blazor/gantt-chart/cell-selection.md @@ -7,13 +7,13 @@ control: Gantt Chart documentation: ug --- -# Cell Selection in Blazor Gantt Chart Component +# Cell selection in Blazor Gantt Chart component -Cell selection in the Syncfusion Blazor Gantt Chart allows users to select individual cells in the Tree Grid section, enabling interactions like data inspection or editing. Enable this feature by setting the [GanttSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Mode) property to [SelectionMode.Cell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SelectionMode.html#Syncfusion_Blazor_Grids_SelectionMode_Cell). The data model must include fields like `TaskId`, `TaskName`, `StartDate`, `EndDate`, `Duration`, `Progress`, and optionally `ParentId` for hierarchical tasks. Use the [GetSelectedRowCellIndexes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetSelectedRowCellIndexes) method to retrieve selected cell information, which returns an object collection with `CellIndexes` and `RowIndex`. This guide covers single cell selection, multiple cell selection, dynamic selection, and customizing selection actions. +Cell selection in the Gantt Chart component enables interactive selection of specific cells or ranges of cells within the grid. You may select cells using mouse clicks or arrow keys (up, down, left, right). This is useful for highlighting, manipulating, or performing operations on particular gantt chart cells. -## Select single cell +## Single cell selection -Enable single cell selection by setting `GanttSelectionSettings.Mode` to `Cell`. Click a cell in the Tree Grid section to select it. The selected cell is highlighted, and its details can be accessed programmatically. +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. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -24,7 +24,7 @@ Enable single cell selection by setting `GanttSelectionSettings.Mode` to `Cell`. - + @code { @@ -68,9 +68,9 @@ Enable single cell selection by setting `GanttSelectionSettings.Mode` to `Cell`. {% previewsample "https://blazorplayground.syncfusion.com/embed/htreNkhJUikAkJWL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Select multiple cells +## Multiple cell selection -Enable multiple cell selection by setting `GanttSelectionSettings.Mode` to `Cell` and `GanttSelectionSettings.Type` to `Syncfusion.Blazor.Grids.SelectionType.Multiple`. Hold the Ctrl key and click cells to select multiple cells in the Tree Grid section. +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. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -126,9 +126,9 @@ Enable multiple cell selection by setting `GanttSelectionSettings.Mode` to `Cell > **Note**: Multiple cell selection requires Ctrl + click on Windows or Cmd + click on Mac. Ensure selections are visible on smaller screens for mobile responsiveness. -## Select cell dynamically +## Single cell selection dynamically -Programmatically select a cell using the [SelectCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SelectCellAsync_System_ValueTuple_System_Int32_System_Int32__System_Nullable_System_Boolean__) method, specifying the row and column index. Use a reference to the Gantt component and handle potential errors for invalid indices. +Select a specific cell in the Gantt Chart by calling the [SelectCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SelectCellAsync_System_ValueTuple_System_Int32_System_Int32__System_Nullable_System_Boolean__) method and providing the desired row and column indexes as arguments. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -192,9 +192,11 @@ Programmatically select a cell using the [SelectCellAsync](https://help.syncfusi {% previewsample "https://blazorplayground.syncfusion.com/embed/hNVyZaVTqLCPsIEu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customize cell selection +## 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. -Control cell selection behavior using the [CellSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_CellSelecting) and [CellSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_CellSelected) events. The `CellSelecting` event triggers before selection, allowing cancellation of specific cell selections based on conditions (e.g., task ID). The `CellSelected` event triggers after selection, providing access to selected cell details. +The following sample demonstrates selection is canceled in the `cellSelecting` event when the **TaskName** is **Perform Soil test**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -202,27 +204,63 @@ Control cell selection behavior using the [CellSelecting](https://help.syncfusio @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids +@if (showMessage) +{ +
    @message
    +} - - + + + @code { - public async Task CellSelectingAsync(Syncfusion.Blazor.Grids.CellSelectingEventArgs args) + private List TaskCollection { get; set; } + private string message; + private bool showMessage; + + protected override void OnInitialized() { - if (args.Data.TaskID == 2) + TaskCollection = GetTaskCollection(); + } + + public Task CellSelectedAsync(CellSelectEventArgs args) + { + showMessage = true; + message = $"CellSelected: RowIndex={args.RowIndex}, CellIndex={args.CellIndex}"; + return Task.CompletedTask; + } + + public Task CellSelectingAsync(CellSelectingEventArgs args) + { + showMessage = true; + message = $"CellSelecting: RowIndex={args.RowIndex}, CellIndex={args.CellIndex}"; + + if (args.Data?.TaskName == "Perform soil test") { args.Cancel = true; + message += " Selection canceled for 'Perform soil test'"; } + + return Task.CompletedTask; } - private List TaskCollection { get; set; } + public Task CellDeselectingAsync(CellDeselectEventArgs args) + { + showMessage = true; + message = $"CellDeselecting: RowIndex={args.RowIndex}, CellIndex={args.CellIndex}"; - protected override void OnInitialized() + return Task.CompletedTask; + } + + public Task CellDeselectedAsync(CellDeselectEventArgs args) { - this.TaskCollection = GetTaskCollection(); + showMessage = true; + message = $"CellDeselected: RowIndex={args.RowIndex}, CellIndex={args.CellIndex}"; + + return Task.CompletedTask; } public class TaskData @@ -238,24 +276,24 @@ Control cell selection behavior using the [CellSelecting](https://help.syncfusio 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, 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, 06), Duration = "0", Progress = 30, ParentID = 5 } }; - return Tasks; } } + {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBotkrfqVhnDqaK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLSWZiNfkwAecQJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} > **Note**: Use `CellSelecting` to restrict selections based on task properties. Log selected cell details with `CellSelected` for custom actions. Ensure selections are accessible via keyboard (e.g., Shift + arrow keys for range selection). diff --git a/blazor/gantt-chart/column-reordering.md b/blazor/gantt-chart/column-reordering.md index ac78200763..57fea462cb 100644 --- a/blazor/gantt-chart/column-reordering.md +++ b/blazor/gantt-chart/column-reordering.md @@ -1,31 +1,30 @@ --- layout: post title: Column Reordering in Blazor Gantt Chart Component | Syncfusion -description: Learn how to reorder columns in the Syncfusion Blazor Gantt Chart using drag-and-drop or programmatic methods. +description: Checkout and learn here all about Column Reordering in Syncfusion Blazor Gantt Chart component and much more details. platform: Blazor control: Gantt Chart documentation: ug --- -# Column Reordering in Blazor Gantt Chart Component +# Column reorder in Blazor Gantt Chart component -Column reordering in the Syncfusion Blazor Gantt Chart allows dragging a column header to change its position. Enable it by setting the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowReordering) property to `true`. This guide covers basic reordering, reordering a single column, and reordering multiple columns. +The Syncfusion® Blazor Gantt Chart component supports column reordering by dragging a column header to a new position. -## Column reordering +To enable column reordering, set the [GanttColumn.AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowReordering) property to **true** in the Gantt configuration. -Reorder columns by dragging a header from one index to another in the Gantt columns. Enable reordering with `AllowReordering` set to `true`. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - + -@code { +@code{ private List TaskCollection { get; set; } - protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -33,116 +32,71 @@ Reorder columns by dragging a header from one index to another in the Gantt colu 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() + 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; } } -``` -> **Note**: Disable reordering for a specific column by setting [GanttColumn.AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_AllowReordering) to `false`. +{% endhighlight %} +{% endtabs %} -## Reorder single column +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBoNaBoLtfvtQLH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -Reorder a single column using interaction or the [ReorderColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ReorderColumnsAsync_System_Collections_Generic_List_System_String__System_String_) method. This example reorders the **Duration** column to follow **Progress**. +> You can disable the reordering of a particular column by setting the `GanttColumn.AllowReordering` property to **false**. -```cshtml -@using Syncfusion.Blazor.Gantt -@using Syncfusion.Blazor.Buttons +## Reorder columns programmatically - - - - - +You can reorder columns programmatically in the Gantt Chart component using the [ReorderColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ReorderColumnsAsync_System_Collections_Generic_List_System_String__System_String_) method. This method reorders one or more columns by specifying the source column(s) and the target column using their field names: -@code { - public SfGantt Gantt; - private List TaskCollection { get; set; } +- **fromFName**: The field name of the column to move. +- **toFName**: The field name of the target column position. - protected override void OnInitialized() - { - this.TaskCollection = GetTaskCollection(); - } +The following demonstrates how to reorder columns by placing **Progress** before **Duration**, or moving **TaskName** and **StartDate** to the position of **Duration**. - public async Task ReorderSingle() - { - await this.Gantt.ReorderColumnsAsync(new List() { "Duration" }, "Progress"); - } +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} - 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; - } -} -``` - -## Reorder multiple columns - -Reorder multiple columns at once using the [ReorderColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ReorderColumnsAsync_System_Collections_Generic_List_System_String__System_String_) method. This example reorders **TaskName** and **StartDate** to follow **Progress**. - -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Buttons - - - + +Reorder TaskName and StartDate + + - + - -@code { - public SfGantt Gantt; +@code{ + public SfGantt GanttInstance; private List TaskCollection { get; set; } protected override void OnInitialized() @@ -150,42 +104,45 @@ Reorder multiple columns at once using the [ReorderColumnsAsync](https://help.sy this.TaskCollection = GetTaskCollection(); } - public async Task ReorderMultiple() + public async void ReorderBtn() { - await Gantt.ReorderColumnsAsync(new List() { "TaskName", "StartDate" }, "Progress"); + await this.GanttInstance.ReorderColumnsAsync(new List() { "Duration" }, "Progress"); } - public class TaskData + public void ReorderColumn() { - 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; } + this.GanttInstance.ReorderColumnsAsync(new List(){"TaskName", "StartDate"},"Duration"); } 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, 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; } + + 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; } + } } -``` -## See also +{% endhighlight %} +{% endtabs %} -- [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) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLoMtsgBGsnpvOD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/gantt-chart/column-resizing.md b/blazor/gantt-chart/column-resizing.md index 9df9fa03b1..6b9cc72129 100644 --- a/blazor/gantt-chart/column-resizing.md +++ b/blazor/gantt-chart/column-resizing.md @@ -1,30 +1,30 @@ --- layout: post title: Column Resizing in Blazor Gantt Chart Component | Syncfusion -description: Learn how to resize columns by dragging or auto-fitting in the Syncfusion Blazor Gantt Chart, including touch support. +description: Checkout and learn here all about Column Resizing in Syncfusion Blazor Gantt Chart component and much more details. platform: Blazor control: Gantt Chart documentation: ug --- -# Column Resizing in Blazor Gantt Chart Component +# Resize columns in Blazor Gantt Chart component -The column resizing feature in the Syncfusion Blazor Gantt Chart allows users to adjust column widths by dragging the right edge of the header with a mouse or touch, or auto-fit columns by double-clicking the edge. Enable it by setting the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowResizing) property to `true`. This guide covers enabling resizing, setting minimum and maximum widths, and touch interaction. +The Syncfusion® Blazor Gantt Chart component allows you to resize columns dynamically by dragging the edges of column headers. This feature enhances readability and layout flexibility, especially when working with large datasets. To enable this feature, set the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowResizing) property to **true** in the Gantt configuration. -## Column resizing +Column width can be adjusted by dragging the right edge of the header, with changes applied immediately. -Enable column resizing by setting `AllowResizing` to `true`. Drag the right edge of a column header to adjust its width, or double-click the edge to auto-fit based on the widest cell content. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - - + + + -@code { +@code{ private List TaskCollection { get; set; } - protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -32,58 +32,66 @@ Enable column resizing by setting `AllowResizing` to `true`. Drag the right edge 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() + 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; } } -``` -![Blazor Gantt Chart showing column resizing by dragging the header edge](images/blazor-gantt-chart-column-resize.gif) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrojaByrMWhLdCJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +>* In RTL mode, you can click and drag the left edge of header cell to resize the column. +>* The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Width) property of the column can be set initially to define the default width of the column. However, when column resizing is enabled, you can override the default width by manually resizing the columns. + +## Restrict the resizing based on minimum and maximum width -> **Note**: Disable resizing for a specific column by setting [GanttColumn.AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_AllowResizing) to `false`. +The Gantt chart component allows restricting column resizing within a defined range to maintain layout consistency. This ensures column widths remain within the specified limits during resizing. + +To enable this, set the [GanttColumn.MinWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_MinWidth) and [GanttColumn.MaxWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_MaxWidth) properties in the column configuration. -## Defining minimum and maximum column width +The following example demonstrates how the **TaskName** column can be configured with a minimum width of 150 pixels and a maximum of 250 pixels, while the **Duration** column can be set between 50 and 200 pixels. -Restrict column resizing by setting the [GanttColumn.MinWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_MinWidth) and [GanttColumn.MaxWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_MaxWidth) properties. This example sets minimum and maximum widths for the `TaskName` and `Duration` columns. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - + + - + - -@code { +@code{ private List TaskCollection { get; set; } - protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -91,53 +99,51 @@ Restrict column resizing by setting the [GanttColumn.MinWidth](https://help.sync 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() + 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; } } -``` -> **Note**: Ensure `MinWidth` and `MaxWidth` values are positive and `MinWidth` is less than `MaxWidth`. Use the column menu's autofit option for accessibility. +{% endhighlight %} +{% endtabs %} -## Touch interaction +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrIjOrIhiWvkVHp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -In touch-enabled devices, tap and drag the right edge of a column header to resize it. A floating handler appears on tap to assist with dragging. Double-tap the edge to auto-fit the column. - -The following screenshot represents the Gantt column resizing in touch device. +## Touch interaction -![Resizing Column in Blazor Gantt Chart](images/blazor-gantt-chart-column-resizing.png) +The Gantt Chart component supports touch interactions for mobile devices. Users can resize columns by tapping and dragging the floating handler, or use the column menu to autofit columns. -When you `tap` gantt row, tapped row will be selected. +**Resizing columns on touch devices:** -[Single selection](selection/#selection-mode) : To select a single row or cell, perform `single tap` on it. +To resize a column: -[Multiple selection](selection/#multiple-row-selection) : To perform multiple selection, `tap` on the multiple selection popup, and then tap the desired rows or cells. +1. Tap the right edge of the column header. +2. A floating handler appears over the column right border. +3. Drag the handler to adjust the column width. -![Multiple selection in Blazor Gantt Chart](images/blazor-gantt-chart-multiple-selection.PNG) +The screenshot below illustrates column resizing on a touch device. -## See also +![Column resize](images/blazor-gantt-chart-column-resizing.png) -- [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) \ No newline at end of file +> 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. diff --git a/blazor/gantt-chart/columns.md b/blazor/gantt-chart/columns.md index 9d0f6081b7..38928be3d0 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" %} + +>* 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 -## Format +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: -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. +| 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`. + +**Based on header text:** -You can show or hide gantt component columns dynamically using external buttons by invoking the `ShowColumnsAsync` or `HideColumnsAsync` method. +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 + +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: -## Controlling Gantt column actions +| 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. | -You can enable or disable gantt component action for a particular column by setting the `AllowFiltering`, `AllowSorting`, `AllowReordering`, and `AllowEditing` properties. +> **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,69 @@ 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(); + } + + 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 + 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; + } +} -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. +{% endhighlight %} +{% endtabs %} -Gantt column supports the following types: +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhyiNDuKAHMJvWZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -* String -* Number -* Boolean -* Date -* DateTime -* DateOnly -* TimeOnly -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/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/scrolling.md b/blazor/gantt-chart/scrolling.md index 18055cf954..53fa9722f0 100644 --- a/blazor/gantt-chart/scrolling.md +++ b/blazor/gantt-chart/scrolling.md @@ -7,23 +7,32 @@ control: Gantt Chart documentation: ug --- -# Scrolling in Blazor Gantt Component +# Scrolling in Blazor Gantt Chart component -The scrollbar will be displayed in the Gantt when the content exceeds the element [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Width) or [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Height). The vertical and horizontal scrollbars will be displayed based on the following criteria: +Scrolling in the Blazor Gantt Chart component enables smooth navigation across extensive project datasets and long timelines. It ensures taskbars, grid rows, and timeline cells remain visible within the viewport. Scrollbars automatically appear when content exceeds the component’s defined [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Width), supporting vertical scrolling for rows, horizontal scrolling for columns, and timeline scrolling for extended chart areas. -The vertical scrollbar appears when the total height of rows present in the Gantt exceeds its element height. The horizontal scrollbar appears when the sum of the columns' width exceeds the Gantt element width. The [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Width) are used to set the Gantt height and width, respectively. +Virtual scrolling enhances performance by rendering only the visible portion of the dataset. Scrollbars are equipped with ARIA labels for accessibility, making them compatible with screen readers. They also adapt to responsive layouts, although horizontal scrolling may be required on narrow screens with wide timelines. -N> The default value for [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Width) is **auto**. +> By default, both `height` and `width` are set to **auto**. -## Set width and height +## Configure scrollbar display -To specify the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Width) of the scroller in the pixel, set the pixel value to a number. +Scrollbars appear based on content size: + +- **Vertical scrollbar:** Triggers when task row height exceeds the component’s height. +- **Horizontal scrollbar:** Triggers when column width exceeds the tree grid pane. +- **Timeline scrollbar:** Triggers when the timeline exceeds the chart area. + +For precise layout control, set fixed dimensions using pixel values for both [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Width). + +The following example sets fixed dimensions: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt - + + @@ -37,22 +46,12 @@ To specify the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. @code{ - public 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 string Duration { get; set; } - public int Progress { get; set; } - public int? ParentID { get; set; } - } public static List GetTaskCollection() { @@ -69,6 +68,17 @@ To specify the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. }; 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 %} @@ -76,31 +86,31 @@ To specify the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. {% previewsample "https://blazorplayground.syncfusion.com/embed/LjLeNEVIVpUHKMmN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Responsive with the parent container +## Configure responsive scrolling -Specify the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Width) as **100%** to make the Gantt element fill its parent container. Setting the `Height` to **100%** requires the Gantt parent element to have explicit height or you can use viewport height to set explicit height based on the browser layout. +You can make the Gantt Chart component responsive by setting its [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Width) to **100%**, allowing it to fully occupy the parent container. When height is set to **100%**, the parent element must have a defined `Height` to support proper layout rendering. The Gantt will automatically adjust when the container is resized. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt -
    + +
    + + @code{ private List TaskCollection { get; set; } protected override void OnInitialized() @@ -108,17 +118,6 @@ Specify the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gan 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() @@ -134,22 +133,39 @@ Specify the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gan }; 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/LNVotaVoLTJVFSsi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrosXCAgfwPOfeT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Auto scroll to taskbar -Taskbar that is not visible in the viewport can be auto scrolled to make it visible when selecting the row, by setting the [ScrollToTaskbarOnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ScrollToTaskbarOnClick) property to true. +## Auto focus taskbar on row click + +You can enable automatic scrolling to the corresponding taskbar in the timeline when a row is clicked in the Syncfusion® Blazor Gantt chart by using the [ScrollToTaskbarOnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ScrollToTaskbarOnClick) property. This feature ensures that the selected task is brought into view within the timeline area, improving navigation and focus during interaction. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt - + +
    + + +
    + @@ -172,6 +188,10 @@ Taskbar that is not visible in the viewport can be auto scrolled to make it visi public int? ParentID { get; set; } } + public onCheckBoxChange(args: ChangeEventArgs): void { + this.ganttInstance.ScrollToTaskbarOnClick = (args.checked as boolean); + } + public static List GetTaskCollection() { List Tasks = new List() { @@ -187,88 +207,144 @@ Taskbar that is not visible in the viewport can be auto scrolled to make it visi return Tasks; } } - +https://blazorplayground.syncfusion.com/rDhIWZCKJRbZhRRf {% endhighlight %} {% endtabs %} {% previewsample "https://blazorplayground.syncfusion.com/embed/hXBejaVoVfoSMdbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Scroll the content by external button +## Programmatically scroll to task row and timeline + +The Blazor Gantt Chart component provides built-in support for automatically scrolling to specific tasks and timeline positions, which is especially useful when working with large datasets. + +To scroll vertically to a specific task row, use the [SelectRowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SelectRowsAsync_System_Int32___) method to select the desired task and apply [ScrollIntoViewAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ScrollIntoViewAsync_System_Int32_System_Int32_) to bring the selected row into view. + +To scroll horizontally to a specific timeline date, use the [ScrollToTimelineAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ScrollToTimelineAsync_System_DateTime_) method. This helps focus the timeline on a particular point in time. -This section shows you how to invoke a [ScrollIntoViewAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ScrollIntoViewAsync_System_Int32_System_Int32_) method to scroll the Gantt chart content programmatically by passing column index or row index as parameter. +To scroll directly to a specific task within the timeline, use the [ScrollToTaskbarAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ScrollToTaskbarAsync_System_String_) method with the task ID. This ensures the task is visible within the timeline view. - {% tabs %} +{% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Inputs @using Syncfusion.Blazor.Buttons -ColumnIndex : - -

    -RowIndex : - - - - - - - - - - - - - - - - - - - - - +
    + +
    + +
    + + + Scroll Position +
    +
    + +
    + +
    + + Scroll Date +
    +
    + + +
    + +
    + + Scroll Task +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + @code { - public SfGantt Gantt; - public List TaskCollection { get; set; } + public SfGantt GanttInstance; + public List TaskCollection { get; set; } = new(); + public string RowIndex { get; set; } + public string ScrollDate { get; set; } + public string ScrollTaskId { get; set; } + public string ColumnIndex { get; set; } - public int ColumnIndex { get; set; } = -1; - public int RowIndex { get; set; } = -1; protected override void OnInitialized() { - this.TaskCollection = VirtualData.GetTreeVirtualData(); + TaskCollection = VirtualData.GetTreeVirtualData(); + } + + public async Task SelectRow() + { + if (int.TryParse(RowIndex, out var rowIndex) && int.TryParse(ColumnIndex, out var columnIndex)) + { + await this.GanttInstance.SelectRowAsync(rowIndex); + await this.GanttInstance.ScrollIntoViewAsync(columnIndex, rowIndex); + } + } + + + public async Task ScrollToDate() + { + if (DateTime.TryParse(ScrollDate, out var date)) + { + await this.GanttInstance.ScrollToTimelineAsync(date); + } } - public async Task Scroll() + + public async Task ScrollToTask() { - await Gantt.ScrollIntoViewAsync(ColumnIndex, RowIndex); + if (int.TryParse(ScrollTaskId, out var taskId)) + { + await this.GanttInstance.ScrollToTaskbarAsync(taskId); + } } + public class VirtualData { public static List GetTreeVirtualData() { - string[] Names = new string[] { "VINET", "TOMSP", "HANAR", "VICTE", "SUPRD", "HANAR", "CHOPS", "RICSU", "WELLI", "HILAA", "ERNSH", "CENTC", "OTTIK", "QUEDE", "RATTC", "ERNSH", "FOLKO", "BLONP", "WARTH", "FRANK", "GROSR", "WHITC", "WARTH", "SPLIR", "RATTC", "QUICK", "VINET", "MAGAA", "TORTU", "MORGK", "BERGS", "LEHMS", "BERGS", "ROMEY", "ROMEY", "LILAS", "LEHMS", "QUICK", "QUICK", "RICAR", "REGGC", "BSBEV", "COMMI", "QUEDE", "TRADH", "TORTU", "RATTC", "VINET", "LILAS", "BLONP", "HUNGO", "RICAR", "MAGAA", "WANDK", "SUPRD", "GODOS", "TORTU", "OLDWO", "ROMEY", "LONEP", "ANATR", "HUNGO", "THEBI", "DUMON", "WANDK", "QUICK", "RATTC", "ISLAT", "RATTC", "LONEP", "ISLAT", "TORTU", "WARTH", "ISLAT", "PERIC", "KOENE", "SAVEA", "KOENE", "BOLID", "FOLKO", "FURIB", "SPLIR", "LILAS", "BONAP", "MEREP", "WARTH", "VICTE", "HUNGO", "PRINI", "FRANK", "OLDWO", "MEREP", "BONAP", "SIMOB", "FRANK", "LEHMS", "WHITC", "QUICK", "RATTC", "FAMIA" }; - List DataCollection = new List(); - var x = 0; - for (var i = 1; i <= 100; i++) + string[] Names = new string[] { "VINET", "TOMSP", "HANAR", "VICTE", "SUPRD" }; + List DataCollection = new(); + int x = 0; + for (int i = 1; i <= 10; i++) { - TaskData Parent = new TaskData() + var parent = new TaskData { ProjectId = ++x, ProjectName = "Task " + x, ProjectStartDate = new DateTime(2022, 1, 9), ProjectEndDate = new DateTime(2022, 1, 13), ProjectDuration = "10", - ProjectProgress = x + 20, + ProjectProgress = x + 20, ParentID = null, Predecessor = null, }; - DataCollection.Add(Parent); - for (var j = 1; j <= 50; j++) + DataCollection.Add(parent); + + for (int j = 1; j <= 5; j++) { - DataCollection.Add(new TaskData() + DataCollection.Add(new TaskData { ProjectId = ++x, ProjectName = "Task " + x, @@ -276,26 +352,27 @@ RowIndex : ProjectEndDate = new DateTime(2022, 1, 13), ProjectDuration = "10", ProjectProgress = x + 20, - ParentID = Parent.ProjectId, + ParentID = parent.ProjectId, Predecessor = i + "FS", Field1 = Names[x % Names.Length], - FIELD2 = 1967 + x + 10, - FIELD3 = 395 + x + 10, - FIELD4 = 87 + x + 10, - FIELD5 = 410 + x + 10, - FIELD6 = 67 + x + 10, - Field7 = (x + 10 * 100), - Field8 = (x + 10 * 10), - Field9 = (x + 10 * 10), - Field10 = (x + 10 * 100), - Field11 = (x + 10 * 100), - Field12 = (x + 10 * 1000), + FIELD2 = 1967 + x, + FIELD3 = 395 + x, + FIELD4 = 87 + x, + FIELD5 = 410 + x, + FIELD6 = 67 + x, + Field7 = x * 100, + Field8 = x * 10, + Field9 = x * 10, + Field10 = x * 100, + Field11 = x * 100, + Field12 = x * 1000, }); } } return DataCollection; } } + public class TaskData { public int ProjectId { get; set; } @@ -324,6 +401,4 @@ RowIndex : {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhSNEsGpuhjkdoy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -* You can also programmatically scroll to the taskbar using [ScrollToTaskbarAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ScrollToTaskbarAsync_System_Int32_) method and scroll to the timeline using [ScrollToTimelineAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ScrollToTimelineAsync_System_DateTime_). \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrSWXCqfpIlMXnl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/stock-chart/Legend.md b/blazor/stock-chart/Legend.md index 797985f4c0..262dddc258 100644 --- a/blazor/stock-chart/Legend.md +++ b/blazor/stock-chart/Legend.md @@ -1,7 +1,7 @@ --- layout: post title: Legend in Blazor Stock Chart Component | Syncfusion -description: Checkout and learn here all about Legend in Syncfusion Blazor Stock Chart component and much more details. +description: Check out and learn how to configure and customize the Legends in the Syncfusion Blazor Stock Chart component. platform: Blazor control: Stock Chart documentation: ug @@ -9,22 +9,22 @@ documentation: ug # Legend in Blazor Stock Chart Component -Legend provides information about the series rendered in the Stock Chart. Legend can be added to a Stock Chart by enabling the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Visible) option in the [StockChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html). +The legend describes the series rendered in the Stock Chart. Enable the legend by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Visible) option in [StockChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html). ## Enable Legend -To display the legend for the Stock Chart, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Visible) property in [StockChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html) to **true**. +To display the legend, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Visible) property in [StockChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html) to **true**. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - + + + + + + @code { public class ChartData @@ -39,33 +39,32 @@ To display the legend for the Stock Chart, set the [Visible](https://help.syncfu public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend](images/blazor-stock-chart-legend.png) - ## Legend Position -By using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Position) property, legend can be placed at **Left**, **Right**, **Top**, **Bottom** or **Custom** of the Stock Chart. The legend is positioned at the bottom of the Stock Chart, by default. +Use the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Position) property to place the legend at the **Left**, **Right**, **Top**, **Bottom**, or **Custom** position. By default, the legend appears at the **Bottom** of the Stock Chart. ```cshtml @using Syncfusion.Blazor.Charts - - - - - - - + + + + + + @code { public class ChartData @@ -80,33 +79,34 @@ By using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend position](images/blazor-stock-chart-legend-position.png) -The **Custom** position helps to position the legend anywhere in the Stock Chart using x and y coordinates. +The **Custom** position allows placing the legend anywhere within the Stock Chart using x and y coordinates. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - - - + + + + + + + + + - @code { public class ChartData { @@ -120,39 +120,40 @@ The **Custom** position helps to position the legend anywhere in the Stock Chart public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with custom legend position](images/blazor-stock-chart-legend-location.png) ## Reverse Legend -You can reverse the order of the legend items by using the [Reversed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Reversed) property. By default, legend for the first series in the collection will be placed first. +Reverse the order of legend items using the [Reversed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Reversed) property. By default, the legend entry for the first series appears first. ```cshtml + @using Syncfusion.Blazor.Charts - - - - + + + + - + - + - + - - + + - @code { public class ChartData { @@ -166,33 +167,34 @@ You can reverse the order of the legend items by using the [Reversed](https://he public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend reversed](images/blazor-stock-chart-legend-reversed.png) ## Legend Alignment -Using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Alignment) property, place the legend in **Centre**, **Far**, or **Near** alignment. +Use the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Alignment) property to align the legend to **Center**, **Far**, or **Near**. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - - - + + + + + + + + @code { public class ChartData @@ -207,13 +209,14 @@ Using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend alignment](images/blazor-stock-chart-legend-alignment.png) @@ -222,21 +225,20 @@ Using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch ### Legend Shape -The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_LegendShape) property in the [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#properties) can be used to change the shape of the legend icon. The default icon shape for legends is **SeriesType**. - +The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_LegendShape) property in the [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#properties) changes the legend icon shape. The default icon shape is based on **SeriesType**. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - + + + + + + + - @code { public class ChartData { @@ -250,34 +252,35 @@ The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend shape](images/blazor-stock-chart-legend-shape.png) ### Legend Size -When the legend is placed on the top or bottom of the Stock Chart, it takes up 20% - 25% of the Stock Chart's height, and 20% - 25% of the Stock Chart's width when it is positioned on the left or right side of the Stock Chart. So, the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Height) properties can be used to adjust the default legend size. +When placed at the top or bottom, the legend occupies approximately 20%–25% of the chart height; when positioned at the left or right, it occupies approximately 20%–25% of the chart width. Use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Height) properties to adjust the legend size. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - - - - + + + + + + + + + @code { public class ChartData @@ -292,32 +295,33 @@ When the legend is placed on the top or bottom of the Stock Chart, it takes up 2 public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend size](images/blazor-stock-chart-legend-size.png) ### Legend Shape Size -The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ShapeHeight) and [ShapeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ShapeWidth) properties can be used to adjust the dimensions of the legend shape. +Use the [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ShapeHeight) and [ShapeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ShapeWidth) properties to control the legend icon dimensions. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - - + + + + + + + @code { public class ChartData @@ -332,34 +336,34 @@ The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend shape size](images/blazor-stock-chart-legend-size-shape.png) - ### Legend Item Padding -The [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ItemPadding) property can be used to adjust the space between the legend items. +Use the [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ItemPadding) property to adjust spacing between legend items. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - - - + + + + + + + + @code { public class ChartData @@ -374,35 +378,36 @@ The [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend item padding](images/Blazor-stock-chart-legend-itemPadding.png) ### Legend Paging -When the legend items exceed legend bounds, paging will be enabled by default. End user can view each legend item using the navigation buttons to navigate between pages. +When legend items exceed the available bounds, paging is enabled automatically. End users can navigate between pages using the navigation buttons. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - - - + + + + + + + + + - @code { public class ChartData { @@ -416,35 +421,35 @@ When the legend items exceed legend bounds, paging will be enabled by default. E public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend paging](images/blazor-stock-chart-legend-paging.png) - ### Legend Text Wrap -When the legend text exceeds the container, the text can be wrapped by using [TextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_TextWrap) property. End user can also wrap the legend text based on the [MaxLabelWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_MaxLabelWidth) property. +When legend text exceeds the container, enable wrapping using the [TextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_TextWrap) property. Wrapping can also be controlled using the [MaxLabelWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_MaxLabelWidth) property. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - - - - + + + + + + + + + @code { public class ChartData @@ -459,34 +464,35 @@ When the legend text exceeds the container, the text can be wrapped by using [Te public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with legend text wrap](images/blazor-stock-chart-legend-text-wrap.png) ## Series selection based on legend -By default, when you click on the legend item, the appropriate series visibility is collapsed. On the other hand, [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ToggleVisibility) property is used to disable such functionality. +By default, clicking a legend item collapses the visibility of the corresponding series. The [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ToggleVisibility) property disables this behavior when set to false. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - - - - + + + + + + + + + @code { public class ChartData @@ -501,34 +507,35 @@ By default, when you click on the legend item, the appropriate series visibility public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` ![Blazor Stock Chart with selection mode](images/blazor-stock-chart-selection-mode.png) ## Hiding legend item -The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Name) will be displayed as the legend text by default. You can skip the legend for particular series by providing an empty string to the series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Name) property. +The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Name) is used as the legend text by default. Skip the legend for a specific series by providing an empty string for the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Name) property. ```cshtml + @using Syncfusion.Blazor.Charts - - - - - - - - - - + + + + + + + + + @code { public class ChartData @@ -543,13 +550,14 @@ The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts public List StockDetails = new List { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, + new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 }, + new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 }, + new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 }, + new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 }, + new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 } }; } + ``` -![Blazor Stock Chart hiding legend item](images/blazor-stock-chart-hidding-legend.png) \ No newline at end of file +![Blazor Stock Chart hiding legend item](images/blazor-stock-chart-hidding-legend.png)