Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
194 changes: 96 additions & 98 deletions blazor/gantt-chart/accessibility.md

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions blazor/gantt-chart/cell-selection.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Cell selection in the Gantt Chart component enables interactive selection of spe

## Single cell selection

Single cell selection in the Gantt chart is enabled by setting [GanttSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Mode) to **Cell** and [selectionSettings.type](https://ej2.syncfusion.com/angular/documentation/api/gantt/selectionSettings/#type) to **Single**. This allows selecting only one cell at a time.
Single cell selection in the Gantt chart is enabled by setting [GanttSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Mode) to **Cell** and [GanttSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Type) to **Single**. This allows selecting only one cell at a time.

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
Expand Down Expand Up @@ -70,7 +70,7 @@ Single cell selection in the Gantt chart is enabled by setting [GanttSelectionSe

## Multiple cell selection

Multiple cell selection in the Gantt Chart is enabled by setting [selectionSettings.mode](https://ej2.syncfusion.com/angular/documentation/api/gantt/selectionSettings/#mode) to **Cell** and [selectionSettings.type](https://ej2.syncfusion.com/angular/documentation/api/gantt/selectionSettings/#type) to **Multiple**. This allows selecting multiple cells at a time by holding the <kbd>Ctrl</kbd> key while clicking on each desired cell.
Multiple cell selection in the Gantt Chart is enabled by setting [GanttSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Mode) to **Cell** and [GanttSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Type) to **Multiple**. This allows selecting multiple cells at a time by holding the <kbd>Ctrl</kbd> key while clicking on each desired cell.

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
Expand Down Expand Up @@ -194,7 +194,7 @@ Select a specific cell in the Gantt Chart by calling the [SelectCellAsync](http

## Customize cell selection action

You may customize cell selection behavior in the Gantt Chart using [cellSelecting](https://ej2.syncfusion.com/angular/documentation/api/gantt/events/#cellselecting), [cellSelected](https://ej2.syncfusion.com/angular/documentation/api/gantt/events/#cellselected), [cellDeselecting](https://ej2.syncfusion.com/angular/documentation/api/gantt/events/#celldeselecting), and [cellDeselected](https://ej2.syncfusion.com/angular/documentation/api/gantt/events/#celldeselected) events.
You may customize cell selection behavior in the Gantt Chart using [CellSelecting](https://blazor.syncfusion.com/documentation/gantt-chart/events#cellselecting), [CellSelected](https://blazor.syncfusion.com/documentation/gantt-chart/events#cellselected), [CellDeselecting](https://blazor.syncfusion.com/documentation/gantt-chart/events#celldeselecting), and [CellDeselected](https://blazor.syncfusion.com/documentation/gantt-chart/events#celldeselected) events.

The following sample demonstrates selection is canceled in the `cellSelecting` event when the **TaskName** is **Perform Soil test**.

Expand Down Expand Up @@ -301,4 +301,4 @@ The following sample demonstrates selection is canceled in the `cellSelecting` e

- [Accessibility in Blazor Gantt Chart](https://blazor.syncfusion.com/documentation/gantt-chart/accessibility)
- [Blazor Gantt Chart Feature Tour](https://www.syncfusion.com/blazor-components/blazor-gantt-chart)
- [Blazor Gantt Chart Example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap5)
- [Blazor Gantt Chart Example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap5)
305 changes: 173 additions & 132 deletions blazor/gantt-chart/clipboard.md

Large diffs are not rendered by default.

22 changes: 10 additions & 12 deletions blazor/gantt-chart/column-menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,20 @@ documentation: ug

# Column Menu in Blazor Gantt Chart Component

The column menu feature in the Syncfusion Blazor Gantt Chart enables sorting, filtering, and autofit options through a menu accessed by clicking a column's icon. Enable it by setting the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ShowColumnMenu) property to `true`. This guide covers enabling and using the column menu.
The column menu in the Blazor Gantt component offers built-in actions including sorting, filtering, column chooser, and autofit. It appears when the column header icon is clicked.

## Column Menu
To enable this feature, set [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ShowColumnMenu) to **true** in the Gantt configuration. Also enable [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowSorting), [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering), and [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowResizing) to support the corresponding actions.

Enable the column menu by setting `ShowColumnMenu` to `true`, along with [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowSorting), [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering), and [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowResizing) for respective features. Clicking the column header icon displays a menu with options based on the column type.

The default menu items are:
The following built-in column menu items are available:

| Item | Description |
|------|-------------|
| `Sort Ascending` | Sort the current column in ascending order. |
| `Sort Descending` | Sort the current column in descending order. |
| `Auto Fit` | Auto fit the current column. |
| `Auto Fit All` | Auto fit all columns. |
| `Column Chooser` | Choose column visibility. |
| `Filter` | Show the filter menu based on column type. |
| Sort Ascending | Sort the current column in ascending order. |
| Sort Descending | Sort the current column in descending order. |
| Auto Fit | Auto fit the current column. |
| Auto Fit All | Auto fit all columns. |
| Column Chooser | Choose column visibility. |
| Filter | Displays filtering options based on [FilterSettings.FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_FilterType). |

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
Expand Down Expand Up @@ -76,7 +74,7 @@ The default menu items are:

{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVoMXiticGodFzW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

> **Note**: Disable the column menu for a specific column by setting [GanttColumn.ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_ShowColumnMenu) to `false`.
> **Note**: Disable the column menu for a specific column by setting [GanttColumn.ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_ShowColumnMenu) to **false**.

## See also

Expand Down
2 changes: 1 addition & 1 deletion blazor/gantt-chart/column-reordering.md
Original file line number Diff line number Diff line change
Expand Up @@ -145,4 +145,4 @@ The following demonstrates how to reorder columns by placing **Progress** before
{% endhighlight %}
{% endtabs %}

{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLoMtsgBGsnpvOD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLoMtsgBGsnpvOD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
2 changes: 1 addition & 1 deletion blazor/gantt-chart/column-resizing.md
Original file line number Diff line number Diff line change
Expand Up @@ -146,4 +146,4 @@ The screenshot below illustrates column resizing on a touch device.

![Column resize](images/blazor-gantt-chart-column-resizing.png)

> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap4) to know how to render and configure the Gantt Chart.
> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap4) to know how to render and configure the Gantt Chart.
10 changes: 7 additions & 3 deletions blazor/gantt-chart/column-template.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,15 @@ control: Gantt Chart
documentation: ug
---

# Column template in Blazor Gantt Chart Component
# Column template in Blazor Gantt Chart component

A column template is used to customize the column’s look. The following code example explains how to define the custom template in Gantt Chart using the `Template` property.
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt Chart component supports column templates, allowing custom content to be displayed in a column instead of the default field value. You can render custom components or HTML elements using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Template) property to include elements such as images, buttons, or other UI controls within a column.

N> The column template feature is used to render the customized element value in the UI for a particular column. The data operations like filtering, sorting, etc., will not work based on the column template values. It will be handled based on the values you have provided to the particular column in the datasource.
> When using template columns, they are primarily meant for rendering custom content and may not provide built-in support for gantt actions like sorting, filtering, editing unless [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Field) property of the column is specified.

## Render Button in a column

You can render the Syncfusion<sup style="font-size:70%">&reg;</sup> [Button](https://blazor.syncfusion.com/documentation/button/getting-started-with-web-app) component inside a Gantt column by using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Template) property..

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
Expand Down
Loading