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.

The TreeList renders its initial items expanded by default. However, if the Data collection is replaced, the new items will collapse.

The issue appears only when clearing the collection (or creating a new empty collection) and then adding the new items in it. If you create a new collection reference based on the current collection of items, there is no problem and the new items appear expended.

Reproduction: https://blazorrepl.telerik.com/wJEbcXvb207dv5vU11.

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)

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.

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.

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/

I use Guids to identify data in my application. It is a lot more reliable than using integers; however, it appears as if the TreeList does not support the use of Guids for the Id and ParentId fields when building the list's view.

---

ADMIN EDIT

This was not a bug, it was probably a configuration issue, as the scenario works, so this is marked as "declined". See the thread below for a sample.

---