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

Kendo TreeView with initial item load its children menu from remote data

1 Answer 271 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Winarsanti Laksmitarani
Top achievements
Rank 1
Winarsanti Laksmitarani asked on 21 Nov 2014, 02:12 AM
I have kendo treeview to show history list, so initially I have 1 item then load its children from remote data.
Here is my razor code :
01.@(Html.Kendo().TreeView()
02.      .Name("tvHistory")
03.      .Animation(animation => animation.Expand(open =>
04.                              {
05.                              open.Expand(ExpandDirection.Vertical);
06.                              open.Fade(FadeDirection.In);
07.                              }))
08.      .Items(treeview => treeview.Add().Text("History").Id(Model.Id.ToString()))
09.      .DataTextField("Description")
10.      .AutoBind(false)
11.      .DataSource(dataSource => dataSource.Read(read => read.Action("History", "Reservation")))
12.)


So technically when this "History" item being clicked it will call datasource read action and load its children items from controller. Yet its produce an error in console instead of calling the controller.

error image

Here is my controller code and the class that I return to client
01.[HttpGet]
02.public ActionResult History(int id)
03.{
04.    IList<ReservationHistory> histories = _reservationService.GetHistoryFor(id).DataList;
05.    IList<ReservationHistoryViewModel> viewModels = histories.ToModel<ReservationHistory, ReservationHistoryViewModel>();
06.     
07.    return Json(viewModels, JsonRequestBehavior.AllowGet);
08.}
09. 
10.public class ReservationHistoryViewModel
11.{
12.    public int Id { get; set; }
13.    public int ReservationId { get; set; }
14.    public string Description { get; set; }
15.}


any suggestion to fix this? Thanks

1 Answer, 1 is accepted

Sort by
0
Accepted
Vladimir Iliev
Telerik team
answered on 25 Nov 2014, 08:08 AM
Hi  Winarsanti,

Currently the TreeView DataSource wrapper doesn't support setting the first level to be static and next levels to be loaded from remote source, however this can be achieved using the "CustomDataSourceBuilder". On the first level the transport "read" operation is a function which returns the static node and next levels are loaded from remote source:

@(Html.Kendo().TreeView()
    .Name("treeview")
    .HtmlAttributes(new { @class = "demo-section" })
    .DataTextField("Name")
    .DataSource(dataSource => dataSource
        .Custom()
        .Transport(t => t.Read("getStaticNode"))
        .Schema(s => s.Model(m => m.HasChildren("hasChildren").Children(c => c.Read(read => read
            .Action("Employees", "TreeView")
        ))))
 
    )
)
 
 
<script>   
    function getStaticNode(e) {
        e.success([{Name: "Dev department", Id: 1, hasChildren:true}]);
    }
</script>


Regards,
Vladimir Iliev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
TreeView
Asked by
Winarsanti Laksmitarani
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or