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

[Winarsanti Laksmitarani]

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

[Vladimir Iliev]

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