question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't render the treenode of Table when lazily loading it's datasource.

See original GitHub issue

Can’t render the treenode of Table when lazily loading it’s datasource.

If the datasource is null or empty, and fetch data in the override method OnInitializedAsync. Then the table can’t render the treenode.

For the example https://ant-design-blazor.gitee.io/zh-CN/components/table#components-table-demo-tree-data, if the code like this

...
<Table DataSource="data" TreeChildren="item=>item.Children">
    <Selection CheckStrictly />
    <Column @bind-Field="@context.Name" />
    <Column @bind-Field="@context.Age" Width="12%"/>
    <Column @bind-Field="@context.Address" Width="30%"/>
</Table>
...
@code{
  Data[] data = null;
  protected override async Task OnInitializedAsync()
  {
    await Task.Delay(1);
    data = ....; 
    // or data = await something();
    await base.OnInitializedAsync();
  }
}

I think this code https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/table/Table.razor.cs#L198 should be:

            if (TreeChildren != null)
            {
                _treeMode = true;
            }

When I set TreeChildren delegate it should be tree table, instead of whether the children have data.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
kateuszcommented, Dec 15, 2020

I’ve discovered similar issue, all repro steps are done in OnInitializedAsync:

  1. Add rows without children to table
  2. Make async operation
  3. Add children to existing rows Result: The table shows rows without tree nodes

The view:

<Table DataSource="Nodes" TreeChildren="item=>item.Children">
    <Selection Disabled />
    <Column @bind-Field="@context.Name" />
    <ActionColumn Title="Action">
    </ActionColumn>
</Table>

Code behind:

public class Node
    {
        public Node(string name)
        {
            Name = name;
            Children = new List<Node>();
        }

        public string Name { get; set; }
        public List<Node> Children { get; set; }
    }

    public partial class TableTest
    {
        private List<Node> Nodes { get; set; } = new List<Node>();

        protected override async Task OnInitializedAsync()
        {
            var nodeNames = new List<string> { "First", "Second" };

            foreach (var nodeName in nodeNames) 
                Nodes.Add(new Node(nodeName));

            // represents some async operation, eg. get data from API
            await Task.Delay(100);

            // nothing happened after this line
            foreach (var node in Nodes) 
                node.Children.Add(new Node("test"));
        }
    }
0reactions
ElderJamescommented, Jan 10, 2021

目前不初始化的话,是识别不了是children。需要指定children的话请另外创建一个issue。

Read more comments on GitHub >

github_iconTop Results From Across the Web

How To Handle Async Data Loading, Lazy Loading, and ...
You'll load data using an asynchronous function that simulates a request to an external data source. First, create a component called ...
Read more >
Lazy load in Kendo UI treeview with caching
Here's how to create hybrid data sources that work with the localData array if the items are available, and otherwise perform requests to ......
Read more >
JavaScript Data Grid: SSRM Tree Data
It is expected that the data set will be too large to send over the network, hence the SSRM is used to lazy-load...
Read more >
Lazy Loading of Related Data - EF Core
The simplest way to use lazy-loading is by installing the Microsoft.EntityFrameworkCore.Proxies package and enabling it with a call to ...
Read more >
DxTreeView Class | Blazor
The DevExpress TreeView component for Blazor ( <DxTreeView> ) displays hierarchical data structures within a tree-like UI.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found