OnDemand loading of Hierarchical data with images

[Anamika]

Hello,

we have Hierarchical DataSource with multilevel and with dynamic images. So ned to load only the parent nodes first and clicking on each node should call back controller method and load children on Onselect event. I am facing the following problem.
1-First i tried to implement a read method like remote datasource binding and loaded the parents nodes , but then it will not display anything.
@(Html.Kendo().TreeView()
    .Name("treeview")
    .HtmlAttributes(new {@class="demo-section" })
    .DataTextField("Text")
    .DataSource(dataSource => dataSource
        .Read(read => read
            .Action("ReadObjects", "TreeView")
        )
    )
 public JsonResult ReadObjects()
        {

            List<TreeViewItemViewModel> result = new List<TreeViewItemViewModel>();
           

           
            return Json(result, JsonRequestBehavior.AllowGet);
        }

2. So i tried the other option to bind and it displays the root level. But how do i load children on select event?
@(
        Html.Kendo().TreeView()
            .Name("treeview")
            //.DataSpriteCssClassField("spriteCssClass")
             .HtmlAttributes(new {@class="demo-section" })
             .Events(events => events
        .Select("onSelect")    
    )
            .BindTo((IEnumerable<TreeViewItemModel>)ViewBag.inlineDefault)
    )

Is there a sample in mvc to refer. Also when i set imageURL it is not showing images.

Thanks

Anamika

[Alex Gyoshev]

Hello Anamika,

See the TreeView example about remote data binding. In the controller code, you can specify an additional field for the imageUrl data.

Regards,
Alex Gyoshev
Telerik

 

 

[Anamika]

Hello,

As i mentioned i already tried remote binding, but the treeview does not Show hierarchial data. When i click on a parent node then ReadObjects will not get invoked.
@(Html.Kendo().TreeView()
    .Name("treeview")
    .HtmlAttributes(new {@class="demo-section" })
    .DataTextField("Text")
    .DataSource(dataSource => dataSource
        .Read(read => read
            .Action("ReadObjects", "TreeView")
        )
    )
 public JsonResult ReadObjects()
        {

            List<TreeViewItemViewModel> result = new List<TreeViewItemViewModel>();
           

           
            return Json(result, JsonRequestBehavior.AllowGet);
}
My readObject method looks like this
public JsonResult ReadObjects(string Id)
{

List<TreeViewItemModel> result = new List<TreeViewItemModel>();
//i read parent data when id is null from database and populate result and when id is not null read all children where parntid =id
return Json(inlineDefault, JsonRequestBehavior.AllowGet);
}

But readObject gets called only firsttime and loads parent and next time onwards when i click ona  node it will never invoke readobject again, even if HasChildren is true

Anamika

      

[Alex Gyoshev]

Hello Anamika,

The example shows how to use the remote binding to show hierarchical data. If you need assistance with implementing the same approach in your application, please provide a runnable sample that we can adjust to fit your needs.

Regards,
Alex Gyoshev
Telerik

 

 

[Anamika]

Hello,

Attached the Controller and view code. I have taken the sample remote_data classes aand modified to return IQueryable list of TreeViewItemModel. The Employee method gets invoked first time with Id null. And Show furniture and decor but without expand Icon and when i click on then Employee will not get called again.

I am adding dummy data here just that i cnanot supply my table , in original code i read table to get all parent node first when id is null and Display. Next time when a parent node is clicked i should get Employee called with parent node id and should load children, which never happens.

Anamika

[Alex Gyoshev]

Hello Anamika,

In order for this to work, you need to serialize objects with specific field names -- this is why the original sample uses anonymous objects. Also, fetching of multiple TreeView levels is not supported at this time.

            var employees = new List<object>
            {
                new {
                    id = "Furniture",
                    text = "Furniture",
                    hasChildren = true
                },
                new {
                    id = "Decor",
                    text = "Decor",
                    hasChildren = true
                }
            };

            return Json(employees.AsQueryable(), JsonRequestBehavior.AllowGet);

 

Regards,
Alex Gyoshev
Telerik

 

 

[Anamika]

So if i have multiple treeview Levels i cannot have ondemand loading? In this case i should load all Levels at once? Or it is not at all possible to Display multiple Level data

[Alex Gyoshev]

Hello Anamika,

Yes, the TreeView supports either loding of all levels at once, or a level-by-level loading. Loading multiple levels in a batch is not supported.

Regards,
Alex Gyoshev
Telerik

 

 

[Mark]

I'm trying to achieve loading the TreeView nodes on demand but I do not see a working example using a hierarchical datasource in the link provided? http://demos.telerik.com/aspnet-mvc/treeview/remote-data-binding

[Mark]

Never mind...  I was being a douche. :)