Hi,
I use the TreeView with ASP.NET MVC wrapper and I need to optimize the loading time with a multilevel data fetching. We need to display a product and service catalog (UNSPSC, 4 level) with more than 20.000 nodes. The remote binding and on-demand data fetching works like a charm, but we need to implement a search function. Our idea is that the whole catalog can be accessed through the treeview, but when the user enters a keyword, the treeview expands to the matching nodes and highlightes them. This means that the treeview might need to expand more than 100 nodes, which results more than 100 http requests. The configuration code right now:
Our 'SearchCatalogItems' controller action returns the JSON serialized hierarchical catalog data which has to be displayed, but the HierarchicalDataSource can't process this when remote binding is used. An example result of the 'SearchCatalogItems' action result: (Notice that the Mid #2 node has children but it's not expanded.)
I could initialize a new HierarchicalDataSource from the search results without remote binding, and that could build the tree from this, but I still need the remote binding after the search, because we just downloaded the minimum part of the tree to show and highlight the results and the user might want to explore the catalog from there. I hope my problem is clear.
Is there any way to solve this with the support of the api? Can you give me an idea which is the best way to solve this problem?
Thanks,
Loránd Biró
I use the TreeView with ASP.NET MVC wrapper and I need to optimize the loading time with a multilevel data fetching. We need to display a product and service catalog (UNSPSC, 4 level) with more than 20.000 nodes. The remote binding and on-demand data fetching works like a charm, but we need to implement a search function. Our idea is that the whole catalog can be accessed through the treeview, but when the user enters a keyword, the treeview expands to the matching nodes and highlightes them. This means that the treeview might need to expand more than 100 nodes, which results more than 100 http requests. The configuration code right now:
@Html.Label(
"Search"
)
@Html.TextBox(
"catalogSearch"
)
<input id=
"searchCatalogButton"
type=
"button"
value=
"Go"
/>
@(Html.Kendo().TreeView().Name(
"catalogTree"
)
.DataSource(dataSource => dataSource.Read(read => read.Action(
"GetCatalogItems"
,
"Catalog"
))))
[
{
"id"
: 1,
"text"
:
"Top #1"
,
"matching"
:
false
,
"expanded"
:
true
,
"hasChildren"
:
true
,
"items"
: [
{
"id"
: 2,
"text"
:
"Mid #1"
,
"matching"
:
false
,
"expanded"
:
true
,
"hasChildren"
:
true
,
"items"
: [
{
"id"
: 3,
"text"
:
"Bottom #1"
,
"matching"
:
true
,
"expanded"
:
false
,
"hasChildren"
:
false
}
]
},
{
"id"
: 4,
"text"
:
"Mid #2"
,
"matching"
:
false
,
"expanded"
:
false
,
"hasChildren"
:
true
}
]
}
]
Is there any way to solve this with the support of the api? Can you give me an idea which is the best way to solve this problem?
Thanks,
Loránd Biró