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

9 posts, 0 answers
  1. Vlastimír
    Vlastimír avatar
    5 posts
    Member since:
    Aug 2018

    Posted 22 Oct 2018 Link to this post

    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"

  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 24 Oct 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Vlastimír
    Vlastimír avatar
    5 posts
    Member since:
    Aug 2018

    Posted 29 Oct 2018 in reply to Tsvetina Link to this post

    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.

  4. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 30 Oct 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Vlastimír
    Vlastimír avatar
    5 posts
    Member since:
    Aug 2018

    Posted 08 Nov 2018 in reply to Tsvetina Link to this post

    Hello,

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

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

    Thank you for your answer.

  6. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 08 Nov 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Vlastimír
    Vlastimír avatar
    5 posts
    Member since:
    Aug 2018

    Posted 09 Nov 2018 in reply to Tsvetina Link to this post

    Hello,

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

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

  8. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 09 Nov 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Vlastimír
    Vlastimír avatar
    5 posts
    Member since:
    Aug 2018

    Posted 12 Nov 2018 in reply to Tsvetina Link to this post

    Thank you for your answer, the problem is resolved.
Back to Top