From 589d2a6a7c32a305ded60ea6430cb6f877787287 Mon Sep 17 00:00:00 2001 From: IvanDanchev Date: Mon, 23 Jun 2025 16:48:34 +0300 Subject: [PATCH 1/2] kb(Gantt): add Gantt TreeList width persistance kb --- ...tt-persist-treelist-width-after-refresh.md | 213 ++++++++++++++++++ 1 file changed, 213 insertions(+) create mode 100644 knowledge-base/gantt-persist-treelist-width-after-refresh.md diff --git a/knowledge-base/gantt-persist-treelist-width-after-refresh.md b/knowledge-base/gantt-persist-treelist-width-after-refresh.md new file mode 100644 index 0000000000..e0531f310e --- /dev/null +++ b/knowledge-base/gantt-persist-treelist-width-after-refresh.md @@ -0,0 +1,213 @@ +--- +title: Persist Gantt TreeList after Refresh +description: How to persist the width of the Gantt's treelist after refreshing its data? +type: how-to +page_title: How to Display Model Fields in the Gantt Tooltip? +slug: gantt-kb-persist-treelist-width-after-refresh +tags: gantt, blazor, treelist, width, persist +res_type: kb +ticketid: 1690467 +--- + +## Environment + + + + + + + +
ProductGantt for Blazor
+ +## Description + +If I resize the TreeList part of the Gantt, it gets back to its initial width, after I refresh the Gantt's data. How can I persist the current TreeList width? + +## Solution + +To persist the current TreeList width, follow the steps below: + +1. Bind the `TreeListWidth` parameter of the Gantt to a property. In the example below, the property is named `ListWidth`. +2. In the methods that manipulate the data of the Gantt (`AddRootTask` and `RemoveTask`), use JavaScript interop to invoke a function. The logic in the function gets and returns the current width of the TreeList. +3. Use the current width value to update the value of the `ListWidth` property, before refreshing the data by calling `.Rebind()`. + +````RAZOR +@inject IJSRuntime JS + +Add root task + +Remove Task 1 + + + + + + + + + + + + + + + + + + + + + +@code { + private TelerikGantt GanttRef; + private string ListWidth { get; set; } = "390px"; + + private List GanttData { get; set; } + + private GanttView SelectedView { get; set; } = GanttView.Week; + + private async Task AddRootTask() + { + var i = GanttData.Last().Id + 1; + + GanttData.Insert(0, new FlatModel() + { + Id = i, + ParentId = null, + Title = "new task", + PercentComplete = 0, + Start = new DateTime(2021, 7, 5), + End = new DateTime(2021, 7, 15) + }); + + var currentListWidth = await JS.InvokeAsync("getListSize"); + ListWidth = currentListWidth; + + GanttRef.Rebind(); + } + + private async Task RemoveTask() + { + var taskToRemove = GanttData.FirstOrDefault(x => x.Title == "Task 1"); + + GanttData.Remove(taskToRemove); + + var currentListWidth = await JS.InvokeAsync("getListSize"); + ListWidth = currentListWidth; + + GanttRef.Rebind(); + } + + 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; } + } + + private int LastId { get; set; } = 1; + + protected override void OnInitialized() + { + GanttData = new List(); + var random = new Random(); + + for (int i = 1; i < 6; i++) + { + var newItem = new FlatModel() + { + Id = LastId, + Title = "Task " + i.ToString(), + Start = new DateTime(2021, 7, 5 + i), + End = new DateTime(2021, 7, 11 + i), + PercentComplete = Math.Round(random.NextDouble(), 2) + }; + + GanttData.Add(newItem); + var parentId = LastId; + LastId++; + + for (int j = 0; j < 5; j++) + { + GanttData.Add(new FlatModel() + { + Id = LastId, + ParentId = parentId, + Title = " Task " + i + " : " + j.ToString(), + Start = new DateTime(2021, 7, 5 + j), + End = new DateTime(2021, 7, 6 + i + j), + PercentComplete = Math.Round(random.NextDouble(), 2) + }); + + LastId++; + } + } + + base.OnInitialized(); + } + + private void UpdateItem(GanttUpdateEventArgs args) + { + var item = args.Item as FlatModel; + + var foundItem = GanttData.FirstOrDefault(i => i.Id.Equals(item.Id)); + + if (foundItem != null) + { + foundItem.Title = item.Title; + foundItem.Start = item.Start; + foundItem.End = item.End; + foundItem.PercentComplete = item.PercentComplete; + } + } + + private void DeleteItem(GanttDeleteEventArgs args) + { + var item = GanttData.FirstOrDefault(i => i.Id.Equals((args.Item as FlatModel).Id)); + + RemoveChildRecursive(item); + } + + private void RemoveChildRecursive(FlatModel item) + { + var children = GanttData.Where(i => item.Id.Equals(i.ParentId)).ToList(); + + foreach (var child in children) + { + RemoveChildRecursive(child); + } + + GanttData.Remove(item); + } +} +```` + +## See Also + +- [Gantt Overview - Telerik UI for Blazor](slug:gantt-overview) From 53374c78e5a4355b056929b2eed7d763931c9102 Mon Sep 17 00:00:00 2001 From: IvanDanchev Date: Tue, 1 Jul 2025 09:14:36 +0300 Subject: [PATCH 2/2] kb(Gantt): add PR review suggestions --- ...tt-persist-treelist-width-after-refresh.md | 93 +++++++++---------- 1 file changed, 45 insertions(+), 48 deletions(-) diff --git a/knowledge-base/gantt-persist-treelist-width-after-refresh.md b/knowledge-base/gantt-persist-treelist-width-after-refresh.md index e0531f310e..169c7c23a0 100644 --- a/knowledge-base/gantt-persist-treelist-width-after-refresh.md +++ b/knowledge-base/gantt-persist-treelist-width-after-refresh.md @@ -4,7 +4,7 @@ description: How to persist the width of the Gantt's treelist after refreshing i type: how-to page_title: How to Display Model Fields in the Gantt Tooltip? slug: gantt-kb-persist-treelist-width-after-refresh -tags: gantt, blazor, treelist, width, persist +tags: gantt, blazor, treelist, width res_type: kb ticketid: 1690467 --- @@ -82,11 +82,10 @@ To persist the current TreeList width, follow the steps below: @code { - private TelerikGantt GanttRef; + private TelerikGantt? GanttRef { get; set; } private string ListWidth { get; set; } = "390px"; - + private int LastId { get; set; } = 1; private List GanttData { get; set; } - private GanttView SelectedView { get; set; } = GanttView.Week; private async Task AddRootTask() @@ -106,7 +105,7 @@ To persist the current TreeList width, follow the steps below: var currentListWidth = await JS.InvokeAsync("getListSize"); ListWidth = currentListWidth; - GanttRef.Rebind(); + GanttRef?.Rebind(); } private async Task RemoveTask() @@ -118,25 +117,47 @@ To persist the current TreeList width, follow the steps below: var currentListWidth = await JS.InvokeAsync("getListSize"); ListWidth = currentListWidth; - GanttRef.Rebind(); + GanttRef?.Rebind(); } - class FlatModel + + private void UpdateItem(GanttUpdateEventArgs args) { - 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; } + var item = args.Item as FlatModel; + + var foundItem = GanttData.FirstOrDefault(i => i.Id.Equals(item.Id)); + + if (foundItem != null) + { + foundItem.Title = item.Title; + foundItem.Start = item.Start; + foundItem.End = item.End; + foundItem.PercentComplete = item.PercentComplete; + } } - private int LastId { get; set; } = 1; + private void DeleteItem(GanttDeleteEventArgs args) + { + var item = GanttData.FirstOrDefault(i => i.Id.Equals((args.Item as FlatModel).Id)); + + RemoveChildRecursive(item); + } + + private void RemoveChildRecursive(FlatModel item) + { + var children = GanttData.Where(i => item.Id.Equals(i.ParentId)).ToList(); + + foreach (var child in children) + { + RemoveChildRecursive(child); + } + + GanttData.Remove(item); + } protected override void OnInitialized() { GanttData = new List(); - var random = new Random(); for (int i = 1; i < 6; i++) { @@ -146,7 +167,7 @@ To persist the current TreeList width, follow the steps below: Title = "Task " + i.ToString(), Start = new DateTime(2021, 7, 5 + i), End = new DateTime(2021, 7, 11 + i), - PercentComplete = Math.Round(random.NextDouble(), 2) + PercentComplete = Math.Round(Random.Shared.NextDouble(), 2) }; GanttData.Add(newItem); @@ -162,7 +183,7 @@ To persist the current TreeList width, follow the steps below: Title = " Task " + i + " : " + j.ToString(), Start = new DateTime(2021, 7, 5 + j), End = new DateTime(2021, 7, 6 + i + j), - PercentComplete = Math.Round(random.NextDouble(), 2) + PercentComplete = Math.Round(Random.Shared.NextDouble(), 2) }); LastId++; @@ -172,38 +193,14 @@ To persist the current TreeList width, follow the steps below: base.OnInitialized(); } - private void UpdateItem(GanttUpdateEventArgs args) - { - var item = args.Item as FlatModel; - - var foundItem = GanttData.FirstOrDefault(i => i.Id.Equals(item.Id)); - - if (foundItem != null) - { - foundItem.Title = item.Title; - foundItem.Start = item.Start; - foundItem.End = item.End; - foundItem.PercentComplete = item.PercentComplete; - } - } - - private void DeleteItem(GanttDeleteEventArgs args) - { - var item = GanttData.FirstOrDefault(i => i.Id.Equals((args.Item as FlatModel).Id)); - - RemoveChildRecursive(item); - } - - private void RemoveChildRecursive(FlatModel item) + class FlatModel { - var children = GanttData.Where(i => item.Id.Equals(i.ParentId)).ToList(); - - foreach (var child in children) - { - RemoveChildRecursive(child); - } - - GanttData.Remove(item); + 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; } } } ````