Skip to content

Commit 5779287

Browse files
svdimitrdimodi
svdimitr
and
dimodi
authored
Docs: Column resize and reorder (#458)
* feat(gantt): column resize and reorder * chore(fixes): fix according to Marin's feedback * Update components/gantt/gantt-tree/columns/resize.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/gantt/gantt-tree/columns/reorder.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/gantt/gantt-tree/columns/resize.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/gantt/gantt-tree/columns/resize.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/gantt/gantt-tree/columns/resize.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/gantt/gantt-tree/columns/reorder.md Co-authored-by: Dimo Dimov <[email protected]> Co-authored-by: Dimo Dimov <[email protected]>
1 parent 7fd4f6c commit 5779287

File tree

2 files changed

+227
-0
lines changed

2 files changed

+227
-0
lines changed

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

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
---
2+
title: Reorder
3+
page_title: Gantt Tree - Reorder Columns
4+
description: Drag to reorder columns in the Gantt Tree for Blazor.
5+
slug: gantt-columns-reorder
6+
tags: telerik,blazor,gantt,column,reorder,drag
7+
published: True
8+
position: 2
9+
---
10+
11+
# Reorder Columns
12+
13+
The Gantt Tree lets the user reorder columns by dragging their headers.
14+
15+
To enable column reordering, set the `Reorderable` parameter of the respective `GanttColumn` to `true`.
16+
17+
To prevent the user from moving a certain column, set its own parameter `Reorderable="false"`. Note that the user can still re-arrange other columns around it.
18+
19+
>caption Enable column reordering in Telerik Gantt
20+
21+
````CSHTML
22+
@* Drag a column header between other columns to change the columns positions. *@
23+
24+
<TelerikGantt Data="@Data"
25+
Width="900px"
26+
Height="600px"
27+
IdField="Id"
28+
ParentIdField="ParentId">
29+
<GanttViews>
30+
<GanttDayView></GanttDayView>
31+
<GanttWeekView></GanttWeekView>
32+
<GanttMonthView></GanttMonthView>
33+
<GanttYearView></GanttYearView>
34+
</GanttViews>
35+
<GanttColumns>
36+
<GanttColumn Field="Title"
37+
Expandable="true"
38+
Reorderable="true"
39+
Width="160px"
40+
Title="Task Title">
41+
</GanttColumn>
42+
<GanttColumn Field="Start"
43+
Reorderable="true"
44+
Width="100px">
45+
</GanttColumn>
46+
<GanttColumn Field="End"
47+
Reorderable="true"
48+
Width="100px">
49+
</GanttColumn>
50+
</GanttColumns>
51+
</TelerikGantt>
52+
53+
@code {
54+
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
55+
56+
class FlatModel
57+
{
58+
public int Id { get; set; }
59+
public int? ParentId { get; set; }
60+
public string Title { get; set; }
61+
public double PercentComplete { get; set; }
62+
public DateTime Start { get; set; }
63+
public DateTime End { get; set; }
64+
}
65+
66+
public int LastId { get; set; } = 1;
67+
List<FlatModel> Data { get; set; }
68+
69+
protected override void OnInitialized()
70+
{
71+
Data = new List<FlatModel>();
72+
var random = new Random();
73+
74+
for (int i = 1; i < 6; i++)
75+
{
76+
var newItem = new FlatModel()
77+
{
78+
Id = LastId,
79+
Title = "Employee " + i.ToString(),
80+
Start = new DateTime(2020, 12, 6 + i),
81+
End = new DateTime(2020, 12, 11 + i),
82+
PercentComplete = Math.Round(random.NextDouble(), 2)
83+
};
84+
85+
Data.Add(newItem);
86+
var parentId = LastId;
87+
LastId++;
88+
89+
for (int j = 0; j < 5; j++)
90+
{
91+
Data.Add(new FlatModel()
92+
{
93+
Id = LastId,
94+
ParentId = parentId,
95+
Title = " Employee " + i + " : " + j.ToString(),
96+
Start = new DateTime(2020, 12, 6 + i + j),
97+
End = new DateTime(2020, 12, 7 + i + j),
98+
PercentComplete = Math.Round(random.NextDouble(), 2)
99+
});
100+
101+
LastId++;
102+
}
103+
}
104+
105+
base.OnInitialized();
106+
}
107+
}
108+
````
109+
110+
111+
## See Also
112+
113+
* [Live Demo: Column Reordering](https://demos.telerik.com/blazor-ui/gantt/column-reordering)

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

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
---
2+
title: Resize
3+
page_title: Gantt Tree - Resize Columns
4+
description: Drag to resize columns in the Gantt Chart for Blazor.
5+
slug: gantt-columns-resize
6+
tags: telerik,blazor,gantt,column,resize,drag
7+
published: True
8+
position: 3
9+
---
10+
11+
# Resize Columns
12+
13+
The Gantt Tree lets the user resize columns by dragging the borders between their headers.
14+
15+
To enable column resizing, set the `Resizable` parameter of the `GanttColumn` to `true`.
16+
17+
To disable resizing of a certain column, set its own parameter `Resizable="false"`. Note that the user can still resize other columns around it.
18+
19+
When column resizing is enabled, a double click on the resize handle between two header cells will automatically adjust the column width, based on the header and data content.
20+
21+
>caption Enable column resizing in Telerik Gantt Tree
22+
23+
````CSHTML
24+
@* Drag the border between column headers to change the column size. *@
25+
26+
<TelerikGantt Data="@Data"
27+
Width="900px"
28+
Height="600px"
29+
IdField="Id"
30+
ParentIdField="ParentId">
31+
<GanttViews>
32+
<GanttDayView></GanttDayView>
33+
<GanttWeekView></GanttWeekView>
34+
<GanttMonthView></GanttMonthView>
35+
<GanttYearView></GanttYearView>
36+
</GanttViews>
37+
<GanttColumns>
38+
<GanttColumn Field="Title"
39+
Expandable="true"
40+
Resizable="true"
41+
Width="160px"
42+
Title="Task Title">
43+
</GanttColumn>
44+
<GanttColumn Field="Start"
45+
Resizable="true"
46+
Width="100px">
47+
</GanttColumn>
48+
<GanttColumn Field="End"
49+
Resizable="true"
50+
Width="100px">
51+
</GanttColumn>
52+
</GanttColumns>
53+
</TelerikGantt>
54+
55+
@code {
56+
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
57+
58+
class FlatModel
59+
{
60+
public int Id { get; set; }
61+
public int? ParentId { get; set; }
62+
public string Title { get; set; }
63+
public double PercentComplete { get; set; }
64+
public DateTime Start { get; set; }
65+
public DateTime End { get; set; }
66+
}
67+
68+
public int LastId { get; set; } = 1;
69+
List<FlatModel> Data { get; set; }
70+
71+
protected override void OnInitialized()
72+
{
73+
Data = new List<FlatModel>();
74+
var random = new Random();
75+
76+
for (int i = 1; i < 6; i++)
77+
{
78+
var newItem = new FlatModel()
79+
{
80+
Id = LastId,
81+
Title = "Employee " + i.ToString(),
82+
Start = new DateTime(2020, 12, 6 + i),
83+
End = new DateTime(2020, 12, 11 + i),
84+
PercentComplete = Math.Round(random.NextDouble(), 2)
85+
};
86+
87+
Data.Add(newItem);
88+
var parentId = LastId;
89+
LastId++;
90+
91+
for (int j = 0; j < 5; j++)
92+
{
93+
Data.Add(new FlatModel()
94+
{
95+
Id = LastId,
96+
ParentId = parentId,
97+
Title = " Employee " + i + " : " + j.ToString(),
98+
Start = new DateTime(2020, 12, 6 + i + j),
99+
End = new DateTime(2020, 12, 7 + i + j),
100+
PercentComplete = Math.Round(random.NextDouble(), 2)
101+
});
102+
103+
LastId++;
104+
}
105+
}
106+
107+
base.OnInitialized();
108+
}
109+
}
110+
````
111+
112+
## See Also
113+
114+
* [Live Demo: Column Resizing](https://demos.telerik.com/blazor-ui/gantt/column-resizing)

0 commit comments

Comments
 (0)