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

Treeview behavior

3 Answers 80 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Think
Top achievements
Rank 1
Think asked on 08 Feb 2013, 04:43 PM
Hi

Output : Json Data -
[{"id":1,"name":"name","hasData":true},{"id":2,"name":"name123","hasData":false}]

I am seeing two nodes name & name123, but when I click on name node I see another set of name and name123 and this keeps goes as I click. Wondering why the tree nodes are getting created for each click on the node arrow. Am I doing something wrong ?

I have the following View, Controller and Scripts as follows.

Index.chtml

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
	<link href="@Url.Content("~/Content/kendo/2012.3.1315/kendo.common.min.css")" rel="stylesheet" type="text/css" />
	<link href="@Url.Content("~/Content/kendo/2012.3.1315/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
	<link href="@Url.Content("~/Content/kendo/2012.3.1315/kendo.default.min.css")" rel="stylesheet" type="text/css" />
	<link href="@Url.Content("~/Content/kendo/2012.3.1315/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />
	<script src="@Url.Content("~/Scripts/kendo/2012.3.1315/jquery.min.js")"></script>
	<script src="@Url.Content("~/Scripts/kendo/2012.3.1315/kendo.all.min.js")"></script>
	<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
</link>

@{
    ViewBag.Title = "Data";
}
 
<h2>@ViewBag.Message</h2>
 
<div id="treeview" class="treeview-back"></div>

<script type="text/javascript">    
    $(document).ready(function () {
      buildTree();      
    });
     
    function buildTree() {
        var homogeneous = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: "Home/RData",
                    dataType: "json"
                }
            },
            schema: {
                model: {
                    id: "id",
                    hasChildren: "hasData"
                }
            }
        });
 
        $("#treeview").kendoTreeView({
            dataSource: homogeneous,
            dataTextField: ["name"]
        });
    }

Controller

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Data";
 
            return View();
        }
 
        public ActionResult About()
        {
            return View();
        }
 
        [HttpGet]
        public JsonResult RData()
        {
            List<TModel> sites = new List<TModel>();
 
            TModel tModel = new TModel{id = 1, name = "name", hasData = true};
 
            sites.Add(tModel);
 
            tModel = new TModel { id = 2, name = "name123", hasData = false};
 
            sites.Add(tModel);
 
            var resources = from e in sites
                            select new TModel()
                            {
                                id = e.id,
                                name = e.name,
                                hasData = e.hasData
                            };
            return Json(resources, JsonRequestBehavior.AllowGet);      
 
        }
    }
 
    public  class TModel
    {
        public int id;
        public string name;
        public bool hasData;
    }


Output : Json Data -
[{"id":1,"name":"name","hasData":true},{"id":2,"name":"name123","hasData":false}]

I am seeing two nodes name & name123, but when I click on name node I see another set of name and name123 and this goes on as I keep clicking. Wondering why the tree nodes are getting created for each click on the node arrow. Any idea about this behavior ?

3 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 12 Feb 2013, 12:32 PM
Hi Think,

 
From the provided information it seems that this behavior is expected with the current logic - in the returned JSON data from the server, the first record has property "hasData" set to true, which makes the TreeView to generate the expand arrow. When you click on the expand arrow the TreeView makes new request to the server that contains the currently expanded node id and expects response that contains the children of the node. Because the second response is equal to the first, on second level of the TreeView is appended the same data. I would suggest to make the following changes to the read Action:

[HttpGet]
public JsonResult RData(int? id)
{
    List<TModel> sites = new List<TModel>() {
        new TModel { id = 1, name = "name1", hasData = true },
        new TModel { id = 3, name = "name123", hasData = false, ParentId = 1},
        new TModel { id = 4, name = "name123", hasData = false, ParentId = 1},
        new TModel { id = 2, name = "name2", hasData = false }
    };
 
    //the model should contain property with parent ID
    var resources = from e in sites
                where (id.HasValue ? e.ParentId == id : e.ParentId == null)
                select new
                {
                    id = e.id,
                    name = e.name,
                    hasData = e.hasData
                };
 
    return Json(resources, JsonRequestBehavior.AllowGet);
}

 Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Think
Top achievements
Rank 1
answered on 12 Feb 2013, 07:33 PM

Vladimir

Thank for your reply. I made the changes suggested by you but still I am not progressing well :).  Initially when the tree is loaded I will make the following call http://localhost:52698/Home/RData/123, which is good. My tree is being built as I expected.

Next I click on Expand arrow on one of the tree node, again http://localhost:52698/Home/RData/123 is being called. I want to write my own onExpand event to build child nodes (which I can do myself). But how can I make the following call not to fire onExpand
http://localhost:52698/Home/RData/123

Thank you
0
Vladimir Iliev
Telerik team
answered on 14 Feb 2013, 04:21 PM
Hi Think,

 
I'm not sure if I understand you correctly but if you need to load the first level of the tree from using remote binding and then on expand of given node to prevent the request - this currently is not supported. You can implement such functionality using custom code - for example set the initial TreeView data using jQuery ajax method and then append the additional nodes locally.

Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TreeView
Asked by
Think
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Think
Top achievements
Rank 1
Share this question
or