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

2 posts, 1 answers
  1. Winarsanti Laksmitarani
    Winarsanti  Laksmitarani avatar
    3 posts
    Member since:
    Aug 2008

    Posted 20 Nov 2014 Link to this post

    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 :
    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")))

    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
    02.public ActionResult History(int id)
    04.    IList<ReservationHistory> histories = _reservationService.GetHistoryFor(id).DataList;
    05.    IList<ReservationHistoryViewModel> viewModels = histories.ToModel<ReservationHistory, ReservationHistoryViewModel>();
    07.    return Json(viewModels, JsonRequestBehavior.AllowGet);
    10.public class ReservationHistoryViewModel
    12.    public int Id { get; set; }
    13.    public int ReservationId { get; set; }
    14.    public string Description { get; set; }

    any suggestion to fix this? Thanks
  2. Answer
    Vladimir Iliev
    Vladimir Iliev avatar
    2190 posts

    Posted 25 Nov 2014 Link to this post

    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:

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

    Vladimir Iliev

    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.

Back to Top