Hi all,

I've been observing a strange behavior and cannot seem to find out what causes it. This is primarily to collect some general ideas and learn about principles that I may have missed. I hate to say it but the fact I'm posting it here already suggests that Telerik Blazor UI might be involved, even if it is only by me using it wrong. Before I switched (from Bootstrap UI) to Telerik's Blazor UI, the solution operated more swiftly but was optically inconsistent if not outright ugly. Using Telerik Blazor UI introduced the desired consistency and working with the components is mostly a breeze. I don't regret my choice at all, and will do whatever is needed to keep it part of the solution.

For more context: this is about a multi-layered Blazor app (ASP.NET Core 8) using Telerik's Blazor UI to give users CRUD operations on medical case data. It is supposed to show data from an Oracle relational database with Entity Framework (EF Core 8). It's a data-first approach so I have built entity classes representing each table (about 30 tables in total now) and configured their relations mostly manually. But that's not actually the point. It's just to describe why I can't just paste a small code snippet here. It's a medical application so I'm legally unable to paste code 1:1 from my solution, and it's tons of code by now. Hope the description I'm giving below is enough to put you in the frame.

There are multiple Razor pages and components, some with more and some with less complexity:

• entry pages where users select a quarter and doctor's office
• next page reveals the cases that need work
• selecting a case will go to the editor Blazor page which:
  • shows case basic data such as patient, insurance, summary
  • shows relational positional data in up to four separate grids (Telerik Data Grid) which are encapsulated in Razor components again to keep the main page as slim as possible
  • allows CUD operations and validations on relatonal data
  • uses models to do real-time calculations when users are modifying data
  • uses a persistence layer to collect changes and update storage

The editor page (the heaviest piece of the solution) features:

• a Telerik menu bar
• a Telerik breadcrumb bar
• a Telerik dock manager
• up to 8 dock panes, half containing Razor components rendering HTML tables, the other half being Telerik data grids
• some interaction between DockManager and menu bar for menu items to control the visibility and arrangement of panes
• lots of Telerik(MultiColumn)ComboBox, TelerikTextBox, TelerikDatePicker, TelerikNumericTextBox, TelerikMaskedTextBox etc. inside the panes for data representation and editing

All pages use InteractiveServer render mode as that is what I found works best for me. Until now, the software is only running on my dev machine in Visual Studio 2022, and most of the time in debug mode.

IMPORTANT: Let me emphasize that what I am describing here appears exclusively in debug mode as long as VS2022 is attached, and not when the solution is run by dotnet run. It's a p.i.t.a. though to debug with the handbrake engaged, and I'm not sure if the process does not hide a problem even when it runs without a debugger attached. It's just much faster then but that's not proof that whatever issue it is only affects the debug scenario.

The problems begin when I start navigating between the pages. Sometimes it's really fast, sometimes the same thing takes a lot of time. In my perception it might be related to how quickly I navigate but the actual trigger for the behavior is mostly unclear at this time. Heavier pages cause longer delays (and more exceptions along the way), while being loaded as well as while navigating away from them. But it's not consistent enough to point to an overall page or DOM size-related issue.

What struck me is that the debug console gets flooded with errors like these as delays are happening:

Exception thrown: 'Microsoft.JSInterop.JSDisconnectedException' in Microsoft.JSInterop.dll
Exception thrown: 'Microsoft.JSInterop.JSDisconnectedException' in System.Private.CoreLib.dll
Exception thrown: 'Microsoft.JSInterop.JSDisconnectedException' in System.Private.CoreLib.dll
Exception thrown: 'Microsoft.JSInterop.JSDisconnectedException' in Microsoft.AspNetCore.Components.Server.dll

The one from System.Private.CoreLib.dll appears twice most of the time, sometimes only once. A block like this is shown repeatedly up to 90 times in quick succession, in worse cases, sometimes only ten of these blocks appear in the console. But it's always this combination of the same three DLLs being addressed. When this happens, no other exceptions mix in, it's a constant stream of these three / four exceptions. The application is massively slowed down as this happens. Not as much as showing me a waiting indicator and reconnecting in the page though.

What's also interesting is that the user-end of the solution, besides being very slow at times, behaves fully normally. There are no errors or exceptions apparent to the user. To me this looks like the exceptions are silently consumed somewhere without giving further detail. Each occurrence takes some processing time. I can't say where the exceptions are thrown - probably somewhere deep inside the JS layers - but it's really unsettling and I have some doubts about moving this to production unless this is clarified a bit better.

The Edge browser's developer tools show nothing unusual. The JavaScript console there stays error-free, and running a network recording during a page refresh does show that loading takes very long (about 5 out of 10 seconds are spent with no traffic at all), but all HTTP operations have status 101 (switching protocols) or 200 (success). No error indication at all there.

I beg your pardon for being too unspecific where it may count but this is honestly my first Blazor application at all, and it's a monster of a project right away. I'm overwhelmed by the time pressure already and there's no team mates to help out. Random delays are the last thing I need.

So to wrap this up, what I'm looking for is basically guidance like:

• is ServerInteractive (and no prerendering) a preferable mode to use globally?
• do I have to clean up anything? I was hoping the Telerik components would take care of their memory allocations and connections on their own. If that's wrong or not enough, is IDisposable the way to go? What would have to be forcefully disposed?
• are there any typical no-nos about Blazor apps that I might have missed, such as exceeding a hidden limit regarding the amount of HTML elements in the DOM, or having to keep the number of data grids to a minimum? Could two-way bindings be a root cause? (I'm using them a lot)
• I'm using async wherever it makes sense, assuming that's the way to go nowadays. Anthing special about Blazor regarding async?
• sometimes, I need to call StateHasChanged() to ensure the UI is up-to-date. This may indicate I'm missing a cleaner way to achieve the same, however, I couldn't find anything about this yet

Thank you all for reading, and in advance for any clues.

Cheers, have a nice day!

Joe

How do I set the TreeList filter through code?  So, can I put a value in the criteria field from code behind?

                <TelerikTreeList @ref=@TreeListRef
                                 Data="@Groups"
                                 SelectedItems="@SelectedGroups"
                                 IdField="@nameof(Group.Id)"
                                 ParentIdField="@nameof(Group.ParentId)"
                                 OnStateInit="((TreeListStateEventArgs<Group> args) => OnStateInitHandler(args))"
                                 Pageable="true"
                                 PageSize="@GroupPageSize"
                                 Height="100%"
                                 Sortable="false"
                                 SelectionMode="TreeListSelectionMode.Single"
                                 FilterMode="@TreeListFilterMode.FilterMenu"
                                 @bind-Page="@GroupCurrentPage"
                                 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 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!