I would like the TreeList to support row virtualization. It will be useful when working with large data.

Please add TreeList Export to Excel

Regards

Andrzej

Hello,

I am using a TelerikTreeList with an EditorTemplate with a TextBox for one of it's columns.

If i am adding a new object to the TreeList and begin typing in the cell with the EditorTemplate the cell is losing focus more or less on keystroke. (If you're typing quite fast it might be 2 or 3 characters before it loses focus.)

If i am editing an existing object the concerned cell doesn't lose focus.

If i change the binding of the TextBox in the EditorTemplate from "bind-Value" to "Value" it is working but i want to use the two-way-binding of the TextBox.

I have a similar UI with a grid instead of TreeList which is working fine with the TextBox in the EditorTemplate.

I Attached an example project to reproduce the problem.

I tested with google chrome, mozilla firefox and microsoft edge and i had the same problem in alle 3 browsers.

 

best regards

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

I would like to have an event equivalent to the OnRead for the Grid so that I could make custom data operations such as applying custom filtering to the root items. 

---

ADMIN EDIT

In the meantime, loading data on demand only when a node expands can make database queries happen less often and return less data: https://docs.telerik.com/blazor-ui/components/treelist/data-binding/load-on-demand

---

Hello,

Please add support for sorting and filtering when the TreeList is data bound to a List<Dictionary> or ExpandoObject. Currently these data operations throw an exception System.ArgumentException: Invalid property or field

TreeList REPL page with Dictionary

TreeList REPL page with ExpandoObject

Need an OnRowDoubleClick event for editing purposes.

I want to show the totals in my hierarchical data

In the TreeList control of Blazor UI suite, I did not see any option to group header for columns. Column group header is an important feature and will certainly enhance the utility of the control multifold.

Below are few samples of column group headers:

 

I want to bind the treelist to dynamic objects like I can the grid: https://github.com/telerik/blazor-ui/tree/master/grid/binding-to-expando-object.

Telerik blazor TreeList required ContextMenu Event on each row.

---

ADMIN EDIT

In the meantime, you can consider using one of the templates of the component (row or cell) to integrate the context menu in. A similar example is also available in this article even if it is for the grid, and this one for the treeview, the same concepts will apply to the treelist. You can also use a button whose click can integrate the context menu if that will fit your UX.

---

I'm using Telerik TreeList. I'm so happy that it supports Drag&Drop. But, if there are too many items on the list, it is really hard to drag an item from the top to the end of the list. The TreeList doesn't scroll the list automatically (Auto Scroll) when I drag an item to the edge of the TreeList.

It would be nice to have the same capabilities for working with TreeList columns as in the ColumnMenu for Grid. Espesially columns chooser. 

Unlike the grid, you don't have an OnRowClick event that will overcome the async limitations you indicate in the docs and support for OnSelect. Since everything I have is async, the binding solution just doesn't do enough if I can't catch the click. Is there an alternative to OnRowClick for the TreeList? If not, why not?

The TreeList should add an event OnDragStatus that would query the app during active dragging to determine if the current drag location is valid or not. If invalid, it could show the invalid drag icon:

This would give better feedback to the user during dragging.

Could you add this as a feature request please?

I have a TreeList, bound to an ObservableCollection data source. When I try to add new children the component stays in Create mode even after I click on the Update button.

I now have a treelist with a few thousand items, but the filtering takes a few seconds, and halfway there is a refresh with partial results.

Now the users are complaining that they do not really know when the treelist is done with filtering.

Is it possible to specify different editor templates for different levels in hierarchical data?

What I am trying to do is to build a hierarchical structure for grouping items. The list of items is specified so, in the grouping hierarchy, I want to select an item as the child element of the lowest grouping level rather than typing the name of the item and resolving if it exists. I thus want for the lowest level, to have a combobox rather than an editbox. The data items presented in the treelist have a property to bind to.

---

ADMIN EDIT

If your models already have flags denoting their level, or otherwise denoting the special need for that particular model, you can use them in the editor template already.

---

Hello,

Here is your code of the example "how to load hierarchical data on demand" with the option FilterMode = "@ TreeListFilterMode.FilterMenu"
As you can see if we click on a node the whole hierarchy disappears. if you remove this option all work fine

 

@* this sample shows how to load hierarchical data on demand and one way of handling no data being returned. Depending on your models and data logic you may have to tweak some checks, review the code comments for details.

*@

<TelerikTreeList Data="@Data"
                 ItemsField="@(nameof(Employee.DirectReports))"
                 HasChildrenField="@(nameof(Employee.HasChildren))"
                 OnExpand="@OnExpandHandler"
                 Pageable="true" Width="550px" Height="400px" FilterMode="@TreeListFilterMode.FilterMenu" >
    <TreeListColumns>
        <TreeListColumn Field="Name" Expandable="true" Width="220px" />
        <TreeListColumn Field="HireDate" Width="120px" />
    </TreeListColumns>
</TelerikTreeList>

@code {
    public List<Employee> Data { get; set; }

    // load on demand through the event
    async Task OnExpandHandler(TreeListExpandEventArgs args)
    {
        Employee item = args.Item as Employee;
        if (item.HasChildren && // it is marked as having children
            (item.DirectReports == null || item.DirectReports.Count == 0) // there are no child items
            )
        {
            // request data
            var children = await GetChildren(item);

            if (children.Count > 0)
            {
                // child items exist - add them to the current item
                item.DirectReports = children;
            }
            else
            {
                // no nested data - hide the expand arrow
                item.HasChildren = false;
            }
        }
    }

    async Task<List<Employee>> GetChildren(Employee itm)
    {
        await Task.Delay(400); // simulate delay. Remove for a real app

        List<Employee> data = new List<Employee>();

        // to showcase an example of when no actual child items are returned
        // we will check for too long nesting chain with this simpe logic
        if (itm.Name.LastIndexOf("Child of") < 15)
        {
            data.Add(new Employee
            {
                Name = "Child of " + itm.Name,
                HasChildren = true
            });
        }

        return await Task.FromResult(data);
    }

    // sample model

    public class Employee
    {
        // hierarchical data collections
        public List<Employee> DirectReports { get; set; }
        public bool HasChildren { get; set; }

        // data fields for display
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }

    // initial data generation

    protected override async Task OnInitializedAsync()
    {
        List<Employee> data = new List<Employee>();
        for (int i = 0; i < 6; i++)
        {
            data.Add(new Employee
            {
                Name = $"root: {i}",
                HireDate = DateTime.Now.AddYears(-i),
                HasChildren = true
            });
        }

        // mark an item as non-expandable (not having children)
        data[1].HasChildren = false;
        data[1].Name += "(not expandable) ";

        Data = data;
    }
}

Currently, the TreeList CheckBox selection exposes an option to select the children if the parents are selected. Please also add support for CheckParents option similar to the one in the TreeView component. This will allow marking the parent as selected if its children are selected.