From 720ef23848aa2e2c062f2a3fafd006a181a05b8e Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Thu, 2 Sep 2021 16:47:42 +0300 Subject: [PATCH 1/8] feat(gantt): column resize and reorder --- .../gantt/gantt-tree/columns/reorder.md | 113 +++++++++++++++++ components/gantt/gantt-tree/columns/resize.md | 114 ++++++++++++++++++ 2 files changed, 227 insertions(+) create mode 100644 components/gantt/gantt-tree/columns/reorder.md create mode 100644 components/gantt/gantt-tree/columns/resize.md diff --git a/components/gantt/gantt-tree/columns/reorder.md b/components/gantt/gantt-tree/columns/reorder.md new file mode 100644 index 0000000000..b84d547b8c --- /dev/null +++ b/components/gantt/gantt-tree/columns/reorder.md @@ -0,0 +1,113 @@ +--- +title: Reorder +page_title: Gantt Tree - Reorder Columns +description: Drag to reorder columns in the Gantt Tree for Blazor. +slug: gantt-columns-reorder +tags: telerik,blazor,gantt,column,reorder,drag +published: True +position: 2 +--- + +# Reorder Columns + +The Gantt Tree lets the user reorder its columns by dragging their headers. + +To enable the column reordering, set the `Reorderable` parameter of the respective `GanttColumn` to `true`. + +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. + +>caption Enable column reordering in Telerik Gantt + +````CSHTML +@* Drag a column header between other columns to change the columns positions. *@ + + + + + + + + + + + + + + + + + + +@code { + public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0); + + class FlatModel + { + public int Id { get; set; } + public int? ParentId { get; set; } + public string Title { get; set; } + public double PercentComplete { get; set; } + public DateTime Start { get; set; } + public DateTime End { get; set; } + } + + public int LastId { get; set; } = 1; + List Data { get; set; } + + protected override void OnInitialized() + { + Data = new List(); + var random = new Random(); + + for (int i = 1; i < 6; i++) + { + var newItem = new FlatModel() + { + Id = LastId, + Title = "Employee " + i.ToString(), + Start = new DateTime(2020, 12, 6 + i), + End = new DateTime(2020, 12, 11 + i), + PercentComplete = Math.Round(random.NextDouble(), 2) + }; + + Data.Add(newItem); + var parentId = LastId; + LastId++; + + for (int j = 0; j < 5; j++) + { + Data.Add(new FlatModel() + { + Id = LastId, + ParentId = parentId, + Title = " Employee " + i + " : " + j.ToString(), + Start = new DateTime(2020, 12, 6 + i + j), + End = new DateTime(2020, 12, 7 + i + j), + PercentComplete = Math.Round(random.NextDouble(), 2) + }); + + LastId++; + } + } + + base.OnInitialized(); + } +} +```` + + +## See Also + + * [Live Demo: Column Reordering](https://demos.telerik.com/blazor-ui/gantt/column-reordering) diff --git a/components/gantt/gantt-tree/columns/resize.md b/components/gantt/gantt-tree/columns/resize.md new file mode 100644 index 0000000000..3f78b1c51f --- /dev/null +++ b/components/gantt/gantt-tree/columns/resize.md @@ -0,0 +1,114 @@ +--- +title: Resize +page_title: TreeList - Resize Columns +description: Drag to resize columns in the treelist for Blazor. +slug: gantt-columns-resize +tags: telerik,blazor,gantt,column,resize,drag +published: True +position: 3 +--- + +# Resize Columns + +The Gantt Tree lets the user resize its columns by dragging the borders between their headers. + +To enable the column resizing, set the `Resizable` parameter of the `GanttColumn` to `true`. + +To prevent the user from resizing a certain column, set its own parameter `Resizable="false"`. Note that the user can still resize other columns around it. + +When column resizing is enabled, a double click on the resize handle between the header cells will automatically fit the column width to the content of the header and data. + +>caption Enable column resizing in Telerik Gantt Tree + +````CSHTML +@* Drag the border between column headers to change the column size. *@ + + + + + + + + + + + + + + + + + + +@code { + public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0); + + class FlatModel + { + public int Id { get; set; } + public int? ParentId { get; set; } + public string Title { get; set; } + public double PercentComplete { get; set; } + public DateTime Start { get; set; } + public DateTime End { get; set; } + } + + public int LastId { get; set; } = 1; + List Data { get; set; } + + protected override void OnInitialized() + { + Data = new List(); + var random = new Random(); + + for (int i = 1; i < 6; i++) + { + var newItem = new FlatModel() + { + Id = LastId, + Title = "Employee " + i.ToString(), + Start = new DateTime(2020, 12, 6 + i), + End = new DateTime(2020, 12, 11 + i), + PercentComplete = Math.Round(random.NextDouble(), 2) + }; + + Data.Add(newItem); + var parentId = LastId; + LastId++; + + for (int j = 0; j < 5; j++) + { + Data.Add(new FlatModel() + { + Id = LastId, + ParentId = parentId, + Title = " Employee " + i + " : " + j.ToString(), + Start = new DateTime(2020, 12, 6 + i + j), + End = new DateTime(2020, 12, 7 + i + j), + PercentComplete = Math.Round(random.NextDouble(), 2) + }); + + LastId++; + } + } + + base.OnInitialized(); + } +} +```` + +## See Also + + * [Live Demo: Column Resizing](https://demos.telerik.com/blazor-ui/gantt/column-resizing) From 23154e99fb4721ebcb2be58ce8306b84ce2613cf Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Mon, 13 Sep 2021 16:35:38 +0300 Subject: [PATCH 2/8] chore(fixes): fix according to Marin's feedback --- components/gantt/gantt-tree/columns/resize.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/gantt/gantt-tree/columns/resize.md b/components/gantt/gantt-tree/columns/resize.md index 3f78b1c51f..71371688dd 100644 --- a/components/gantt/gantt-tree/columns/resize.md +++ b/components/gantt/gantt-tree/columns/resize.md @@ -1,7 +1,7 @@ --- title: Resize -page_title: TreeList - Resize Columns -description: Drag to resize columns in the treelist for Blazor. +page_title: Gantt Tree - Resize Columns +description: Drag to resize columns in the Gantt Chart for Blazor. slug: gantt-columns-resize tags: telerik,blazor,gantt,column,resize,drag published: True From d1f85d469debe7f881d3a96a8b4f27e6cd9495d3 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Mon, 13 Sep 2021 16:36:23 +0300 Subject: [PATCH 3/8] Update components/gantt/gantt-tree/columns/resize.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/gantt/gantt-tree/columns/resize.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/gantt/gantt-tree/columns/resize.md b/components/gantt/gantt-tree/columns/resize.md index 71371688dd..36cfdf9668 100644 --- a/components/gantt/gantt-tree/columns/resize.md +++ b/components/gantt/gantt-tree/columns/resize.md @@ -10,7 +10,7 @@ position: 3 # Resize Columns -The Gantt Tree lets the user resize its columns by dragging the borders between their headers. +The Gantt Tree lets the user resize columns by dragging the borders between their headers. To enable the column resizing, set the `Resizable` parameter of the `GanttColumn` to `true`. From 927fc3e9d39a7dbf4db0c55a995a81d1be282236 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Mon, 13 Sep 2021 16:36:29 +0300 Subject: [PATCH 4/8] Update components/gantt/gantt-tree/columns/reorder.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/gantt/gantt-tree/columns/reorder.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/gantt/gantt-tree/columns/reorder.md b/components/gantt/gantt-tree/columns/reorder.md index b84d547b8c..34fb54aa92 100644 --- a/components/gantt/gantt-tree/columns/reorder.md +++ b/components/gantt/gantt-tree/columns/reorder.md @@ -12,7 +12,7 @@ position: 2 The Gantt Tree lets the user reorder its columns by dragging their headers. -To enable the column reordering, set the `Reorderable` parameter of the respective `GanttColumn` to `true`. +To enable column reordering, set the `Reorderable` parameter of the respective `GanttColumn` to `true`. 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. From 756965784951e69355d4e79e4e70e9581afd36cc Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Mon, 13 Sep 2021 16:36:45 +0300 Subject: [PATCH 5/8] Update components/gantt/gantt-tree/columns/resize.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/gantt/gantt-tree/columns/resize.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/gantt/gantt-tree/columns/resize.md b/components/gantt/gantt-tree/columns/resize.md index 36cfdf9668..ff71173a8f 100644 --- a/components/gantt/gantt-tree/columns/resize.md +++ b/components/gantt/gantt-tree/columns/resize.md @@ -16,7 +16,7 @@ To enable the column resizing, set the `Resizable` parameter of the `GanttColumn To prevent the user from resizing a certain column, set its own parameter `Resizable="false"`. Note that the user can still resize other columns around it. -When column resizing is enabled, a double click on the resize handle between the header cells will automatically fit the column width to the content of the header and data. +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. >caption Enable column resizing in Telerik Gantt Tree From 0eae5a29d648128e23d5b11fa7522442170d66aa Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Mon, 13 Sep 2021 16:36:51 +0300 Subject: [PATCH 6/8] Update components/gantt/gantt-tree/columns/resize.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/gantt/gantt-tree/columns/resize.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/gantt/gantt-tree/columns/resize.md b/components/gantt/gantt-tree/columns/resize.md index ff71173a8f..daded6dc1d 100644 --- a/components/gantt/gantt-tree/columns/resize.md +++ b/components/gantt/gantt-tree/columns/resize.md @@ -14,7 +14,7 @@ The Gantt Tree lets the user resize columns by dragging the borders between thei To enable the column resizing, set the `Resizable` parameter of the `GanttColumn` to `true`. -To prevent the user from resizing a certain column, set its own parameter `Resizable="false"`. Note that the user can still resize other columns around it. +To disable resizing of a certain column, set its own parameter `Resizable="false"`. Note that the user can still resize other columns around it. 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. From 6e7075c3e2128d28f7cbfcca0e63c5978c0c52cc Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Mon, 13 Sep 2021 16:36:58 +0300 Subject: [PATCH 7/8] Update components/gantt/gantt-tree/columns/resize.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/gantt/gantt-tree/columns/resize.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/gantt/gantt-tree/columns/resize.md b/components/gantt/gantt-tree/columns/resize.md index daded6dc1d..d7de0c5d15 100644 --- a/components/gantt/gantt-tree/columns/resize.md +++ b/components/gantt/gantt-tree/columns/resize.md @@ -12,7 +12,7 @@ position: 3 The Gantt Tree lets the user resize columns by dragging the borders between their headers. -To enable the column resizing, set the `Resizable` parameter of the `GanttColumn` to `true`. +To enable column resizing, set the `Resizable` parameter of the `GanttColumn` to `true`. To disable resizing of a certain column, set its own parameter `Resizable="false"`. Note that the user can still resize other columns around it. From fbdd9d027191e9729e219458aa1415528155625b Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Mon, 13 Sep 2021 16:37:04 +0300 Subject: [PATCH 8/8] Update components/gantt/gantt-tree/columns/reorder.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/gantt/gantt-tree/columns/reorder.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/gantt/gantt-tree/columns/reorder.md b/components/gantt/gantt-tree/columns/reorder.md index 34fb54aa92..57c0b88de6 100644 --- a/components/gantt/gantt-tree/columns/reorder.md +++ b/components/gantt/gantt-tree/columns/reorder.md @@ -10,7 +10,7 @@ position: 2 # Reorder Columns -The Gantt Tree lets the user reorder its columns by dragging their headers. +The Gantt Tree lets the user reorder columns by dragging their headers. To enable column reordering, set the `Reorderable` parameter of the respective `GanttColumn` to `true`.