Skip to content

Commit caeb195

Browse files
documentation(984305): Updated blazor topic.
1 parent 95437a6 commit caeb195

File tree

4 files changed

+82
-47
lines changed

4 files changed

+82
-47
lines changed

blazor/gantt-chart/clipboard.md

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ documentation: ug
99

1010
# Clipboard in Blazor Gantt Chart component
1111

12-
The clipboard provides an option to copy selected rows or cell data into the clipboard.
12+
The clipboard feature allows copying selected row or cell data from the Gantt Chart component.
1313

14-
The following list of keyboard shortcuts is supported in the Gantt Chart to copy selected rows or cells data into the clipboard.
14+
The following keyboard shortcut is supported for clipboard operations:
1515

1616
Interaction keys |Description
1717
-----|-----
1818
<kbd>Ctrl + C</kbd> |Copy selected rows or cells data into clipboard.
19+
<kbd>Ctrl + Shift + H</kbd> |Copy selected rows or cells data with header into clipboard.
1920

2021
{% tabs %}
2122
{% highlight razor tabtitle="Index.razor" %}
@@ -70,13 +71,14 @@ Interaction keys |Description
7071

7172
## Copy to clipboard by external buttons
7273

73-
To copy the data of the selected rows or cells into the clipboard with the help of external buttons, invoke the [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_CopyAsync) method.
74+
To copy selected rows or cells to the clipboard using external buttons, invoke the [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_CopyAsync) method.
7475

7576
{% tabs %}
7677
{% highlight razor tabtitle="Index.razor" %}
7778

7879
@using Syncfusion.Blazor.Gantt
7980
@using Syncfusion.Blazor.Navigations
81+
8082
<SfGantt DataSource="@TaskCollection" @ref="GanttObject" Height="450px" Width="1000px">
8183
<GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" Dependency="Predecessor" ParentID="ParentID">
8284
</GanttTaskFields>
@@ -87,9 +89,11 @@ To copy the data of the selected rows or cells into the clipboard with the help
8789
</ToolbarItems>
8890
</SfToolbar>
8991
</SfGantt>
92+
9093
@code{
9194
private List<TaskData> TaskCollection { get; set; }
9295
private SfGantt<TaskData> GanttObject;
96+
9397
protected override void OnInitialized()
9498
{
9599
this.TaskCollection = GetTaskCollection();
@@ -108,6 +112,7 @@ To copy the data of the selected rows or cells into the clipboard with the help
108112
await this.GanttObject.CopyAsync(WithHeader);
109113
}
110114
}
115+
111116
public class TaskData
112117
{
113118
public int TaskID { get; set; }
@@ -144,15 +149,15 @@ To copy the data of the selected rows or cells into the clipboard with the help
144149

145150
## Copy hierarchy modes
146151

147-
Gantt Chart provides support for a set of copy modes with the [CopyHierarchyMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.CopyHierarchyType.html) property. The following are the type of filter modes available in the Gantt Chart.
152+
The Gantt Chart component supports multiple copy modes using the [CopyHierarchyMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.CopyHierarchyType.html) property. The following modes are available:
148153

149-
* **Parent**: This is the default copy hierarchy mode in the Gantt Chart. The clipboard value will have the selected records with its parent records, if the selected records do not have any parent record, then the selected record will be in the clipboard.
154+
- **Parent**: Copies selected records along with their parent records. If no parent exists, only the selected records are copied.
150155

151-
* **Child**: Clipboard value will have the selected records with its child record. If the selected records do not have any child record, then the selected records will be in the clipboard.
156+
- **Child**: Copies selected records along with their child records. If no child exists, only the selected records are copied.
152157

153-
* **Both**: Clipboard value will have the selected records with both parent and child records. If the selected records do not have any parent and child records, then the selected records alone are copied to the clipboard.
158+
- **Both**: Copies selected records with both parent and child records. If neither exists, only the selected records are copied.
154159

155-
* **None**: Only the selected records will be in the clipboard.
160+
- **None**: Copies only the selected records without any hierarchy.
156161

157162
{% tabs %}
158163
{% highlight razor tabtitle="Index.razor" %}
@@ -176,6 +181,7 @@ Gantt Chart provides support for a set of copy modes with the [CopyHierarchyMode
176181
</ToolbarItems>
177182
</SfToolbar>
178183
</SfGantt>
184+
179185
@code{
180186
private List<TaskData> TaskCollection { get; set; }
181187
private SfGantt<TaskData> GanttObject;
@@ -187,6 +193,7 @@ Gantt Chart provides support for a set of copy modes with the [CopyHierarchyMode
187193
public string Id { get; set; }
188194
public string Mode { get; set; }
189195
}
196+
190197
protected override void OnInitialized()
191198
{
192199
this.TaskCollection = GetTaskCollection();
@@ -229,6 +236,7 @@ Gantt Chart provides support for a set of copy modes with the [CopyHierarchyMode
229236
await this.GanttObject.CopyAsync(WithHeader);
230237
}
231238
}
239+
232240
public class TaskData
233241
{
234242
public int TaskID { get; set; }
@@ -265,15 +273,18 @@ Gantt Chart provides support for a set of copy modes with the [CopyHierarchyMode
265273

266274
## Paste
267275

268-
The content of a row/cells can be copied by selecting the rows/cells and pressing the <kbd>Ctrl + C</kbd> shortcut key to copy data and paste it by pressing <kbd>Ctrl + V</kbd> shortcut key.
276+
You can copy the content of a row or cell by selecting it and pressing the <kbd>Ctrl + C</kbd> shortcut key. To paste the copied data, press <kbd>Ctrl + V</kbd>.
277+
278+
**Selected row copy and paste:**
269279

270-
In the following code example, selected rows are copied by using the [BeforeCopy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_BeforeCopy) event and pasted by using the [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AddRecordAsync__0_System_Nullable_System_Double__System_Nullable_Syncfusion_Blazor_Gantt_RowPosition__) method and by binding keyboard events `onkeyup`.
280+
You can use the [RowSelected](https://blazor.syncfusion.com/documentation/gantt-chart/events#rowselected) event, which captures the index of the active row. When a copy command is triggered (`Ctrl + C`), the [BeforeCopy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_BeforeCopy) event processes the selected row data and prepares it for duplication. The paste operation is initiated through the `onkeyup` keyboard event (`Ctrl + V`) and handled using the [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AddRecordAsync__0_System_Nullable_System_Double__System_Nullable_Syncfusion_Blazor_Gantt_RowPosition__) method, which inserts the copied records above the selected row. To prevent unintended paste actions, the [RowDeselected](https://blazor.syncfusion.com/documentation/gantt-chart/events#rowdeselected) event resets the selection index when no row is active.
271281

272282
{% tabs %}
273283
{% highlight razor tabtitle="Index.razor" %}
274284

275285
@using Syncfusion.Blazor.Gantt
276286
@using Syncfusion.Blazor.Grids
287+
277288
<SfGantt @ref=GanttChart DataSource="@TaskCollection" @onkeyup="KeyUp" Height="350px" Width="750px">
278289
<GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration"
279290
ParentID="ParentID">
@@ -289,6 +300,7 @@ In the following code example, selected rows are copied by using the [BeforeCopy
289300
private List<TaskData> TaskCollection { get; set; }
290301
public List<TaskData> CopiedRecords { get; set; } = new List<TaskData>();
291302
public double SelectedIndex { get; set; }
303+
292304
public void RowDeselect(RowDeselectEventArgs<TaskData> Args)
293305
{
294306
SelectedIndex = -1;
@@ -328,14 +340,17 @@ In the following code example, selected rows are copied by using the [BeforeCopy
328340
}
329341
}
330342
}
343+
331344
public void RowSelect(RowSelectEventArgs<TaskData> Args)
332345
{
333346
SelectedIndex = Args.RowIndex;
334347
}
348+
335349
protected override void OnInitialized()
336350
{
337351
this.TaskCollection = GetTaskCollection();
338352
}
353+
339354
private async Task KeyUp(KeyboardEventArgs Args)
340355
{
341356
if (Args.CtrlKey && Args.Code == "KeyV" && CopiedRecords.Count > 0 && SelectedIndex > -1)
@@ -390,7 +405,9 @@ In the following code example, selected rows are copied by using the [BeforeCopy
390405

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

393-
In the following code example, selected cells are copied and pasted by using the [UpdateRecordByIDAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_UpdateRecordByIDAsync__0_) method and by binding keyboard events `onkeydown` and `onkeyup.`
408+
**Selected Cell Copy and Paste:**
409+
410+
You can use the [CellSelected](https://blazor.syncfusion.com/documentation/gantt-chart/events#cellselected) event to identify the active row when a cell is selected. When the copy command (`Ctrl + C`) is triggered, the selected cell positions are captured using `GetSelectedRowCellIndexesAsync`. On paste (`Ctrl + V`), the copied values are applied to the corresponding cells in the target rows using the [UpdateRecordByIDAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_UpdateRecordByIDAsync__0_) method. The copy and paste actions are handled through `onkeydown` and `onkeyup` keyboard events. To avoid unintended updates, the [CellDeselected](https://blazor.syncfusion.com/documentation/gantt-chart/events#celldeselected) event resets the selection index when no cell is active.
394411

395412
{% tabs %}
396413
{% highlight razor tabtitle="Index.razor" %}
@@ -514,26 +531,24 @@ In the following code example, selected cells are copied and pasted by using the
514531

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

517-
## Autofill functionality in Gantt Chart
534+
## Autofill
518535

519-
To achieve the autofill functionality in the Gantt chart, the drag selection feature must be enabled, and the keyup event must be bound.
536+
To achieve the autofill functionality in the Gantt chart, the drag selection feature must be enabled, and the `keyup` event must be bound.
520537

521538
The following properties have been configured in the [GanttSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html) to enable the drag selection feature:
522539

523-
- [AllowDragSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_AllowDragSelection): `true`
540+
- [AllowDragSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_AllowDragSelection): **true**
524541
- [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Mode): [Cell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SelectionMode.html#Syncfusion_Blazor_Grids_SelectionMode_Cell)
525542
- [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Type): [Multiple](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SelectionType.html#Syncfusion_Blazor_Grids_SelectionType_Multiple)
526543
- [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_CellSelectionMode): [Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.CellSelectionMode.html#Syncfusion_Blazor_Grids_CellSelectionMode_Box)
527544

528-
Using these settings, the user can select multiple cells in the Gantt chart by dragging the mouse.
529-
530-
Then the native keyup event is bound to the Gantt chart in order to customize the keydown actions in the gantt chart. In the example provided, the Alt key is captured to fill the data while dragging the selection. For more information, please refer to this [page](https://blazor.syncfusion.com/documentation/gantt-chart/how-to/bind-native-events).
545+
These settings allow users to select multiple cells by dragging the mouse.
531546

532-
The value of first selected cell is captured in the [CellSelectedEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_CellSelected) based on the cell index.
547+
The `keyup` event is used to detect key actions. For more information, please refer to this [page](https://blazor.syncfusion.com/documentation/gantt-chart/how-to/bind-native-events). In this example, pressing the `Alt` key triggers autofill. The value of the first selected cell is captured during the `CellSelected` event based on the selected cell index.
533548

534-
When the `Alt` key is pressed and released during a multiple cell selection, the [UpdateRecordByID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_UpdateRecordByIDAsync__0_) method is called in the Keyup event. This method updates the values of all selected rows with the value of the first selected cell, effectively copying the value of the first selected cell to all other cells in those rows that were selected.
549+
When the `Alt` key is released during a multi-cell selection, the [UpdateRecordByID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_UpdateRecordByIDAsync__0_) method is called in the `keyup` event. This updates all selected rows by copying the value from the first selected cell to the corresponding cells in other rows.
535550

536-
With this customization, users can easily and quickly update multiple cells in the Gantt chart, improving overall efficiency.
551+
This customization enables users to quickly update multiple cells, improving data entry efficiency in the Gantt chart.
537552

538553
{% tabs %}
539554
{% highlight razor tabtitle="Index.razor" %}

blazor/gantt-chart/column-menu.md

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,20 @@ documentation: ug
99

1010
# Column Menu in Blazor Gantt Chart Component
1111

12-
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.
12+
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.
1313

14-
## Column Menu
14+
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.
1515

16-
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.
17-
18-
The default menu items are:
16+
The following built-in column menu items are available:
1917

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

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

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

79-
> **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`.
77+
> **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**.
8078
8179
## See also
8280

0 commit comments

Comments
 (0)