TreeView works in Firefox, Chrome - Not in IE

2 posts, 1 answers
  1. Bob
    Bob avatar
    24 posts
    Member since:
    Dec 2014

    Posted 29 May 2015 Link to this post

    I have an application that I have been testing mostly in Firefox, but yesterday decided that I should test in IE.

    The versions that I have are:
    Firefox 38.0.1
    Chrome 43.0.2357.81 m (64-bit)
    IE 9.0.8112

    The TreeView is similar to that in Method 2 of "Binding to a flat table", but with a lot more data, that I pass in as a global variable.

    <div id="tree"></div>
    <script>
    //  This is not in the View, but is passed as a Global variable
    var flatData = [
      { id: 1, parent: null, text: "Item 1" },
      { id: 2, parent: null, text: "Item 2" },
      { id: 3, parent: null, text: "Item 3" },
      { id: 4, parent: null, text: "Item 4" },
      { id: 5, parent: 1, text: "Item 1.1" },
      { id: 6, parent: 1, text: "Item 1.2" },
      { id: 7, parent: 1, text: "Item 1.3" },
      { id: 8, parent: 3, text: "Item 3.1" },
      { id: 9, parent: 3, text: "Item 3.2" },
      { id: 10, parent: 5, text: "Item 1.1.1" },
      { id: 11, parent: 5, text: "Item 1.1.2" },
      { id: 12, parent: 5, text: "Item 1.1.3" }
    ];
    //  This is not in the View, but is passed as a Global variable
     
    // tree for visualizing data
    $("#tree").kendoTreeView({
      dataSource: {
        transport: {
          read: function(options) {
            var id = options.data.id || null;
     
            options.success($.grep(flatData, function(x) {
              return x.parent == id;
            }));
          }
        },
        schema: {
          model: {
            id: "id",
            hasChildren: function(x) {
              var id = x.id;
     
              for (var i = 0; i < flatData.length; i++) {
                if (flatData[i].parent == id) {
                  return true;
                }
              }
              return false;
            }
          }
        }
      }
    })
    </script>

    The TreeView looks great in Firefox or Chrome, but in IE, I just get the raw data (flatData) showing as plain text.

    Any ideas would be greatly appreciated. The only option that I DO NOT have is upgrading IE.

    TIA,
    Bob

  2. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 02 Jun 2015 Link to this post

    Hello Bob,

    Your code works on a standalone test page. Please check if you are not hitting some of IE's CSS-related limitations.

    http://stackoverflow.com/questions/9906794/internet-explorers-css-rules-limits/9906889#9906889


    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Untitled</title>
     
     
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <body>
       
      <div id="tree"></div>
    <script>
    //  This is not in the View, but is passed as a Global variable
    var flatData = [
      { id: 1, parent: null, text: "Item 1" },
      { id: 2, parent: null, text: "Item 2" },
      { id: 3, parent: null, text: "Item 3" },
      { id: 4, parent: null, text: "Item 4" },
      { id: 5, parent: 1, text: "Item 1.1" },
      { id: 6, parent: 1, text: "Item 1.2" },
      { id: 7, parent: 1, text: "Item 1.3" },
      { id: 8, parent: 3, text: "Item 3.1" },
      { id: 9, parent: 3, text: "Item 3.2" },
      { id: 10, parent: 5, text: "Item 1.1.1" },
      { id: 11, parent: 5, text: "Item 1.1.2" },
      { id: 12, parent: 5, text: "Item 1.1.3" }
    ];
    //  This is not in the View, but is passed as a Global variable
      
    // tree for visualizing data
    $("#tree").kendoTreeView({
      dataSource: {
        transport: {
          read: function(options) {
            var id = options.data.id || null;
      
            options.success($.grep(flatData, function(x) {
              return x.parent == id;
            }));
          }
        },
        schema: {
          model: {
            id: "id",
            hasChildren: function(x) {
              var id = x.id;
      
              for (var i = 0; i < flatData.length; i++) {
                if (flatData[i].parent == id) {
                  return true;
                }
              }
              return false;
            }
          }
        }
      }
    })
    </script>
    </body>
    </html>


    Regards,
    Dimo
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top