|
1 | | -<!-- default badges list --> |
2 | | - |
3 | | -[](https://supportcenter.devexpress.com/ticket/details/T1194802) |
4 | | -[](https://docs.devexpress.com/GeneralInformation/403183) |
5 | | -[](#does-this-example-address-your-development-requirementsobjectives) |
6 | | -<!-- default badges end --> |
7 | | -# Tree View for Blazor - How to load child nodes on demand (lazy loading) |
8 | | - |
9 | | -This example binds our DevExpress Blazor [TreeView](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView) to a data source and uses the [DxTreeViewDataMapping](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeViewDataMapping) component to load child nodes on demand. |
10 | | - |
11 | | - |
12 | | - |
13 | | -## Implementation Steps |
14 | | - |
15 | | -1. Install the [Microsoft.EntityFrameworkCore.Proxies](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.Proxies/) NuGet package and call the `UseLazyLoadingProxies` method to enable [lazy load functionality](https://learn.microsoft.com/en-us/ef/core/querying/related-data/lazy#lazy-loading-with-proxies). |
16 | | - |
17 | | - ```cs |
18 | | - builder.Services.AddDbContextFactory<NorthwindContext>((sp, options) => { |
19 | | - var env = sp.GetRequiredService<IWebHostEnvironment>(); |
20 | | - var dbPath = Path.Combine(env.ContentRootPath, "Northwind.db"); |
21 | | - options |
22 | | - .UseLazyLoadingProxies() |
23 | | - .UseSqlite("Data Source=" + dbPath); |
24 | | - }); |
25 | | - ``` |
26 | | - |
27 | | -2. Set the [DxTreeview.LoadChildNodesOnDemand](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView.LoadChildNodesOnDemand) property to `true` to activate lazy data loading in `DxTreeView`. |
28 | | -
|
29 | | -3. Add a [DxTreeViewDataMapping](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeViewDataMapping) component and use its [HasChildren](https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxTreeViewDataMappingBase.HasChildren) property to indicate whether a node has child nodes. If true, the node displays an expand glyph even if its children are not yet loaded from the data source. |
30 | | -
|
31 | | - ```razor |
32 | | - <DxTreeView Data="@Data" LoadChildNodesOnDemand="true"> |
33 | | - <DataMappings> |
34 | | - <DxTreeViewDataMapping Text="@(nameof(Category.CategoryName))" |
35 | | - Children="@(nameof(Category.Products))" |
36 | | - HasChildren="@(nameof(Category.HasProducts))" > |
37 | | - </DxTreeViewDataMapping> |
38 | | - <DxTreeViewDataMapping Level="1" Text="ProductName"/> |
39 | | - </DataMappings> |
40 | | - </DxTreeView> |
41 | | - ``` |
42 | | - |
43 | | -## Files to Review |
44 | | - |
45 | | -- [Index.razor](CS/Pages/Index.razor) |
46 | | -- [Program.cs](CS/Program.cs) |
47 | | -- [Category.cs](CS/Data/Northwind/Category.cs) |
48 | | - |
49 | | -## Documentation |
50 | | - |
51 | | -- [DxTreeview - Load Child Nodes on Demand](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView?#load-child-nodes-on-demand) |
52 | | -- [Lazy Data Loading](https://learn.microsoft.com/en-us/ef/core/querying/related-data/lazy) |
53 | | -
|
54 | | -## More Examples |
55 | | - |
56 | | -- [Grid for Blazor - How to bind the component to data with Entity Framework Core](https://github.com/DevExpress-Examples/blazor-dxgrid-bind-to-data-with-entity-framework-core) |
57 | | -<!-- feedback --> |
58 | | -## Does this example address your development requirements/objectives? |
59 | | - |
60 | | -[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-treeview-lazy-data-loading&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-treeview-lazy-data-loading&~~~was_helpful=no) |
61 | | -
|
62 | | -(you will be redirected to DevExpress.com to submit your response) |
63 | | -<!-- feedback end --> |
| 1 | +<!-- default badges list --> |
| 2 | + |
| 3 | +[](https://supportcenter.devexpress.com/ticket/details/T1194802) |
| 4 | +[](https://docs.devexpress.com/GeneralInformation/403183) |
| 5 | +[](#does-this-example-address-your-development-requirementsobjectives) |
| 6 | +<!-- default badges end --> |
| 7 | +# Tree View for Blazor - How to load child nodes on demand (lazy loading) |
| 8 | + |
| 9 | +This example binds our DevExpress Blazor [TreeView](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView) to a data source and uses the [DxTreeViewDataMapping](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeViewDataMapping) component to load child nodes on demand. |
| 10 | + |
| 11 | + |
| 12 | + |
| 13 | +## Implementation Steps |
| 14 | + |
| 15 | +1. Install the [Microsoft.EntityFrameworkCore.Proxies](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.Proxies/) NuGet package and call the `UseLazyLoadingProxies` method to enable [lazy load functionality](https://learn.microsoft.com/en-us/ef/core/querying/related-data/lazy#lazy-loading-with-proxies). |
| 16 | + |
| 17 | + ```cs |
| 18 | + builder.Services.AddDbContextFactory<NorthwindContext>((sp, options) => { |
| 19 | + var env = sp.GetRequiredService<IWebHostEnvironment>(); |
| 20 | + var dbPath = Path.Combine(env.ContentRootPath, "Northwind.db"); |
| 21 | + options |
| 22 | + .UseLazyLoadingProxies() |
| 23 | + .UseSqlite("Data Source=" + dbPath); |
| 24 | + }); |
| 25 | + ``` |
| 26 | + |
| 27 | +2. Set the [DxTreeview.LoadChildNodesOnDemand](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView.LoadChildNodesOnDemand) property to `true` to activate lazy data loading in `DxTreeView`. |
| 28 | +
|
| 29 | +3. Add a [DxTreeViewDataMapping](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeViewDataMapping) component and use its [HasChildren](https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxTreeViewDataMappingBase.HasChildren) property to indicate whether a node has child nodes. If true, the node displays an expand glyph even if its children are not yet loaded from the data source. |
| 30 | +
|
| 31 | + ```razor |
| 32 | + <DxTreeView Data="@Data" LoadChildNodesOnDemand="true"> |
| 33 | + <DataMappings> |
| 34 | + <DxTreeViewDataMapping Text="@(nameof(Category.CategoryName))" |
| 35 | + Children="@(nameof(Category.Products))" |
| 36 | + HasChildren="@(nameof(Category.HasProducts))" > |
| 37 | + </DxTreeViewDataMapping> |
| 38 | + <DxTreeViewDataMapping Level="1" Text="ProductName"/> |
| 39 | + </DataMappings> |
| 40 | + </DxTreeView> |
| 41 | + ``` |
| 42 | + |
| 43 | +## Files to Review |
| 44 | + |
| 45 | +- [Index.razor](CS/Pages/Index.razor) |
| 46 | +- [Program.cs](CS/Program.cs) |
| 47 | +- [Category.cs](CS/Data/Northwind/Category.cs) |
| 48 | + |
| 49 | +## Documentation |
| 50 | + |
| 51 | +- [DxTreeview - Load Child Nodes on Demand](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView?#load-child-nodes-on-demand) |
| 52 | +- [Lazy Data Loading](https://learn.microsoft.com/en-us/ef/core/querying/related-data/lazy) |
| 53 | +
|
| 54 | +## More Examples |
| 55 | + |
| 56 | +- [Grid for Blazor - How to bind the component to data with Entity Framework Core](https://github.com/DevExpress-Examples/blazor-dxgrid-bind-to-data-with-entity-framework-core) |
| 57 | +<!-- feedback --> |
| 58 | +## Does this example address your development requirements/objectives? |
| 59 | + |
| 60 | +[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-treeview-lazy-data-loading&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-treeview-lazy-data-loading&~~~was_helpful=no) |
| 61 | +
|
| 62 | +(you will be redirected to DevExpress.com to submit your response) |
| 63 | +<!-- feedback end --> |
0 commit comments