Skip to content

Commit dcc1ea4

Browse files
svdimitrntacheva
svdimitr
and
ntacheva
authored
Docs gantt chart (#414)
* docs(gantt): gant-tree * chore(gantt): docs improvements * chore(gantt): update docs * chore(docs): improvements * chore(docs): docs improvements * chore(gantt): last commit * chore(fix): slugs * chore(fix) slug * Docs gantt timeline (#413) * docs(gantt):added timeline overview, templates, views articles drafts * docs(gant):timeline articles update * docs(gantt):fixes * docs(gantt):fixing slugs * docs(gantt):improve file naming and structure * docs(gantt):small fixes Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Co-authored-by: Nadezhda Tacheva <Nadezhda.Tacheva@progress.com>
1 parent 31cfe05 commit dcc1ea4

29 files changed

+3196
-0
lines changed

‎_config.yml

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,24 @@ navigation:
7373
"*components/form/formitems":
7474
title: "Form Items"
7575
position: 20
76+
"*components/gantt/gantt-tree":
77+
title: "Gantt Tree"
78+
position: 5
79+
"*components/gantt/timeline":
80+
title: "Gantt Timeline"
81+
position: 10
82+
"*components/gantt/gantt-tree/data-binding":
83+
title: "Data Binding"
84+
position: 5
85+
"*components/gantt/gantt-tree/columns":
86+
title: "Columns"
87+
position: 7
88+
"*components/gantt/gantt-tree/filter":
89+
title: "Filtering"
90+
position: 25
91+
"*components/gantt/timeline/templates":
92+
title: "Templates"
93+
position: 15
7694
"*components/grid/columns":
7795
title: "Columns"
7896
position: 5

‎components/gantt/gantt-tree/columns/bound.md

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
---
2+
title: DataBound Column
3+
page_title: Gantt Tree - DataBound Column
4+
description: Data binding and bound column properties in Gantt for Blazor.
5+
slug: gantt-columns-bound
6+
tags: telerik,blazor,gantt,bound,column
7+
published: True
8+
position: 0
9+
---
10+
11+
# Gantt DataBound Column
12+
13+
This article explains the basics of showing data in a Gantt Tree and the features of its bound columns.
14+
15+
Sections in this article:
16+
17+
* [Show Data In A Gantt](#show-data-in-a-gantt)
18+
* [Gantt Bound Column Parameters](#gantt-bound-column-parameters)
19+
* [Notes](#notes)
20+
21+
22+
## Show Data In A Gantt
23+
24+
To show data in a Gantt Chart, you must define `GanttColumn` instances in the `GanttColumns` collection for the fields of the data source you want to show. Their `Field` parameter defines which property from the model is shown in the column. You can provide the collection of models to the Gantt in its `Data` parameter.
25+
26+
Since the Gantt is designed for hierarchical data, you should also define which column will hold the expand/collapse arrow for the child items. It can be any column, not necessarily the first, and you denote it by setting its `Expandable` parameter to `true`.
27+
28+
You can read more details on how to tie the Gantt to your data fields and child elements in the [Data Binding Overview]({%slug gantt-data-binding-overview%}) article. It provides information on the features of the model, and describing the parent-child relationships in two different ways.
29+
30+
>caption Provide data to the Gantt and choose which columns (fields) to see
31+
32+
````CSHTML
33+
@* define data, model and columns for a Gantt chart *@
34+
35+
<TelerikGantt Data="@Data"
36+
Width="50%"
37+
Height="600px"
38+
IdField="Id"
39+
ParentIdField="ParentId">
40+
<GanttViews>
41+
<GanttWeekView></GanttWeekView>
42+
</GanttViews>
43+
<GanttColumns>
44+
<GanttColumn Field="Id"
45+
Visible="false">
46+
</GanttColumn>
47+
<GanttColumn Field="Title"
48+
Expandable="true"
49+
Width="160px"
50+
Title="Task Title" >
51+
</GanttColumn>
52+
<GanttColumn Field="PercentComplete"
53+
Width="60px">
54+
</GanttColumn>
55+
<GanttColumn Field="Start"
56+
Width="100px"
57+
TextAlign="@ColumnTextAlign.Right">
58+
</GanttColumn>
59+
<GanttColumn Field="End"
60+
DisplayFormat="End: {0:d}"
61+
Width="100px">
62+
</GanttColumn>
63+
</GanttColumns>
64+
</TelerikGantt>
65+
66+
@code {
67+
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
68+
69+
class FlatModel
70+
{
71+
public int Id { get; set; }
72+
public int? ParentId { get; set; }
73+
public string Title { get; set; }
74+
public double PercentComplete { get; set; }
75+
public DateTime Start { get; set; }
76+
public DateTime End { get; set; }
77+
}
78+
79+
public int LastId { get; set; } = 1;
80+
List<FlatModel> Data { get; set; }
81+
82+
protected override void OnInitialized()
83+
{
84+
Data = new List<FlatModel>();
85+
var random = new Random();
86+
87+
for (int i = 1; i < 6; i++)
88+
{
89+
var newItem = new FlatModel()
90+
{
91+
Id = LastId,
92+
Title = "Employee " + i.ToString(),
93+
Start = new DateTime(2020, 12, 6 + i),
94+
End = new DateTime(2020, 12, 11 + i),
95+
PercentComplete = Math.Round(random.NextDouble(), 2)
96+
};
97+
98+
Data.Add(newItem);
99+
var parentId = LastId;
100+
LastId++;
101+
102+
for (int j = 0; j < 5; j++)
103+
{
104+
Data.Add(new FlatModel()
105+
{
106+
Id = LastId,
107+
ParentId = parentId,
108+
Title = " Employee " + i + " : " + j.ToString(),
109+
Start = new DateTime(2020, 12, 6 + i + j),
110+
End = new DateTime(2020, 12, 7 + i + j),
111+
PercentComplete = Math.Round(random.NextDouble(), 2)
112+
});
113+
114+
LastId++;
115+
}
116+
}
117+
118+
base.OnInitialized();
119+
}
120+
}
121+
````
122+
123+
>tip You can also use a string for the field name, using the `nameof` operator is not necessary.The field name is, however, **case-sensitive**.
124+
125+
>tip The `Data` collection can be an `ObservableCollection`, an array, a `List` - it must only implement `IEnumerable`.
126+
127+
128+
## Gantt Bound Column Parameters
129+
130+
You can use the following properties on bound columns:
131+
132+
### Data Binding
133+
134+
* `Expandable` - (defaults to `false`) - when set to true, the column shows an expand/collapse arrow in front of the value and denotes hierarchy be intending it. You should set this to at least one column of your treelist to showcase the hierarchical nature of the data.
135+
* `Field` - (defaults to `null`) - the name of the field in the data source that the column will render as a string (case-sensitive). You can set its as a plain string (`Field="SomeField"`) or to have .NET extract the field name from the model for flat models (`Field=@nameof(MyModelClass.SomeFIeld)`).
136+
137+
### Appearance
138+
139+
* `Title` - the text that is rendered in the column header. See the Notes below for its behavior.
140+
* `DisplayFormat` - the C# format string that is used to render the field value in the cell when the grid is in display mode. Read more in the [Column Display Format]({%slug treelist-columns-displayformat%}) article.
141+
* `TextAlign` - specifies the horizontal alignment of the cell text. For example, you can use this property to right-align numeric columns. The property accepts `ColumnTextAlign` enum values (`Left`, `Right` or `Center`). If not set, the text alignment will depend on existing styles on the page, default browser behavior and the text direction.
142+
* `Visible` - (defaults to `null`) - if this parameter is set to `false` it hides the column from the Gantt Tree. Accepts both `bool` and `bool?` types, and `null` is treated like `true`.
143+
144+
## Notes
145+
146+
* For advanced operations such as filtering and sorting, you *must* set a `Field` to the column, and the field it points to must be a string or a value type (such as a number, string, DateTime, boolean).
147+
* If a `Field` is not set the column will not allow filtering, sorting and editing for the column.
148+
* If the `Field` points to a custom object or something like an `IDictionary`, errors will be thrown upon those actions because there are no known data operations on non-primitive types in .NET.
149+
150+
* If you don't set a `Title` for a column, the Gantt will take the `[Display(Name = "My Column Title")]` data annotation attribute from the model field. If that's not available either, the name of the field will be shown.
151+
152+
* If the model has a `[DisplayFormat(DataFormatString = "{0:C}")]` data annotation attribute, the display format will be taken from the format string in the attribute.
153+
154+
* If you want to prevent data mutation for a specific property you can set the `Editable` parameter of the TreeListColumn or the `[Editable]` data annotation attribute to `false` for the desired model field.
155+
* Columns generated out of model properties that do not have a `setter` or it is not accessible (private) will not be editable too.
156+
157+
* The Gantt uses `Activator.CreateInstance<TItem>();` to generate a new item when an Insert action is invoked, so the Model should have a Parameterless constructor defined.

‎components/gantt/gantt-tree/columns/command.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: Command Column
3+
page_title: Gantt Tree - Command Column
4+
description: Command buttons per row in treelist for Blazor.
5+
slug: gantt-columns-command
6+
tags: telerik,blazor,gantt,column,command
7+
published: True
8+
position: 1
9+
---
10+
11+
# Gantt Tree Command Column
12+
13+
The command column of a Gantt Tree allows you to initiate [editing]({%slug gantt-tree-editing%}), or to execute your own commands.
14+
15+
To define it, add a `GanttCommandColumn` in the `GanttColumns` collection of a Gantt Chart. The command column takes a collection of `GanttCommandButton` instances that invoke the commands.
16+
17+
>tip The lists below showcase the available features and their use. After them you can find a code example that shows declarations and handling.
18+
19+
In this article:
20+
21+
* [Gantt Tree Command Column Features](#features)
22+
* [GanttCommandButton](#the-ganttcommandbutton-tag)
23+
* [Built-in Commands](#built-in-commands)
24+
* [OnClick Handler](#onclick-handler)
25+
* [Code Example](#example)
26+
27+
28+
## Features
29+
30+
This section describes the available features and their use.
31+
32+
### The GanttCommandButton Tag
33+
34+
The `GanttCommandButton` tag offers the following features:
35+
36+
* `Command` - the command that will be invoked. Can be one of the built-in commands (see below), or a custom command name.
37+
* `ShowInEdit` - a `boolean` property indicating whether the button is only visible while the user is editing/inserting data.
38+
* `ChildContent` - the text the button will render. You can also place it between the command button's opening and closing tags.
39+
* Appearance properties like `Icon`, `Class`, `Enabled` that are come from the underlying [Button Component features]({%slug components/button/overview%}).
40+
41+
### Built-in Commands
42+
43+
There are four built-in commands:
44+
45+
* `Add` - initiates the creation of a new item. Can apply to rows as well, to create a child element for the current row.
46+
* `Edit` - initiates the editing in the Gantt Tree.
47+
* `Save` - performs the actual update operation after the data has been changed. Triggers the `OnUpdate` or `OnCreate` event so you can perform the data source operation. Which event is triggered depends on whether the item was created or edited.
48+
* `Cancel` - aborts the current operation (edit or insert).
49+
50+
## See Also
51+
52+
* [Live Demo: TreeList Command Column](https://demos.telerik.com/blazor-ui/treelist/inlineediting)

‎components/gantt/gantt-tree/columns/display-format.md

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
---
2+
title: Display Format
3+
page_title: Gantt Tree - Display Format
4+
description: Use C# Format string to display values in the Gantt Tree for Blazor.
5+
slug: gantt-columns-displayformat
6+
tags: telerik,blazor,gantt,column,display,format
7+
published: True
8+
position: 2
9+
---
10+
11+
# Column Display Format
12+
13+
@[template](/_contentTemplates/grid/common-link.md#display-format-basics)
14+
15+
## Example
16+
17+
>caption Use C# format strings in the Gantt Tree through the component markup
18+
19+
````CSHTML
20+
21+
@* Format the dates in the Gantt Tree by using the DisplayFormat parameter *@
22+
23+
<TelerikGantt Data="@Data"
24+
Width="900px"
25+
Height="600px"
26+
IdField="Id"
27+
ParentIdField="ParentId">
28+
<GanttViews>
29+
<GanttDayView></GanttDayView>
30+
<GanttWeekView></GanttWeekView>
31+
<GanttMonthView></GanttMonthView>
32+
<GanttYearView></GanttYearView>
33+
</GanttViews>
34+
<GanttColumns>
35+
<GanttColumn Field="Title"
36+
Expandable="true"
37+
Width="160px"
38+
Title="Task Title">
39+
</GanttColumn>
40+
<GanttColumn Field="Start"
41+
Width="100px"
42+
DisplayFormat="Start: {0:d}">
43+
</GanttColumn>
44+
<GanttColumn Field="End"
45+
DisplayFormat="End: {0:d}"
46+
Width="100px">
47+
</GanttColumn>
48+
</GanttColumns>
49+
</TelerikGantt>
50+
51+
@code {
52+
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
53+
54+
class FlatModel
55+
{
56+
public int Id { get; set; }
57+
public int? ParentId { get; set; }
58+
public string Title { get; set; }
59+
public double PercentComplete { get; set; }
60+
public DateTime Start { get; set; }
61+
public DateTime End { get; set; }
62+
}
63+
64+
public int LastId { get; set; } = 1;
65+
List<FlatModel> Data { get; set; }
66+
67+
protected override void OnInitialized()
68+
{
69+
Data = new List<FlatModel>();
70+
var random = new Random();
71+
72+
for (int i = 1; i < 6; i++)
73+
{
74+
var newItem = new FlatModel()
75+
{
76+
Id = LastId,
77+
Title = "Employee " + i.ToString(),
78+
Start = new DateTime(2020, 12, 6 + i),
79+
End = new DateTime(2020, 12, 11 + i),
80+
PercentComplete = Math.Round(random.NextDouble(), 2)
81+
};
82+
83+
Data.Add(newItem);
84+
var parentId = LastId;
85+
LastId++;
86+
87+
for (int j = 0; j < 5; j++)
88+
{
89+
Data.Add(new FlatModel()
90+
{
91+
Id = LastId,
92+
ParentId = parentId,
93+
Title = " Employee " + i + " : " + j.ToString(),
94+
Start = new DateTime(2020, 12, 6 + i + j),
95+
End = new DateTime(2020, 12, 7 + i + j),
96+
PercentComplete = Math.Round(random.NextDouble(), 2)
97+
});
98+
99+
LastId++;
100+
}
101+
}
102+
103+
base.OnInitialized();
104+
}
105+
}
106+
````
107+
108+
>caption The result from the code snippet above
109+
110+
![DisplayFormat basic sample](images/treelist-display-format.png)
111+
112+
## Notes
113+
114+
* `Numeric`, `DateTime` and Enum types can use such formats. String and Boolean types are displayed without such a format, however.
115+
116+
* The `CurrentInfo.CurrentCulture` is used when rendering the formats, so if you need specific formats for specific users, you must set the culture of the app accordingly.

0 commit comments

Comments
 (0)