diff --git a/components/gantt/gantt-tree/columns/reorder.md b/components/gantt/gantt-tree/columns/reorder.md new file mode 100644 index 0000000000..57c0b88de6 --- /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 columns by dragging their headers. + +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. + +>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..d7de0c5d15 --- /dev/null +++ b/components/gantt/gantt-tree/columns/resize.md @@ -0,0 +1,114 @@ +--- +title: Resize +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 +position: 3 +--- + +# Resize Columns + +The Gantt Tree lets the user resize columns by dragging the borders between their headers. + +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. + +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 + +````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)