[Solved] Telerik TreeMap Binding to Webservice - infinite loop

[Jeremy]

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

[Daniel]

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

 

 

[Jeremy]

Thank you so much! It worked perfectly.  

I think the key missing part was

,
        model: {
            children: "items"
        }

What a cool tool!