Skip to content

Commit 4ed7ca2

Browse files
NithyaSivaprakasamNithyaSivaprakasam
committed
982400: Part 5 - Check code snippet and make preview sample in blazor platform
1 parent 3190f68 commit 4ed7ca2

12 files changed

+168
-110
lines changed

‎blazor/gantt-chart/column-menu.md‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,13 @@ The default items are displayed in the following table:
2222
| `ColumnChooser` | Choose the column visibility. |
2323
| `Filter` | Shows the filter menu based on column type. |
2424

25-
```cshtml
25+
{% tabs %}
26+
{% highlight razor tabtitle="Index.razor" %}
27+
2628
@using Syncfusion.Blazor.Gantt
2729
<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px" AllowResizing="true" ShowColumnMenu="true" AllowFiltering="true" AllowSorting="true">
28-
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate"
29-
Duration="Duration" Progress="Progress" ParentID="ParentId">
30+
<GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate"
31+
Duration="Duration" Progress="Progress" ParentID="ParentID">
3032
</GanttTaskFields>
3133
</SfGantt>
3234
@code{
@@ -38,34 +40,36 @@ The default items are displayed in the following table:
3840

3941
public class TaskData
4042
{
41-
public int TaskId { get; set; }
43+
public int TaskID { get; set; }
4244
public string TaskName { get; set; }
4345
public DateTime StartDate { get; set; }
4446
public DateTime? EndDate { get; set; }
4547
public string Duration { get; set; }
4648
public int Progress { get; set; }
47-
public int? ParentId { get; set; }
49+
public int? ParentID { get; set; }
4850
}
4951

5052
public static List<TaskData> GetTaskCollection()
5153
{
5254
List<TaskData> Tasks = new List<TaskData>()
5355
{
54-
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), },
55-
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 },
56-
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 },
57-
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 },
58-
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), },
59-
new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 },
60-
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 },
61-
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }
56+
new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), },
57+
new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 },
58+
new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 },
59+
new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 },
60+
new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), },
61+
new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 },
62+
new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 },
63+
new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }
6264
};
6365

6466
return Tasks;
6567
}
6668
}
67-
```
6869

69-
![Blazor Gantt Chart with Column Menu](images/blazor-gantt-chart-column-menu.png)
70+
{% endhighlight %}
71+
{% endtabs %}
72+
73+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLINkBxKQKsPDis?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
7074

7175
N> You can disable the column menu for a particular column by setting the `GanttColumn.ShowColumnMenu` to `false`.

‎blazor/gantt-chart/how-to/customize-expand-collapse-icon.md‎

Lines changed: 43 additions & 53 deletions
Large diffs are not rendered by default.

‎blazor/gantt-chart/how-to/hide-chart-part.md‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,12 @@ documentation: ug
1111

1212
In the Gantt Chart component, you can hide chart part and display Tree Grid part alone by setting the value of [GanttSplitterSettings.View](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSplitterSettings.html#Syncfusion_Blazor_Gantt_GanttSplitterSettings_View) property as `Grid`.
1313

14-
```cshtml
14+
{% tabs %}
15+
{% highlight razor tabtitle="Index.razor" %}
16+
1517
@using Syncfusion.Blazor.Gantt
1618
<SfGantt DataSource="@TaskCollection" Height="230px" Width="700px">
17-
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId">
19+
<GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
1820
</GanttTaskFields>
1921
<GanttSplitterSettings View="SplitterView.Grid"></GanttSplitterSettings>
2022
</SfGantt>
@@ -28,27 +30,27 @@ In the Gantt Chart component, you can hide chart part and display Tree Grid part
2830

2931
public class TaskData
3032
{
31-
public int TaskId { get; set; }
33+
public int TaskID { get; set; }
3234
public string TaskName { get; set; }
3335
public DateTime StartDate { get; set; }
3436
public DateTime EndDate { get; set; }
3537
public string Duration { get; set; }
3638
public int Progress { get; set; }
37-
public List<TaskData> SubTasks { get; set; }
39+
public int? ParentID { get; set; }
3840
}
3941

4042
private static List<TaskData> GetTaskCollection()
4143
{
4244
List<TaskData> Tasks = new List<TaskData>() {
43-
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 23), },
44-
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 50, ParentId = 1, },
45-
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 50, ParentId = 1, }
45+
new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
46+
new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 50, ParentID = 1, },
47+
new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 50, ParentID = 1, }
4648
};
4749
return Tasks;
4850
}
4951
}
50-
```
5152

52-
The following screenshot shows the output of the above code snippet.
53+
{% endhighlight %}
54+
{% endtabs %}
5355

54-
![Hiding Blazor Gantt Chart Part](../images/blazor-hide-gantt-chart-part.png)
56+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVetkLHARucneHx?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}

‎blazor/gantt-chart/images/blazor-gantt-chart-column-menu.png‎

-53.1 KB
Binary file not shown.

‎blazor/gantt-chart/images/blazor-gantt-chart-expand-collapse-icon-change.gif‎

-140 KB
Binary file not shown.

‎blazor/gantt-chart/images/blazor-hide-gantt-chart-part.png‎

-25.3 KB
Binary file not shown.

‎blazor/gantt-chart/responsive-columns.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,4 +57,4 @@ You can toggle the column visibility based on media queries, which are defined i
5757
return Tasks;
5858
}
5959
}
60-
```
60+
```

‎blazor/gantt-chart/rows.md‎

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ Row represents task information from the data source, and it is possible to perf
1515

1616
It is possible to change the height of the row in Gantt Chart by setting row height in pixels to the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.IGantt.html#Syncfusion_Blazor_Gantt_IGantt_RowHeight) property. The following code example explains how to change the row height in Gantt Chart at load time.
1717

18-
```cshtml
18+
{% tabs %}
19+
{% highlight razor tabtitle="Index.razor" %}
20+
1921
@using Syncfusion.Blazor.Gantt
2022

2123
<SfGantt DataSource="@TaskCollection" RowHeight=60 Height="450px" Width="900px">
@@ -71,7 +73,9 @@ In Gantt Chart, parent tasks are expanded/collapsed by using expand/collapse ico
7173
7274
All tasks available in Gantt Chart are rendered in collapsed state by setting the [CollapseAllParentTasks](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_CollapseAllParentTasks) property as `true`. The following code example shows how to use this property.
7375
74-
```cshtml
76+
{% tabs %}
77+
{% highlight razor tabtitle="Index.razor" %}
78+
7579
@using Syncfusion.Blazor.Gantt
7680
7781
<SfGantt DataSource="@TaskCollection" CollapseAllParentTasks="true" Height="450px" Width="900px">
@@ -123,7 +127,9 @@ All tasks available in Gantt Chart are rendered in collapsed state by setting th
123127

124128
In Gantt Chart, you can render some tasks in collapsed state and some tasks in expanded state by defining expand status of the task in the data source. This value was mapped to Gantt Chart component by using [GanttTaskFields.ExpandState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_ExpandState) property. The following code example shows how to use this property.
125129

126-
```cshtml
130+
{% tabs %}
131+
{% highlight razor tabtitle="Index.razor" %}
132+
127133
@using Syncfusion.Blazor.Gantt
128134

129135
<SfGantt DataSource="@TaskCollection" CollapseAllParentTasks="true" Height="450px" Width="900px">
@@ -176,7 +182,9 @@ In Gantt Chart, you can render some tasks in collapsed state and some tasks in e
176182
177183
You can use [GanttEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html) to handle on expand action, `Expanding` and `Expanded` events will be triggered with current expanding row’s information. Similarly, on collapse action, `Collapsing` and `Collapsed` events will be triggered. Using these events and their arguments, you can customize the expand/collapse action. The following code example shows how to prevent the particular row from expand/collapse action using the `Expanding` and `Collapsing` events.
178184
179-
```cshtml
185+
{% tabs %}
186+
{% highlight razor tabtitle="Index.razor" %}
187+
180188
@using Syncfusion.Blazor.Gantt
181189
182190
<SfGantt DataSource="@TaskCollection" Height="450px" Width="900px">
@@ -244,7 +252,9 @@ You can use [GanttEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
244252

245253
While rendering the Tree Grid part in Gantt Chart, the [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_RowDataBound) and [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_QueryCellInfo) events trigger for every row and cell. Using these events, you can customize the rows and cells. To customize the appearance of a row on the chart side by using the [QueryChartRowInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_QueryChartRowInfo) event. The following code example shows how to customize the cell and row elements using these events.
246254

247-
```cshtml
255+
{% tabs %}
256+
{% highlight razor tabtitle="Index.razor" %}
257+
248258
@using Syncfusion.Blazor.Gantt
249259
@using Syncfusion.Blazor.Grids
250260

@@ -352,7 +362,9 @@ While rendering the Tree Grid part in Gantt Chart, the [RowDataBound](https://he
352362
}
353363
```
354364

355-
```cshtml
365+
{% tabs %}
366+
{% highlight razor tabtitle="Index.razor" %}
367+
356368
@using Syncfusion.Blazor.Gantt
357369

358370
<SfGantt DataSource="@TaskCollection" Height="450px" Width="900px" TreeColumnIndex="1">
@@ -409,7 +421,9 @@ The Blazor Gantt Chart Component provides a method called [GetRowTaskModel](http
409421
410422
This is demonstrated in the below sample code, where the [GetRowTaskModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetRowTaskModel__0_) method is called on selecting the row, which returns the value of the task model details of the selected record.
411423
412-
```cshtml
424+
{% tabs %}
425+
{% highlight razor tabtitle="Index.razor" %}
426+
413427
@using Syncfusion.Blazor.Gantt
414428
@using Syncfusion.Blazor.Grids;
415429
<div>
@@ -496,7 +510,9 @@ This is demonstrated in the below sample code, where the [GetRowTaskModel](https
496510

497511
The `EnableRowHover` feature allows users to easily identify the current row by highlighting it when the mouse hovers over it. This feature can be activated by setting the [EnableRowHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableRowHover) property to true. The following code example explains how to enable row hover selection in Gantt Chart.
498512

499-
```cshtml
513+
{% tabs %}
514+
{% highlight razor tabtitle="Index.razor" %}
515+
500516
@using Syncfusion.Blazor.Gantt
501517

502518
<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px" EnableRowHover="true">
@@ -557,7 +573,9 @@ N> By default, all the column's `ClipMode` property is defined as `EllipsisWithT
557573
558574
You can enable the Grid cell tooltip by setting the [GanttColumn.ClipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_ClipMode) property to `EllipsisWithTooltip`.
559575
560-
```cshtml
576+
{% tabs %}
577+
{% highlight razor tabtitle="Index.razor" %}
578+
561579
@using Syncfusion.Blazor.Gantt
562580
@using Syncfusion.Blazor.Grids
563581
<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">

‎blazor/gantt-chart/searching.md‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ documentation: ug
1111

1212
You can search for records in the Gantt Chart component by using the [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SearchAsync_System_String_) method with search key as a parameter. The Gantt Chart component provides an option to integrate the search text box in the toolbar by adding the search item to the `Toolbar` property.
1313

14-
```cshtml
14+
{% tabs %}
15+
{% highlight razor tabtitle="Index.razor" %}
16+
1517
@using Syncfusion.Blazor.Gantt
1618
<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px" Toolbar="@(new List<string>() { "Search" })">
1719
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId">
@@ -62,7 +64,9 @@ The following screenshot shows the output of searching for string in Gantt Chart
6264
6365
In the Gantt Chart component, you can load a task with some search criteria by using the [GanttSearchSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSearchSettings.html) property. To apply a search at initial rendering, set the value for `Fields`, `Operator`, `Key`, and `IgnoreCase` in the `GanttSearchSettings` property.
6466
65-
```cshtml
67+
{% tabs %}
68+
{% highlight razor tabtitle="Index.razor" %}
69+
6670
@using Syncfusion.Blazor
6771
@using Syncfusion.Blazor.Gantt
6872
<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px" Toolbar="@(new List<string>() { "Search" })">
@@ -130,7 +134,9 @@ N> By default, the `GanttSearchSettings.Operator` value is *contains*.
130134

131135
To search the Gantt Chart records from an external button, invoke the `SearchAsync` method.
132136

133-
```cshtml
137+
{% tabs %}
138+
{% highlight razor tabtitle="Index.razor" %}
139+
134140
@using Syncfusion.Blazor.Gantt
135141
@using Syncfusion.Blazor.Buttons
136142
<SfButton @onclick="Search">Search</SfButton>
@@ -187,7 +193,9 @@ N> You should set the `AllowFiltering` property to `true` for searching the cont
187193
188194
By default, the Gantt Chart component searches all the columns. You can search specific columns by defining the specific columns' field names in the [GanttSearchSettings.Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSearchSettings.html#Syncfusion_Blazor_Gantt_GanttSearchSettings_Fields) property.
189195
190-
```cshtml
196+
{% tabs %}
197+
{% highlight razor tabtitle="Index.razor" %}
198+
191199
@using Syncfusion.Blazor.Gantt
192200
<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px" Toolbar="@(new List<string>() { "Search" })">
193201
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId">
@@ -239,7 +247,9 @@ N> In above sample, you can search only `TaskName` and `Duration` column values.
239247

240248
You can pass the `empty` string to the `SearchAsync` method to clear the searched Gantt records from the external button.
241249

242-
```cshtml
250+
{% tabs %}
251+
{% highlight razor tabtitle="Index.razor" %}
252+
243253
@using Syncfusion.Blazor
244254
@using Syncfusion.Blazor.Gantt
245255
@using Syncfusion.Blazor.Buttons

‎blazor/gantt-chart/selection.md‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@ The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gan
2424
* `Cell`: Allows you to select only cells.
2525
* `Both`: Allows you to select rows and cells at the same time.
2626

27-
```cshtml
27+
{% tabs %}
28+
{% highlight razor tabtitle="Index.razor" %}
29+
2830
@using Syncfusion.Blazor.Gantt
2931
@using Syncfusion.Blazor.Grids
3032
<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
@@ -75,7 +77,9 @@ The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gan
7577
The toggle selection allows you to select and deselect a specific row or cell. To enable toggle selection, set the [EnableToggle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_EnableToggle) property of the `SelectionSettings` to `true`. If you click the selected row or cell, then it will be deselected and vice versa.
7678
By default, the `EnableToggle` property is set to `false`.
7779
78-
```cshtml
80+
{% tabs %}
81+
{% highlight razor tabtitle="Index.razor" %}
82+
7983
@using Syncfusion.Blazor.Gantt
8084
@using Syncfusion.Blazor.Grids
8185
@using Syncfusion.Blazor.Buttons
@@ -137,7 +141,9 @@ The Gantt Chart allows to select range of cells or rows by mouse or touch draggi
137141

138142
* GanttChart supports drag selection in both [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_CellSelectionMode) `Flow` and `Box` when cell selection enabled.
139143

140-
```cshtml
144+
{% tabs %}
145+
{% highlight razor tabtitle="Index.razor" %}
146+
141147
@using Syncfusion.Blazor.Gantt
142148
@using Syncfusion.Blazor.Grids
143149
<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
@@ -188,7 +194,9 @@ The Gantt Chart allows to select range of cells or rows by mouse or touch draggi
188194
189195
You can clear the selected cells and selected rows by using a method called [ClearSelectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ClearSelectionAsync). The following code example demonstrates how to clear the selected rows in Gantt Chart.
190196
191-
```cshtml
197+
{% tabs %}
198+
{% highlight razor tabtitle="Index.razor" %}
199+
192200
@using Syncfusion.Blazor.Gantt
193201
@using Syncfusion.Blazor.Grids
194202
@using Syncfusion.Blazor.Buttons
@@ -248,7 +256,9 @@ You can clear the selected cells and selected rows by using a method called [Cle
248256

249257
You can get the selected row indexes by using the [GetSelectedRowIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetSelectedRowIndexesAsync) method. And by using [GetSelectedRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetSelectedRecordsAsync) method, you can get the selected record details.
250258

251-
```cshtml
259+
{% tabs %}
260+
{% highlight razor tabtitle="Index.razor" %}
261+
252262
@using Syncfusion.Blazor.Gantt
253263
@using Syncfusion.Blazor.Grids
254264
<SfGantt @ref="Gantt" DataSource="@TaskCollection" Height="450px" Width="700px">

0 commit comments

Comments
 (0)