Skip to content

Commit a6f2b28

Browse files
NithyaSivaprakasamNithyaSivaprakasam
committed
982290: Part 2 - Check code snippet and make preview sample in blazor platform
1 parent 15c3ca5 commit a6f2b28

File tree

8 files changed

+78
-83
lines changed

8 files changed

+78
-83
lines changed

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

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
3-
title: Column template in Blazor Gantt Chart Component | Syncfusion
4-
description: Checkout and learn here all about column template in Syncfusion Blazor Gantt Chart component and much more details.
3+
title: Column Template in Blazor Gantt Chart Component | Syncfusion
4+
description: Checkout and learn here all about Column Template in Syncfusion Blazor Gantt Chart component and much more details.
55
platform: Blazor
66
control: Gantt Chart
77
documentation: ug
@@ -11,7 +11,7 @@ documentation: ug
1111

1212
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.
1313

14-
> **Note**: 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.
14+
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.
1515

1616
{% tabs %}
1717
{% highlight razor tabtitle="Index.razor" %}
@@ -25,10 +25,9 @@ A column template is used to customize the column’s look. The following code e
2525
<GanttColumn Field="TaskName" HeaderText="Task Name">
2626
<Template>
2727
@{
28-
var task = context as TaskData;
29-
if (task != null)
28+
@if (context != null)
3029
{
31-
<SfButton CssClass="e-bigger" Content="@task.TaskName"></SfButton>
30+
<SfButton CssClass="e-bigger" Content="@((context as TaskData).TaskName)"></SfButton>
3231
}
3332
}
3433
</Template>
@@ -63,11 +62,11 @@ A column template is used to customize the column’s look. The following code e
6362
public static List<TaskData> GetTaskCollection()
6463
{
6564
List<TaskData> Tasks = new List<TaskData>() {
66-
new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21) },
65+
new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08) },
6766
new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 },
6867
new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 },
6968
new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 },
70-
new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21) },
69+
new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08) },
7170
new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 },
7271
new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 },
7372
new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }
@@ -79,4 +78,4 @@ A column template is used to customize the column’s look. The following code e
7978
{% endhighlight %}
8079
{% endtabs %}
8180

82-
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLINOiOiPhfvAzX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
81+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rjryZkBnBTRdmaLS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

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

Lines changed: 46 additions & 49 deletions
Large diffs are not rendered by default.

‎blazor/gantt-chart/criticalpath.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,4 @@ The following code snippet demonstrates how to customize the appearance of criti
208208

209209
![Customize taskbar](images/blazor-gantt-chart-critical-path-customize-taskbar.png)
210210

211-
You can find the GitHub sample for customizing the taskbar in the critical path [here](https://github.com/SyncfusionExamples/Blazor-UG-Examples).
212-
213211
>If the [ProjectEndDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ProjectEndDate) property is set in the `SfGantt`, any task that ends on or after this date is considered critical. If the `ProjectEndDate` is not set, the maximum end date from the task records is used to determine which tasks are critical.

‎blazor/gantt-chart/data-markers.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ The following code example demonstrates how to implement data markers in the Gan
2525
{% tabs %}
2626
{% highlight razor tabtitle="Index.razor" %}
2727

28+
2829
@using Syncfusion.Blazor.Gantt
2930
<SfGantt @ref="Gantt" DataSource="@TaskCollection" Height="450px" Width="700px">
3031
<GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration"
@@ -54,7 +55,7 @@ The following code example demonstrates how to implement data markers in the Gan
5455
public static List<TaskData> GetTaskCollection()
5556
{
5657
List<TaskData> Tasks = new List<TaskData>() {
57-
new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 06), Indicators=(new List<GanttIndicator>()
58+
new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), Indicators=(new List<GanttIndicator>()
5859
{
5960
new GanttIndicator() { Name="product", IconClass="e-btn-icon e-notes-info e-icons e-icon-left e-gantt e-notes-info::before", Date=new DateTime(2022, 01, 11), Tooltip="sales"}
6061
})
@@ -65,9 +66,9 @@ The following code example demonstrates how to implement data markers in the Gan
6566
new GanttIndicator(){ Name="product", IconClass="e-btn-icon e-notes-info e-icons e-icon-left e-gantt e-notes-info::before", Date=new DateTime(2022, 01, 8), Tooltip="sales" }
6667
})
6768
},
68-
new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 08), Duration = "5", Progress = 40, ParentID = 1 },
69-
new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "5", EndDate = new DateTime(2022, 01, 08), Progress = 30, ParentID = 1 },
70-
new TaskData() { TaskID = 5, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 08) },
69+
new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), Duration = "5", Progress = 40, ParentID = 1 },
70+
new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "5", EndDate = new DateTime(2022, 01, 05), Progress = 30, ParentID = 1 },
71+
new TaskData() { TaskID = 5, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07) },
7172
new TaskData() { TaskID = 6, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "2", Progress = 30, ParentID = 5 },
7273
new TaskData() { TaskID = 7, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 5 },
7374
new TaskData() { TaskID = 8, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "5", Progress = 30, ParentID = 5 },
@@ -79,6 +80,6 @@ The following code example demonstrates how to implement data markers in the Gan
7980
{% endhighlight %}
8081
{% endtabs %}
8182

82-
{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLeDusEiOwFmPhg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
83+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBIMjZOUHePgDUE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
8384

8485
N> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap5) to know how to render and configure the Gantt.

‎blazor/gantt-chart/deleting-tasks.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,11 @@ A task delete option in the Gantt Chart component can be enabled by enabling the
5353
{
5454
List<TaskData> Tasks = new List<TaskData>()
5555
{
56-
new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), },
56+
new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), },
5757
new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 },
5858
new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 },
5959
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, 06), EndDate = new DateTime(2022, 04, 21), },
60+
new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), },
6161
new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 },
6262
new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 },
6363
new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }
@@ -69,7 +69,7 @@ A task delete option in the Gantt Chart component can be enabled by enabling the
6969
{% endhighlight %}
7070
{% endtabs %}
7171

72-
{% previewsample "https://blazorplayground.syncfusion.com/embed/htrSZEiuhtKmpdxl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
72+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLSitjaKvGHUVbg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
7373

7474
N> You should set the `AllowDeleting` value to `true` to delete the record dynamically.
7575

@@ -111,11 +111,11 @@ The following code snippet explains how to enable the delete confirmation messag
111111
{
112112
List<TaskData> Tasks = new List<TaskData>()
113113
{
114-
new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), },
114+
new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), },
115115
new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 },
116116
new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 },
117117
new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 },
118-
new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), },
118+
new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), },
119119
new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 },
120120
new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 },
121121
new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }

‎blazor/gantt-chart/drag-and-drop.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,11 @@ You can dynamically rearrange the rows in the Gantt Chart component by using the
4343
{
4444
List<TaskData> Tasks = new List<TaskData>()
4545
{
46-
new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), },
46+
new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
4747
new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
4848
new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
4949
new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
50-
new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), },
50+
new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04),TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), },
5151
new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
5252
new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
5353
new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
@@ -99,11 +99,11 @@ Gantt also supports dragging multiple rows at a time and dropping them on any ro
9999
{
100100
List<TaskData> Tasks = new List<TaskData>()
101101
{
102-
new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), },
102+
new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
103103
new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
104104
new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
105105
new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
106-
new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), },
106+
new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04),TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), },
107107
new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
108108
new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
109109
new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
@@ -284,11 +284,11 @@ The following code example shows how to drag and drop a row on button click acti
284284
{
285285
List<TaskData> Tasks = new List<TaskData>()
286286
{
287-
new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), },
287+
new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
288288
new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
289289
new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
290290
new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
291-
new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), },
291+
new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04),TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), },
292292
new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
293293
new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
294294
new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }

0 commit comments

Comments
 (0)