OnDemand loading of Hierarchical data with images

8 posts, 0 answers
  1. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 15 Jul 2014 Link to this post

    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
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 17 Jul 2014 Link to this post

    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
     

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 17 Jul 2014 in reply to Alex Gyoshev Link to this post

    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

          
  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 17 Jul 2014 Link to this post

    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
     

    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.

     
  6. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 17 Jul 2014 in reply to Alex Gyoshev Link to this post

    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
  7. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 17 Jul 2014 Link to this post

    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
     

    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.

     
  8. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 17 Jul 2014 in reply to Alex Gyoshev Link to this post

    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
  9. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 17 Jul 2014 Link to this post

    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
     

    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
UI for ASP.NET MVC is VS 2017 Ready