I have a treelist with a checkbox for selection.  However, my list is long so I added pagination.  I help the user by pre-selecting a node and I need to display the page that exposes the first selected node.  How do I do this?

|

                        <TelerikTreeList @ref=@TreeListRef
                                         Class="gsi-padding-0"
                                         Data="@UserGroups"
                                         SelectedItems="@SelectedGroups"
                                         IdField="Id"
                                         Pageable=true
                                         PageSize="10"
                                         ParentIdField="ParentId"
                                         SelectionMode="TreeListSelectionMode.Single"
                                         OnRowRender="@HandleRowRender"
                                         SelectedItemsChanged="@((IEnumerable<Gsi.Customer.Models.Group> m) => OnGroupSelected(m))">

                            <TreeListColumns>
                                <TreeListCheckboxColumn SelectAll="false"
                                                        SelectChildren="false"
                                                        CheckBoxOnlySelection="true"
                                                        Width="64px" />

                                <TreeListColumn Field="Name" Title="Name" Expandable="true">
                                    <Template>
                                        @{
                                            var item = context as Gsi.Customer.Models.Group;
                                            <img height="32" width="32" src="@item.ImageUrl" />
                                            @item.Name
                                        }
                                    </Template>
                                </TreeListColumn>
                            </TreeListColumns>
                        </TelerikTreeList>

I copied this example and got it working:

https://www.telerik.com/blazor-ui/documentation/knowledge-base/treelist-expand-nodes-programmatically

Can you tell me how to default my TreeList to have everything expanded when my page loads?  It seems running the SetTreeListExpandedItems after loading my data does not expand everything automatically... which is confusing to me.

            <TelerikCard>
                <CardBody Class="gsi-padding-0">
                    <TelerikButton OnClick="@SetTreeListExpandedItems"
                                   Class="gsi-width-100pct">
                        Expand/Collapse Groups
                    </TelerikButton>
                </CardBody>
            </TelerikCard>

            <TelerikTreeList @ref=TreeListRef
                             Data="@Groups"
                             SelectedItems="@SelectedGroups"
                             IdField="@nameof(Gsi.Customer.Models.Group.Id)"
                             ParentIdField="@nameof(Gsi.Customer.Models.Group.ParentId)"
                             OnStateInit="((TreeListStateEventArgs<Gsi.Customer.Models.Group> args) => OnStateInitHandler(args))"
                             Pageable="false"
                             Sortable="false"
                             SelectionMode="TreeListSelectionMode.Single"
                             FilterMode="@TreeListFilterMode.FilterMenu"
                             SelectedItemsChanged="@((IEnumerable<Gsi.Customer.Models.Group> m) => OnGroupSelected(m))">
                <TreeListColumns>
                    <TreeListColumn Field="Name" Title="Group Filter" Expandable="true">
                        <Template>
                            @{
                                var item = context as Gsi.Customer.Models.Group;
                                <img height="32" width="32" src="@item.ImageUrl" />
                                @item.Name
                            }
                        </Template>
                    </TreeListColumn>
                </TreeListColumns>
            </TelerikTreeList>

I'm using a TelerikTreeList to display a hierarchical data source. This data source has 5+- levels. The first time the TreeList loads, all the items are expanded as we want. When the user changes their search criteria of the data and I reload the data, the TreeList items are collapsed. We would like them to be expanded.

I've tried the TreeListRef.SetStateAsync(expandedState) example, but it only shows the items expanded to the second node. I've verified I have a new object reference to the data source and I've tried an observable collection. I've used the TreeListRef.Rebind() method.

I'm using Telerik.UI.for.Blazor 8.1.1.

Thanks!

below is the code I'm using:

this is my TreeList
<TelerikTreeList @ref="@TreeListRef"
                 Data="@TreeData"
                 ItemsField="@(nameof(Leaf.Children))"
                 HasChildrenField="@(nameof(Leaf.HasChildren))"
                 Width="900px">
    <TreeListColumns>
        <TreeListColumn Expandable="true" Field="Text" Title="Text" />
        <TreeListColumn Field="Code" Title="Code" Width="100px" />
        <TreeListColumn Field="Description" Title="Description" Width="250px" />
    </TreeListColumns>
</TelerikTreeList>

this is my method that loads the data. It is used for the first time as well as all subsequent searches.
    protected async Task SearchOrg()
    {

this is my item class
    public class Leaf
    {
        public List<Leaf> Children { get; set; }
        public Leaf? Parent { get; private set; }
        //public int Id { get; set; }
        //public int? ParentId => Parent?.Id;
        public string? Text { get; set; }
        public string? Code { get; set; }
        public string? Description { get; set; }
        public int Depth { get; private set; }
        public bool HasChildren => Children.Any();

        public Leaf(Leaf? parent)
        {
            this.Parent = parent;
            this.Children = new List<Leaf>();
            if (parent == null)
                this.Depth = 0;
            else
                this.Depth = parent.Depth+1;
        }
    }

We were using the TelerikTreeList with

SelectionMode="TreeListSelectionMode.Single"
SelectedItems="@SelectedItems"

with a ContextMenu. On Rightclick we wanted to open the ContextMenu but also set the row as Selected.

If a row is selected and we rightclick on another one both will be selected. We don;t know exactly why and did not expect two rows to ever be selected after setting the SelectionMode to single.

this is the code we use for selecting on right click.

private async Task OnContextMenu(TreeListRowClickEventArgs args)
{
    SelectedItems = [(TItem)args.Item];
    await InvokeAsync(StateHasChanged);

Do you have any idea how to fix it?

Hello,

we are currently evaluating Telerik for use in a new application. One major hurdle we are facing at the moment are key bindings. The application we are working on contains quite a bit of shortcuts as it aims at power users and key bindings are important for the efficiency of the workflows. The main component we are using is the TreeList, and one basic use case would be to expand and collapse all items in the TreeList with "*"/"-".

I read the forum articles about introducing keybindings to other components by wrapping the component in a div and using onkeydown on the div. That does not work with TreeList however (as I suspect the TreeList captures key events itself). I suspect using JS Interop might be the only option we have, but I just wanted to check if I am missing anything obvious.

Thank you,

Michael

Hello

We are looking for ways to export the UI Blazor TreeList to Excel. I don't see it in Demos and Documentation. Do you have any suggestions on how to accomplish this? Any code examples you can provide?

Thank you!

Min-Jie

Dear Community!

I have the requirement to show a ConfirmDialog before actually saving objects to the database, because of some conditions that need to meet. Nevertheless my TreeList looks like follows and has the later OnCreate event defined:

 <TelerikTreeList Data="@Data"
                  IdField="Server"
                  ParentIdField="PreServer"
                  Pageable="true"
 Height="100%"
 EditMode="@TreeListEditMode.Inline"
                  OnCreate="@CreateServer"
                  OnUpdate="@UpdateServer"
                  OnDelete="@DeleteServer"
                  OnEdit="@(() => EditAction = !EditAction)"
                  OnAdd="@(() => AddAction = !AddAction)"
                  ConfirmDelete="true">
</TelerikTreeList>

My approach was simply to hook into the OnCreate event, place a Dialogs.ConfirmAsync and await the result before continuing. In fact, the confirm dialog shows up, but gets overlayed by a transparent container that has a higher z-index and prevents the confirm dialog to be clicked. Furthermore a loading spinner appears and the app gets stuck. I also tried to add a Task.Delay(1) but it didn't work out.

    async Task CreateServer(TreeListCommandEventArgs args)
    {
        await Task.Delay(1);

        CancelCreate = await Dialogs.ConfirmAsync("Please confirm.", "Confirmation");

        if(CancelCreate){
        ServerViewModel server = (ServerViewModel)args.Item;

        if (server != null)
        {
            server.PreServer = ((ServerViewModel)args.ParentItem)?.Server;
            var result = await _sdService.CreateServer(server);

            if (result)
            {
                NotificationComponent?.Show("Server created!", NotificationTheme.Success);

                await FetchData();
            }
            else
            {
                NotificationComponent?.Show("An error occurred!", NotificationTheme.Error);
            }
        }
        }
    }

Any help would be much appreciated.
Many thanks!

Hello, i was wondering if it is possible to bind and display data in a column from a List/Array of data like this:

public record Item
{
    public string Name { get; set; }
    public List<int> CostsAtMonths  { get; set; } = new();
    public int[] CostsAtMonths { get; set; }
}

Then have it displayed in in a TreeList with a column for each month of the year, where each column points to an item of the list/place in an array like this:

Hi everyone,

I wanted to implement a functionality of Expand/Collapse All. I had the property Expanded in the model which takes the value of true or false. I am changing the value of that property in the model but nothing happens on the interface.

Can you help me please? Can this functionality be implemented?

Thank you,

Cipri

Hi,

I have a treelist where the parentID is a GUID so it is defined as a string.

The child items don't appears.

It seems that string is not supported in ParentID.

Any turn around for that?

Best regards.