Completed
Last Updated: 26 Jan 2024 14:28 by ADMIN
Release 2.18.0
Jurgen
Created on: 23 Aug 2020 08:12
Category: TreeList
Type: Feature Request
10
Control the expanded/collapsed state of treelist items

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 ***

6 comments
ADMIN
Hristian Stefanov
Posted on: 26 Jan 2024 14:28

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Abirami
Posted on: 19 Jan 2024 20:01
Does this feature for controlling expand/collapse state of TreeList available now? I am looking to use this feature Gantt component to always show the data in expanded form. TIA
Taarti
Posted on: 30 Dec 2021 10:57

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

 

ADMIN
Svetoslav Dimitrov
Posted on: 27 Oct 2020 06:32

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/.

MaslovRG
Posted on: 27 Oct 2020 05:46

>Release 2.18.0

So, I installed this version. How can I control state of items?

ADMIN
Marin Bratanov
Posted on: 24 Sep 2020 16:50

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/.

Attached Files: