I would like to start the tree grid with all rows collapsed. At the moment I can do this only through load on demand.
*** Thread created by admin on customer behalf ***
Hi Abirami,
This public item here particularly pertains to the standalone TreeList component.
However, the same functionality is also available in the Gantt component. To manage the expand/collapse behavior, utilize the Gantt State. I've crafted an example for you:
@*Set initial Gantt state*@
@using Telerik.DataSource
<TelerikGantt @ref="@GanttRef"
Data="@GanttData"
OnStateInit="@( (GanttStateEventArgs<GanttTask> args) => OnStateInitHandler(args) )"
Sortable="true"
FilterMode="@GanttFilterMode.FilterRow"
IdField="Id"
ParentIdField="ParentId"
ColumnResizable="true"
TreeListWidth="50%"
Width="1000px"
Height="600px"
OnUpdate="@OnTaskUpdate"
OnDelete="@OnTaskDelete">
<GanttColumns>
<GanttColumn Field="Title"
Expandable="true"
Width="160px"
Title="Task Title">
</GanttColumn>
<GanttColumn Field="PercentComplete"
Title="Status"
Width="100px">
</GanttColumn>
<GanttColumn Field="Start"
Width="100px"
DisplayFormat="{0:d}">
</GanttColumn>
<GanttColumn Field="End"
Width="100px"
DisplayFormat="{0:d}">
</GanttColumn>
</GanttColumns>
<GanttViews>
<GanttDayView></GanttDayView>
<GanttWeekView></GanttWeekView>
<GanttMonthView></GanttMonthView>
</GanttViews>
</TelerikGantt>
@code {
private TelerikGantt<GanttTask> GanttRef;
private List<GanttTask> GanttData { get; set; }
private async Task OnStateInitHandler(GanttStateEventArgs<GanttTask> args)
{
var filterDescriptorCollection = new FilterDescriptorCollection();
filterDescriptorCollection.Add(new FilterDescriptor(nameof(GanttTask.PercentComplete), FilterOperator.IsLessThan, 0.5) { MemberType = typeof(double) });
var state = new GanttState<GanttTask>
{
ExpandedItems = GanttData.Where(i => i.Id == 1).ToList(), //set the items you need to expand
View = GanttView.Week,
};
args.State = state;
}
class GanttTask
{
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<GanttTask>();
var random = new Random();
for (int i = 1; i < 6; i++)
{
var newItem = new GanttTask()
{
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 GanttTask()
{
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 OnTaskUpdate(GanttUpdateEventArgs args)
{
var item = args.Item as GanttTask;
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 OnTaskDelete(GanttDeleteEventArgs args)
{
var item = GanttData.FirstOrDefault(i => i.Id.Equals((args.Item as GanttTask).Id));
RemoveChildRecursive(item);
}
private void RemoveChildRecursive(GanttTask item)
{
var children = GanttData.Where(i => item.Id.Equals(i.ParentId)).ToList();
foreach (var child in children)
{
RemoveChildRecursive(child);
}
GanttData.Remove(item);
}
}
Regards,
Hristian Stefanov
Progress Telerik
Hi Team,
I would like to load Treelist for Blazor by default in Collapsed state.
Also looking for functionality like expand all / collapse all.
Let me how can achieve that?
Thanks,
Aarti
Hello Al,
You can see an example of how to collapse and expand the items from code from our documentation.
Regards,
Svetoslav Dimitrov
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
>Release 2.18.0
So, I installed this version. How can I control state of items?
Hello,
I am attaching to the end of this post a potential workaround that can help start a treelist with all items expanded - to see this work select one item from the treelist, click the button below it to see the second treelist populate with some data.
This is not a feature yet, it relies on re-rendering the treelist by toggling its visibility with an if-block, and that having all data items with hierarchical binding will start them expanded at the moment. Such a workaround should be replaced with a real feature when it becomes available and I cannot guarantee it will work in all cases.
Regards,
Marin Bratanov
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.