TreeMap - Unhandled exception kendo.all.min.js 0x800a01b6

[Vlastimír]

Hello, I have a problem with the treemap component in the MVC project, when it displays an exception :

Unhandled exception at line 122, column 18825 in http://localhost:58298/Scripts/kendo/kendo.all.min.js
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'level'

Index:

@(Html.Kendo().TreeMap()
                .Name("treeMap")
                .DataSource(dataSource => dataSource
                    .Read(read => read.Action("FrekvenceCestujicich", "Dashboard"))
                    .Model(m => m.Children("Items"))
                )
                .ValueField("Value")
                .TextField("Name")
                .HtmlAttributes(new { style = "height:600px; font-size: 12px;" })
)

 

Controller : 

public class DashboardController : BaseController
{
    public ActionResult FrekvenceCestujicich()
    {
        List<Zastavky> zastavky = new List<Zastavky>();

        Zastavky mesto = new Zastavky("mesto", 5111856, new List<Zastavky>());
        zastavky.Add(mesto);
        mesto.Items.Add(new Zastavky("Plotní", 166313, null));
        mesto.Items.Add(new Zastavky("Česká", 125917, null));
        mesto.Items.Add(new Zastavky("Celní", 415796, null));
        mesto.Items.Add(new Zastavky("Moravská", 512761, null));
        mesto.Items.Add(new Zastavky("Smetanova", 333111, null));
        mesto.Items.Add(new Zastavky("Náměstí Republiky", 298119, null));
        mesto.Items.Add(new Zastavky("Haškova", 131222, null));
        mesto.Items.Add(new Zastavky("Nerudova", 256771, null));
        mesto.Items.Add(new Zastavky("Dětská nemocnice", 139012, null));
        mesto.Items.Add(new Zastavky("Svatoplukova", 431233, null));
        mesto.Items.Add(new Zastavky("Jana Žižky", 99019, null));
        mesto.Items.Add(new Zastavky("Nová", 76511, null));
        mesto.Items.Add(new Zastavky("Kotlářská", 100988, null));
        mesto.Items.Add(new Zastavky("Mahenova", 188988, null));
        mesto.Items.Add(new Zastavky("U Buku", 36981, null));
        mesto.Items.Add(new Zastavky("Kolmá", 88999, null));
        mesto.Items.Add(new Zastavky("Divadelní", 889231, null));
        mesto.Items.Add(new Zastavky("Koniklecová", 234111, null));
        mesto.Items.Add(new Zastavky("Lesní", 31651, null));
        mesto.Items.Add(new Zastavky("Mrakodrap", 555122, null));

        return Json(zastavky, JsonRequestBehavior.AllowGet);
    }
}

 

Model :

public class Zastavky
{
    public Zastavky(string name, int value, List<Zastavky> items)
    {
        Name = name;
        Value = value;
        Items = items;
    }

    public string Name { get; set; }
    public double Value { get; set; }
    public List<Zastavky> Items { get; set; }
}

 

Included javascripts :

"jquery.min.js"

"kendo.all.min.js",

"kendo.aspnetmvc.min.js"

[Tsvetina]

Hello Vlastimír,

Thank you for sharing the full code. I put it in a test project and it actually showed a TreeMap successfully. I am attaching the test project and a screenshot of the result.
However, I found an older support case of mine where the same error was observed and there were two problems in the code that caused it:

• Having more than one root item. The TreeMap requires that data is in a traditional tree structure, meaning that it can have only one root item.
• Using different data types for the parent and child items. All items in the TreeMap data need to be of the same type.

None of the above two problems can be observed in the data that you are using and it does seem to work without issues on my side. Is it possible that you tried initially to add more than one root items?

Regards,
Tsvetina
Progress Telerik

[Vlastimír]

Hello,

I tried our model in Kendo.MVC.Examples application where treemap works. The initialization is written in the same way as in your application TelerikMvcApp36.

Our application where treemap doesn't work was created as MVC Application and then we add Telerik UI for ASP.NET MVC by the example "https://docs.telerik.com/aspnet-mvc/getting-started/asp-net-mvc-5#add-telerik-ui-for-aspnet-mvc". Unlike application TelerikMVCApp36 we are using jQuery 2.2.4.

I'm sending a statement from the console.

[Tsvetina]

Hi Vlastimír,

The error indicates some problem with the structure of the data, but I cannot tell what it is. Could you try to reproduce the issue in a runnable project, so I can debug it? You can open a new support thread and attach the project there, linking to this forum thread for reference.

If this is not possible, the only thing that I could think of that could be different between our projects and be relevant to the problem is the Kendo UI script references. Please, show me the full list of script references used in your project, so I can check for any problems.

Regards,
Tsvetina
Progress Telerik

[Vlastimír]

Hello,

here is the runnable project, you must restore nuget packages.

https://1drv.ms/f/s!AsLsbLcc3D_xaIeov0LPT5SbwEQ

Thank you for your answer.

[Tsvetina]

Hello Vlastimír,

Thank you for taking the time to prepare a project. When I ran it, the error I saw in the console was actually different:

kendo.all.js:7052 Uncaught TypeError: e.slice is not a function

It indicates that the response returned to the DataSource is not an array. I went to the controller and noticed that the FrekvenceCestujicich method returns only the mesto object instead of the entire list:

    public ActionResult FrekvenceCestujicich()
    {
        List<Zastavky> zastavky = new List<Zastavky>();

        Zastavky mesto = new Zastavky("mesto", 5111856, new List<Zastavky>());
        zastavky.Add(mesto);
        mesto.Items.Add(new Zastavky("Plotní", 166313, null));
        mesto.Items.Add(new Zastavky("Česká", 125917, null));
        mesto.Items.Add(new Zastavky("Celní", 415796, null));
        mesto.Items.Add(new Zastavky("Moravská", 512761, null));
        mesto.Items.Add(new Zastavky("Smetanova", 333111, null));
        mesto.Items.Add(new Zastavky("Náměstí Republiky", 298119, null));
        mesto.Items.Add(new Zastavky("Haškova", 131222, null));
        mesto.Items.Add(new Zastavky("Nerudova", 256771, null));
        mesto.Items.Add(new Zastavky("Dětská nemocnice", 139012, null));
        mesto.Items.Add(new Zastavky("Svatoplukova", 431233, null));
        mesto.Items.Add(new Zastavky("Jana Žižky", 99019, null));
        mesto.Items.Add(new Zastavky("Nová", 76511, null));
        mesto.Items.Add(new Zastavky("Kotlářská", 100988, null));
        mesto.Items.Add(new Zastavky("Mahenova", 188988, null));
        mesto.Items.Add(new Zastavky("U Buku", 36981, null));
        mesto.Items.Add(new Zastavky("Kolmá", 88999, null));
        mesto.Items.Add(new Zastavky("Divadelní", 889231, null));
        mesto.Items.Add(new Zastavky("Koniklecová", 234111, null));
        mesto.Items.Add(new Zastavky("Lesní", 31651, null));
        mesto.Items.Add(new Zastavky("Mrakodrap", 555122, null));

        return Json(mesto, JsonRequestBehavior.AllowGet);
    }
}

When I changed it to:

return Json(zastavky, JsonRequestBehavior.AllowGet);

it started loading the TreeMap as expected. Is this a problem in the example only or you are still getting the other error in your project (Object doesn't support property or method 'level')?

Regards,
Tsvetina
Progress Telerik

[Vlastimír]

Hello,

I apologize for the wrong project. Now it should be ok.

https://1drv.ms/f/s!AsLsbLcc3D_xaIeov0LPT5SbwEQ

[Tsvetina]

Hello Vlastimir,

When I debugged this project, I found that the TreeMap fails to bind because the data passed to it is not the JSON data returned by FrekvenceCestujicich, but the HTML content of the IndexAnaliticky view. I inspected the network request and saw that when the DataSource calls Dashboard/FrekvenceCestujicich, instead of getting the needed response, the request is redirected to IndexAnaliticky view. This is what breaks the TreeMap.

I saw that you have redirecting logic both in the client script and controllers and decided to first let you know about this finding before trying to debug it because you will probably find what causes the redirect faster than me, as you better know the code.

Regards,
Tsvetina
Progress Telerik

[Vlastimír]

Thank you for your answer, the problem is resolved.