Kendo UI treeList calling controller action multiple times on expanding node?

Question

Following is the code/data which is returned as JSON to kendo Tree List :

 var item = new IncomeStatementHierarchyItemModel()
                        {
                            id = GroupId,
                            parentid = Id.Value,
                            HasIndent = 0,
                            Title = drow[2].ToString(),
                            Actual = GetDataRowValueForPSA(dt, drow[2].ToString(), 3, 2),
                            Prior = GetDataRowValueForPSA(dt, drow[2].ToString(), 4, 2),
                            Budget = GetDataRowValueForPSA(dt, drow[2].ToString(), 5, 2),
                            Forecast = GetDataRowValueForPSA(dt, drow[2].ToString(), 6, 2),
                            PriorQuarter = GetDataRowValueForPSA(dt, drow[2].ToString(), 7, 2),
                            PSAClassification = psaClassification,
                            hasChildren = true
                        };

Id and parentId is set to tree properly but after binding the data to tree again controller action gets called for subsequent item.

Transport function is used to create the datasource :

var drillDownDataSource = new kendo.data.TreeListDataSource({
        transport: {
            read: {
                url: urlAction,
                dataType: "json",
                type: "POST",
                async: true,
                cache: true,
                autoBind: true,
                data: function () { 

Answer 1

Because Parent Id does not mean too much for kendo tree here is what you need to do in order to get a kendo tree working in a good and right manner.

1.You will need to have a model that looks like this:

    public class KendoTreeViewItem 
    { 
        //required properties:
        //property names are lower case because I am planning to convert to   
     //javascript array and at that point kendo is looking for lower case   properties.
      public string id { get; set; }
      public bool expanded { get; set; }
      public bool @checked{get; set; }
      public IList<KendoTreeViewItem> Items{get;set;}
      public string text{ get; set; }
      public bool hasChildren{get;set;}
      public bool hasChildren{get;set;} 
       //Add other custom properties         
    }

2.As I mentioned above, ParentId is not too important on kedno tree , but we will use it to construct from a flat list a real tree structure that will be used by kendo tree.

In case if you already have this just skip this step. You can do it using something like that:

 public static class KendoTreeHelpers
    {
        public static List<KendoTreeViewItem> ToKendoTree(this IList<KendoTreeViewItem> flatList)
        {
            Dictionary<long, KendoTreeViewItem> dic = flatList.ToDictionary(n => n.ItemId, n => n);
            var rootNodes = new List<KendoTreeViewItem>();
            foreach (var node in flatList)
            {
                if (String.IsNullOrEmpty(node.ChildrenIds))
                {
                    node.Items = null;
                }
                if (node.ParentId.HasValue)
                {
                    var parent = dic[node.ParentId.Value];
                    node.ParentId = parent.ItemId;
                    parent.Items.Add(node);
                }
                else
                {
                    rootNodes.Add(node);
                }
            }
            return rootNodes;
        }
    }

3.So your method in controller should look like this:

 public ActionResult DisplayTree()
        {
            IList<KendoTreeViewItem> flatList = GetFlatList();//your method to get list.
            IList<KendoTreeViewItem> tree = flatList.ToKendoTree();
            return View(tree);
        }

4.View

@model IList<KendoTreeViewItem>

 <div id="treeview">

                        </div>

<script type="text/javascript">
        jQuery(document).ready(function() {
            $("#treeview").kendoTreeView({
                template: kendo.template($("#treeview-template").html()),
                dataSource: new kendo.data.HierarchicalDataSource({
                    data: @Html.Raw(Json.Encode(Model)),
                    schema: {
                        model: {
                            children: "Items"
                        }
                    }
                }),             

            });
        });

Using this you will obtain what you want, note that behavior that you are describing is a normal behavior for ajax bin ding .