Please add TreeList Drag Drop Feature

Regards

Andrzej

---

ADMIN EDIT

This feature will arrive with the same feature for the grid in the 2.24.0 release in mid-May 2021.

---

Would it be possible to have the ability to create compact TreeList's similar to how we can now in a Grid? Since Size=ThemeConstants.Grid.Size.Small is available a Grid now it seems natural this would be a next step. If we can be provided with a work around for the time being that would be great.

Currently, the DisplayFormat attribute is applied only to the values displayed in the Grid, while the checkbox list filter options remain unaffected by this formatting.

The DisplayFormat attribute should also impact the checkbox list options, providing consistent formatting across the entire Grid.

https://docs.telerik.com/blazor-ui/components/grid/selection/multiple#two-way-binding-of-selecteditems

Click the Preview button to load the example. Notice that the 3rd, 4th, and 5th rows are programmatically selected in the OnInitialized() method. Now, if you hold down the Shift key and click on the 6th row, instead of having the 3rd through 6th rows selected, we get the 1st through 6th row selected.

By design, the Shift + Click shortcut starts the selection from the last clicked row. If no click has taken place, the selection always starts from the first row. How to customize this?

For reference in Angular: https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/SelectionDirective/

If I pass XField parameters with a "null" value, it throws "ArgumentNullException: Value cannot be null. (Parameter 'name')" because it thinks the value is set, but apparently it does check if it's "null" before trying to "GetProperty".

Example, if any of these XField properties are null, it will throw the Exception

<TelerikTreeList Data="@Data"
                 IdField="@IdField"
                 ParentIdField="@ParentIdField"
                 HasChildrenField="@HasChildrenField"
                 ItemsField="@ItemsField">...</TelerikTreeList>

There should be a null check to ignore the use of that property in case it's null, otherwise, my code will need to be something like

@if (HasChildrenField != null && ItemsField != null)
{
    <TelerikTreeList Data="@Data"
                     IdField="@IdField"
                     ParentIdField="@ParentIdField"
                     HasChildrenField="@HasChildrenField"
                     ItemsField="@ItemsField">...</TelerikTreeList>
}
else if (HasChildrenField != null)
{
    <TelerikTreeList Data="@Data"
                     IdField="@IdField"
                     ParentIdField="@ParentIdField"
                     HasChildrenField="@HasChildrenField">...</TelerikTreeList>
}
else if (ItemsField != null)
{
    <TelerikTreeList Data="@Data"
                     IdField="@IdField"
                     ParentIdField="@ParentIdField"
                     ItemsField="@ItemsField">...</TelerikTreeList>
}

else

{

    <TelerikTreeList Data="@Data"
                     IdField="@IdField"
                     ParentIdField="@ParentIdField">...</TelerikTreeList>

}

Which isn't good.

At least "HasChildrenField" and "ItemsField" should have that check because it isn't a required parameter to have property for the TelerikTreeList  to work.

Error Stack

ArgumentNullException: Value cannot be null. (Parameter 'name')

• System.Type.GetProperty(string name, BindingFlags bindingAttr)

• System.Type.GetProperty(string name)

• Telerik.Blazor.Extensions.ReflectionExtensions.GetPropertyValue(object target, string propertyName)

• Telerik.Blazor.Data.TelerikTreeListDataSource<TItem>.CreateTreeListItem(TItem item, IEnumerable<TreeListItem<TItem>> childItems)

• Telerik.Blazor.Data.TelerikTreeListDataSource<TItem>.GetItems(IEnumerable<TItem> data)

• Telerik.Blazor.Data.TelerikTreeListDataSource<TItem>.BuildTree(IEnumerable<TItem> sourceData)

• Telerik.Blazor.Data.TelerikTreeListDataSource<TItem>.InitData(IEnumerable<TItem> sourceData)

• Telerik.Blazor.Data.TelerikTreeListDataSource<TItem>.ProcessData(IEnumerable data)

• Telerik.Blazor.Components.Common.DataBoundComponent<TItem>.ProcessDataInternal()

• Telerik.Blazor.Components.Common.DataBoundComponent<TItem>.OnParametersSetAsync()

• Telerik.Blazor.Components.TelerikTreeList<TItem>.<>n__0()

• Telerik.Blazor.Components.TelerikTreeList<TItem>.OnParametersSetAsync()

• Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)

• Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

• Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception)

• Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToPendingTasks(Task task)

• Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)

• Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(ref DiffContext diffContext, int frameIndex)

• Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(ref DiffContext diffContext, int frameIndex)

• Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(ref DiffContext diffContext, int newFrameIndex)

• Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(ref DiffContext diffContext, int oldStartIndex, int oldEndIndexExcl, int newStartIndex, int newEndIndexExcl)

• Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, int componentId, ArrayRange<RenderTreeFrame> oldTree, ArrayRange<RenderTreeFrame> newTree)

• Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)

• Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)

• Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

• Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception)

• Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

• Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessPendingRender()

• Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToRenderQueue(int componentId, RenderFragment renderFragment)

• Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged()

• Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()

• Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

• Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception)

• Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToPendingTasks(Task task)

• Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)

• Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderRootComponentAsync(int componentId, ParameterView initialParameters)

• Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.CreateInitialRenderAsync(Type componentType, ParameterView initialParameters)

• Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.RenderComponentAsync(Type componentType, ParameterView initialParameters)

• Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext+<>c__11<TResult>+<<InvokeAsync>b__11_0>d.MoveNext()

• Microsoft.AspNetCore.Mvc.ViewFeatures.StaticComponentRenderer.PrerenderComponentAsync(ParameterView parameters, HttpContext httpContext, Type componentType)

• Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.PrerenderedServerComponentAsync(HttpContext context, ServerComponentInvocationSequence invocationId, Type type, ParameterView parametersCollection)

• Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.RenderComponentAsync(ViewContext viewContext, Type componentType, RenderMode renderMode, object parameters)

• Microsoft.AspNetCore.Mvc.TagHelpers.ComponentTagHelper.ProcessAsync(TagHelperContext context, TagHelperOutput output)

• Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperRunner.<RunAsync>g__Awaited|0_0(Task task, TagHelperExecutionContext executionContext, int i, int count)

Hello,

The scenario is:

1. Some filters are applied in OnStateInit
2. The user clears the filters from the Clear button in the filter menu.
3. The user opens the filter menu again and the checkboxes and textboxes look like the filters are still applied.

Test page: https://blazorrepl.telerik.com/cmasmAvk52l6Xckn02

This is a regression that occurred in version 3.2.0.

All of the above applies to the Grid component as well.

Columns, which are added to the TreeList after the initial load, are not resizable.

I'm working on TreeList. Some of my columns will be rendered after the initial loading. I checked the code, seems you just set up column render right after the first time TreeList Header rendered. Mean the columns that will be rendered after the first-render time will not be resizable.

The code below compiles and doesn't give any browser errors when run, but when you collapse a row, all data is collapsed and you can't expand it again.

If you change the line that generates the data to use a List instead of IEnumerable it will work as expected.

REPRODUCIBLE

<TelerikTreeList Data=Data
                 IdField="@nameof(Record.Id)"
                 ParentIdField="@nameof(Record.ParentId)"
                 Height="100%">
    <TreeListColumns>
        <TreeListCheckboxColumn CheckBoxOnlySelection="true" />
        <TreeListColumn Field="@nameof(Record.Text)" Title="" Expandable="true" />
        <TreeListColumn Field="@nameof(Record.Id)" Title="ID" />
        <TreeListColumn Field="@nameof(Record.ParentId)" Title="PARENT" />
    </TreeListColumns>
</TelerikTreeList>
@code {
    protected IEnumerable<Record> Data = new List<Record>();

    protected override void OnInitialized()
    {
        Data = Enumerable.Range(1, 10).Select(i => new Record(i));
    }

    public class Record
    {
        public Record(int i)
        {
            Id = i;
            if (i % 5 == 1)
                ParentId = null;
            else
                ParentId = (i - ((i - 1) % 5));
            Text = "Item " + i;
        }
        public long Id { get; set; }
        public long? ParentId { get; set; }
        public string Text { get; set; }
    }
} 

WORKAROUND

<TelerikTreeList Data=Data
                 IdField="@nameof(Record.Id)"
                 ParentIdField="@nameof(Record.ParentId)"
                 Height="100%">
    <TreeListColumns>
        <TreeListCheckboxColumn CheckBoxOnlySelection="true" />
        <TreeListColumn Field="@nameof(Record.Text)" Title="" Expandable="true" />
        <TreeListColumn Field="@nameof(Record.Id)" Title="ID" />
        <TreeListColumn Field="@nameof(Record.ParentId)" Title="PARENT" />
    </TreeListColumns>
</TelerikTreeList>
@code {
    protected List<Record> Data = new List<Record>();

    protected override void OnInitialized()
    {
        Data = Enumerable.Range(1, 10).Select(i => new Record(i)).ToList();
    }

    public class Record
    {
        public Record(int i)
        {
            Id = i;
            if (i % 5 == 1)
                ParentId = null;
            else
                ParentId = (i - ((i - 1) % 5));
            Text = "Item " + i;
        }
        public long Id { get; set; }
        public long? ParentId { get; set; }
        public string Text { get; set; }
    }
} 

I'm experiencing a flickering in the TreeList InCell Editing demo here: https://demos.telerik.com/blazor-ui/treelist/editing-incell

Steps to reproduce:

1. Click on "Mountain Bikes"

2. Click on "Road Bikes"

3. Click on "Touring Bikes"

It can actually be reproduced by clicking on any three editable cells.

Any ideas?

Thank you.

I am overriding the built-in Add command and setting an InsertedItem through the TreeList state. However, it looks like the the built-in validation is invoked twice and two validation Tooltips are displayed for the field.

I am using TreeList and a custom template on a column to display user avatar. I also need to sort and filter on this column. However when combine all of these features (sort and filter) on a template column, it doesn't work. There are 2 scenarios:

- When enable sort, the filtering works

- When disable sort, the filtering doesnt work

Is there any work around solution for this? I am using UI for Blazor 3.0.1

From what I can see, currently the only way to set the expanded items for a TreeList is through the state.

The main problem is that the state doesn't fire the OnExpand event, meaning that if you have a server loaded tree you need to make sure to load the data before each item is expanded. It also allows for duplicates in the 'ExpandedItems' if you don't check for duplicates before adding to it.

The TreeView has an 'ExpandedItems' parameter that can be bound which is a bit nicer than using the state, but from my quick test this also doesn't fire the OnExpand event.

My request is for one of the following to be added:

1. Similar to how you can set the 'HasChildrenField' or 'ItemsField' on the TreeList, allow a 'IsExpandedField' value to be bound (Should fire the OnExpand when changed if possible). This would be the simplest way allow bindable control over the expansion of items while also making it so we don't have to manage duplicates in the 'ExpandedItems' collection.
   
2. Expose a method to expand/unexpand rows. This would be different to manually changing the state as it would also fire the OnExpand event for each row expanded.
   
3. Similar to the TreeView, allow an 'ExpandedItems' to be bound. Preferably this would also fire the OnExpand event.

Not sure if this is a bug or missing feature, but when a user is actively doing drag and drop in the TreeList, the drag and drop should cancel as soon as they press 'Esc', just like in most apps. This is pretty standard behavior. Currently, pressing 'Esc' during drag and drop does not do anything.

If this is not a bug, could you please add this as a feature request?