This is a migrated thread and some comments may be shown as answers.

Remote binding data source with manual data fetching

2 Answers 209 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Loránd
Top achievements
Rank 1
Loránd asked on 02 Oct 2013, 10:24 AM
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:
@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"))))
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.)
[
   {
      "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
         }
      ]
   }
]
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ó

2 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 04 Oct 2013, 08:47 AM
Hello,

This is not supported by the HierarchicalDataSource and I am afraid that I cannot suggest any way to achieve this when using the MVC wrappers without any additional Ajax calls. It is possible to implement it by using the JavaScript initialization and a custom transport. I created a small jsBin example that demonstrates this scenario.

Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Loránd
Top achievements
Rank 1
answered on 05 Oct 2013, 08:25 PM
Thanks for your help, that solution works great!
Tags
TreeView
Asked by
Loránd
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Loránd
Top achievements
Rank 1
Share this question
or