KENDO UI TREEMAP DYNAMIC DATA (CUSTOM CLASS OBJECT)

4 posts, 0 answers
  1. Sunil
    Sunil  avatar
    8 posts
    Member since:
    Jul 2015

    Posted 17 Aug 2015 Link to this post

    Hi There,

    I am new to kendo UI, I am struggling to bind dynamic data to treemap. I could not able to find example on forum

     Controller returns:

    Json(treeMap, JsonRequestBehavior.AllowGet);​ object of following class

    public class TreeMapData

    {

     

          public int ParameterID{...}
          public string ParameterName{...}
          public double ParameterWeight{...} 
          //public string ParameterStatus
          public List<TreeMapData> ParameterChilds{..}
          //public string ParameterTooltip{...}
          public bool HasChild { get { return  ParameterChilds.Count > 0?true:false;    }
    }

     

     

    View:

    <script type="text/javascript">
        function createTreeMap() {
            $("#treeMap").kendoTreeMap({
                dataSource: {
                    transport: {
                        read: {
                            url: '@Html.Raw(Url.Action("GetAnalysisData", "Analysis", ""))',
                            dataType: "json"
                        }
                    },
                    schema: {
                        model: {
                            parameterid: "ParameterID",
                            parametername: "ParameterName",
                            parameterwieght: "ParameterWeight",
                            hasChildren: "HasChild",
                            children: "ParameterChilds"
                        }
                    }
                },
                textField: "parametername",
                valueField: "parameterwieght"
            });       
        }

        $(document).ready(function () {
            createTreeMap();
            $(document).bind("kendo:skinChange", createTreeMap);
        });
        
        </script>​

     

    Error : Microsoft JScript runtime error: Object doesn't support property or method 'slice'.

    When i bind status data, it perfectly works fine.

     

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 19 Aug 2015 Link to this post

    Hello Sunil,

    As far as I understand that treeMap, which is returned by the controller is an object of the TreeMapData class. Please note that the DataSource expects  a collection/array of TreeMapData objects to be returned from the server. 

    If so - please modify the logic to return a collection of items instead of single item. 

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Sunil
    Sunil  avatar
    8 posts
    Member since:
    Jul 2015

    Posted 21 Aug 2015 in reply to Boyan Dimitrov Link to this post

    Dimitrov,

     If you could see treemap object contains list of TreeMapData objects(recursive object)

    public class TreeMapData
    {
                public int ParameterID{...}
                public string ParameterName{...}
                public double ParameterWeight{...} 
    ****      public List<TreeMapData> ParameterChilds{..} ****
    }

     

    Simply, list of object will not going to help me, as i want to represent hierarchy of data. 

    So treemap object is hierarchical structure contain list of same Treemap objects.

  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 24 Aug 2015 Link to this post

    Hello Sunil,

     

    I meant that the controller should return a collection of TreeMapData objects to the client-side. 

     

    public ActionResult GetItems()
            {
                List<TreeMapData> result = new List<TreeMapData>();
    .....
              result.Add(treeMap);
     
                return Json(result, JsonRequestBehavior.AllowGet);
    }

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready