Telerik TreeMap Binding to Webservice - infinite loop

3 posts, 1 answers
  1. Jeremy
    Jeremy avatar
    55 posts
    Member since:
    Nov 2011

    Posted 16 Feb 2015 Link to this post

    I am trying to wire a kendo TreeMap to a webservice. I have set up a
    demo in my project. When I run it, the TreeMap doesn't just evoke it
    once, it goes nuts and evokes in in an infinite loop!

    I'd love to get this control in my app. Please help.






    <div role="gridcell" class="container">
        <div id="treeMap" style="height: 600px; font-size: 12px;"></div>
    </div>
     
    <script>
     
        $(document).ready(function() {
            createTreeMap();
        });
     
        function createTreeMap() {
            $("#treeMap").kendoTreeMap({
                dataSource: dataSource ,
                valueField: "value",
                textField: "name"
            });
        }
     
     
     
    var dataSource = new kendo.data.HierarchicalDataSource({
        schema: {
            data: function (result) {
                return result.d || result;
            },
        },
        transport: {
            read: {
                url: "../WebServices/ItemWebService.asmx/TreeMapA",
                contentType: "application/json; charset=utf-8",
                type: "POST"
            },
            parameterMap: function (data, operation) {
                switch (operation) {
                    case "read":
                        return JSON.stringify({ itemId: -1, SSID: globalValues.ssid })
                        break;
                }
            }
        }
    });
     
    </script>


    Public Class ItemWebService
    Inherits AppWebservice
     
     
    Public Class TreeMapItem
        Public Property name As String
        Public Property value As Decimal
        Public Property items As List(Of TreeMapItem)
     
        Public Sub New()
     
        End Sub
     
        Public Sub New(name As String, value As Decimal)
            _name = name
            _value = value
            '_items = List(Of TreeMapItem)()
        End Sub
     
     
    End Class
     
    <WebMethod()> _
    Public Function TreeMapA(itemId As Integer, SSID As Integer) As List(Of TreeMapItem)
        Try
            Dim retValue As New List(Of TreeMapItem)
     
            retValue.Add(New TreeMapItem("Part A", 89))
            retValue.Add(New TreeMapItem("Part B", 233))
            retValue.Add(New TreeMapItem("Part B", 90))
     
            Return retValue
     
        Catch ex As Exception
            Throw ex
        End Try
    End Function





  2. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 18 Feb 2015 Link to this post

    Hello Jeremy,

    The treemap requires a single root item in order to work correctly so you should return a result similar to the one in the snippet below:
    <WebMethod()> _
    Public Function TreeMapA(itemId As Integer, SSID As Integer) As List(Of TreeMapItem)
        Try
            Dim retValue As New List(Of TreeMapItem)
            Dim items As New List(Of TreeMapItem)
            Dim root As New TreeMapItem() With {.name = "Root Title", .items = items}
            retValue.Add(root)
      
            items.Add(New TreeMapItem("Part A", 89))
            items.Add(New TreeMapItem("Part B", 233))
            items.Add(New TreeMapItem("Part B", 90))
      
            Return retValue
      
        Catch ex As Exception
            Throw ex
        End Try
    End Function

    Also, you should specify the field in the items that should be used to access the children with the schema.model.children option:
    var dataSource = new kendo.data.HierarchicalDataSource({
        schema: {
            data: function (result) {
                return result.d || result;
            },
            model: {
                children: "items"
            }
        },


    Regards,
    Daniel
    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. Jeremy
    Jeremy avatar
    55 posts
    Member since:
    Nov 2011

    Posted 18 Feb 2015 in reply to Daniel Link to this post

    Thank you so much! It worked perfectly.  

    I think the key missing part was

    ,
            model: {
                children: "items"
            }


    What a cool tool!

Back to Top