Treeview Model with Custom JSON - ASP.NET

7 posts, 0 answers
  1. Graham
    Graham avatar
    4 posts
    Member since:
    May 2015

    Posted 05 Jun 2015 Link to this post

    So my company is looking into purchasing Kendo UI but first we wish to get something that actually show up.  We are using the trial and the min files.  

    The JSON data is from multiple sql table that give a flat json, I have created a function that modifies the json using the ParentId and the Id of the entities.

    asp.cs file below

     

    public string Results = string.Empty;
    public string JsonData = string.Empty;
     protected void Page_Load(object sender, EventArgs e) {
         var h = new EntityHiearchy(1);
          if (h.Load(2)) { 
              Dictionary<int, Customer> dict = h.Customers.ToDictionary(cust => cust.Id);
              foreach (Customer cust in dict.Values) {
                      if (cust.EntityParentId != 0) {
                          Customer parent = dict[cust.ParentId];
                          parent.items.Add(cust); 
                  }
              }
              Customer root = dict.Values.First(cust => cust.ParentId == 0);
              Results = JsonConvert.SerializeObject(root, new EntityJsonSettings());
              JsonData = string.Format("[{0}]", Results);
          } 
      }
     

     

    This Dictionary converts the children items to be a list and then the list is serialized with all of the objects associated with Customer class.

    the JSON min: [{"Id":1,"Address":"123 Sample Ave. ","Company":"SameComp","PostalCode":"p2k4w2","ProvinceID":2,"CityID":116,"CountryID":1,"Status":true,"ParentId":0},{"Id":2,"Address":"321 Elpmas Street","Company":"SameComp2","PostalCode":"y2n3k4","ProvinceID":8,"CityID":2,"CountryID":1,"Status":true,"ParentId":1},{"Id":3,"Address":"999 Bob Street","Company":"River Corp","PostalCode":"n2g 6m9","ProvinceID":1,"CityID":4,"CountryID":1,"Status":true,"ParentId":1}]

     Once run through the aspx.cs file: 

    [{"Id":1,"Address":"123 Sample Ave.","Company":"SameComp","PostalCode":"p2k4w2","ProvinceID":2,"CityID":116,"CountryID":1,"Status":true,"ParentId":0,"items":[{"Id":2,"Address":"321 Elpmas Street","Company":"SameComp2","PostalCode":"y2n3k4","ProvinceID":8,"CityID":2,"CountryID":1,"Status":true,"ParentId":1},{"Id":3,"Address":"999 Bob Street","Company":"River Corp","PostalCode":"n2g 6m9","ProvinceID":1,"CityID":4,"CountryID":1,"Status":true,"ParentId":1}]}]

    Notice that I have set the Sub items identifier to 'items'. You are all probabbly wondering why so much data, well when you click on a node the other side of the page loads the other data in an editable fashion  Now comes my problem, I have a website that only show blank for this info and the treeview set up oh the aspx page.

    ASPX Page below. 

     

    DOCTYPE html>
     
    <head runat="server">
        <title></title>
        <link href="CSS/MenuStyles.css" type="text/css" rel="stylesheet" />
     
            <script src="Scripts/Kendo/jquery.min.js"></script>
            <script src="Scripts/Kendo/kendo.all.min.js"></script>
            <script src="Scripts/Kendo/angular.min.js"></script>
            <link href="Scripts/Kendo/styles/kendo.common.min.css" rel="stylesheet" />
            <link href="Scripts/Kendo/styles/kendo.dataviz.black.min.css" rel="stylesheet" />
            <link href="Scripts/Kendo/styles/kendo.default.min.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <%="<script type='text/javascript' language='javascript'>var dumb_global_data = " + JsonData + ";</script>" %>
                <div id="example">
                    <div class="demo-section">
                        <div id="treeview"></div>
     
                        <script>
                            $(document).ready(function() {
                                var node = kendo.data.Node.define({
                                    hasChildren: "items",
                                    id: "Id",
                                    children: "items",
     
                                });
                                var data = new kendo.data.HierarchicalDataSource({
                                    datasource: {
                                        transport: {
                                            read: dumb_global_data,
                                            dataType: "json"
                                        },
                                        schema: {
                                            model: node
                                        }
                                    }
                                });
                                $("#treeview").kendoTreeView({
                                    dataSource: data,
                                    dataTextField: "Company",
                                }).data("kendoTreeView");
                            });
                        </script>
                    </div>
                </div>
                <div class="console"></div>
                <style type="text/css">
                    #treeview {
                        float: left;
                        width: 220px;
                        overflow: visible;
                    }
                </style>
            </div>
        </form>
    </body>
    </html>

     

    And the blank page keeps showing up.  With Kendo's API references being lacking for custom JSON from SQL its very hard to figure this out.

    Any suggestions, any help is appreciated? I really would like my company to stay with Kendo.

    <head runat="server">
        <title></title>
        <link href="CSS/MenuStyles.css" type="text/css" rel="stylesheet" />
     
            <script src="Scripts/Kendo/jquery.min.js"></script>
            <script src="Scripts/Kendo/kendo.all.min.js"></script>
            <script src="Scripts/Kendo/angular.min.js"></script>
            <link href="Scripts/Kendo/styles/kendo.common.min.css" rel="stylesheet" />
            <link href="Scripts/Kendo/styles/kendo.dataviz.black.min.css" rel="stylesheet" />
            <link href="Scripts/Kendo/styles/kendo.default.min.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <%="<script type='text/javascript' language='javascript'>var dumb_global_data = " + JsonData + ";</script>" %>
                <div id="example">
                    <div class="demo-section">
                        <div id="treeview"></div>
     
                        <script>
                            $(document).ready(function() {
                                var node = kendo.data.Node.define({
                                    hasChildren: "items",
                                    id: "Id",
                                    children: "items",
                                });
                                var data = new kendo.data.HierarchicalDataSource({
                                    datasource: {
                                        transport: {
                                            read: dumb_global_data,
                                            dataType: "json"
                                        },
                                        schema: {
                                            model: node
                                        }
                                    }
                                });
                                $("#treeview").kendoTreeView({
                                    dataSource: data,
                                    dataTextField: "Company",
                                }).data("kendoTreeView");
                            });
                        </script>
                    </div>
                </div>
                <div class="console"></div>
                <style type="text/css">
                    #treeview {
                        float: left;
                        width: 220px;
                        overflow: visible;
                    }
                    
                </style>
            </div>
        </form>
    </body>
    </html>

    <head runat="server">
        <title></title>
        <link href="CSS/MenuStyles.css" type="text/css" rel="stylesheet" />
     
            <script src="Scripts/Kendo/jquery.min.js"></script>
            <script src="Scripts/Kendo/kendo.all.min.js"></script>
            <script src="Scripts/Kendo/angular.min.js"></script>
            <link href="Scripts/Kendo/styles/kendo.common.min.css" rel="stylesheet" />
            <link href="Scripts/Kendo/styles/kendo.dataviz.black.min.css" rel="stylesheet" />
            <link href="Scripts/Kendo/styles/kendo.default.min.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <%="<script type='text/javascript' language='javascript'>var dumb_global_data = " + JsonData + ";</script>" %>
                <div id="example">
                    <div class="demo-section">
                        <div id="treeview"></div>
     
                        <script>
                            $(document).ready(function() {
                                var node = kendo.data.Node.define({
                                    hasChildren: "items",
                                    id: "Id",
                                    children: "items",
                                });
                                var data = new kendo.data.HierarchicalDataSource({
                                    datasource: {
                                        transport: {
                                            read: dumb_global_data,
                                            dataType: "json"
                                        },
                                        schema: {
                                            model: node
                                        }
                                    }
                                });
                                $("#treeview").kendoTreeView({
                                    dataSource: data,
                                    dataTextField: "Company",
                                }).data("kendoTreeView");
                            });
                        </script>
                    </div>
                </div>
                <div class="console"></div>
                <style type="text/css">
                    #treeview {
                        float: left;
                        width: 220px;
                        overflow: visible;
                    }
                    
                </style>
            </div>
        </form>
    </body>
    </html>

    <head runat="server">
        <title></title>
        <link href="CSS/MenuStyles.css" type="text/css" rel="stylesheet" />
     
            <script src="Scripts/Kendo/jquery.min.js"></script>
            <script src="Scripts/Kendo/kendo.all.min.js"></script>
            <script src="Scripts/Kendo/angular.min.js"></script>
            <link href="Scripts/Kendo/styles/kendo.common.min.css" rel="stylesheet" />
            <link href="Scripts/Kendo/styles/kendo.dataviz.black.min.css" rel="stylesheet" />
            <link href="Scripts/Kendo/styles/kendo.default.min.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <%="<script type='text/javascript' language='javascript'>var dumb_global_data = " + JsonData + ";</script>" %>
                <div id="example">
                    <div class="demo-section">
                        <div id="treeview"></div>
     
                        <script>
                            $(document).ready(function() {
                                var node = kendo.data.Node.define({
                                    hasChildren: "items",
                                    id: "Id",
                                    children: "items",
                                });
                                var data = new kendo.data.HierarchicalDataSource({
                                    datasource: {
                                        transport: {
                                            read: dumb_global_data,
                                            dataType: "json"
                                        },
                                        schema: {
                                            model: node
                                        }
                                    }
                                });
                                $("#treeview").kendoTreeView({
                                    dataSource: data,
                                    dataTextField: "Company",
                                }).data("kendoTreeView");
                            });
                        </script>
                    </div>
                </div>
                <div class="console"></div>
                <style type="text/css">
                    #treeview {
                        float: left;
                        width: 220px;
                        overflow: visible;
                    }
                    
                </style>
            </div>
        </form>
    </body>
    </html>

    <head runat="server">
        <title></title>
        <link href="CSS/MenuStyles.css" type="text/css" rel="stylesheet" />
     
            <script src="Scripts/Kendo/jquery.min.js"></script>
            <script src="Scripts/Kendo/kendo.all.min.js"></script>
            <script src="Scripts/Kendo/angular.min.js"></script>
            <link href="Scripts/Kendo/styles/kendo.common.min.css" rel="stylesheet" />
            <link href="Scripts/Kendo/styles/kendo.dataviz.black.min.css" rel="stylesheet" />
            <link href="Scripts/Kendo/styles/kendo.default.min.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <%="<script type='text/javascript' language='javascript'>var dumb_global_data = " + JsonData + ";</script>" %>
                <div id="example">
                    <div class="demo-section">
                        <div id="treeview"></div>
     
                        <script>
                            $(document).ready(function() {
                                var node = kendo.data.Node.define({
                                    hasChildren: "items",
                                    id: "Id",
                                    children: "items",
                                });
                                var data = new kendo.data.HierarchicalDataSource({
                                    datasource: {
                                        transport: {
                                            read: dumb_global_data,
                                            dataType: "json"
                                        },
                                        schema: {
                                            model: node
                                        }
                                    }
                                });
                                $("#treeview").kendoTreeView({
                                    dataSource: data,
                                    dataTextField: "Company",
                                }).data("kendoTreeView");
                            });
                        </script>
                    </div>
                </div>
                <div class="console"></div>
                <style type="text/css">
                    #treeview {
                        float: left;
                        width: 220px;
                        overflow: visible;
                    }
                    
                </style>
            </div>
        </form>
    </body>
    </html>

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 09 Jun 2015 Link to this post

    Hello Graham,

    Thank you for your interest in Kendo UI.

    Binding hierarchical widgets like the TreeView to flat data is not supported out of the box. You could however, use the workarounds suggested in the documentation.

    Regards,
    Alexander Popov
    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. Graham
    Graham avatar
    4 posts
    Member since:
    May 2015

    Posted 09 Jun 2015 in reply to Alexander Popov Link to this post

    Thanks Alexander,

    but my data is no longer flat thanks to the cs solution that I showed in the above post, Please look at my JSON data and tell me again that its flat. I don't mean to be rude, but I have tried changing my "flat" JSON to hierarchical using JS but it didn't work so I used CS and it works. Here is it formatted properly: 

    [
      {
        "Id": 1,
        "Address": "123 Sample Ave.",
        "Company": "SameComp",
        "PostalCode": "p2k4w2",
        "ProvinceID": 2,
        "CityID": 116,
        "CountryID": 1,
        "Status": true,
        "ParentId": 0,
        "items": [
          {
            "Id": 2,
            "Address": "321 Elpmas Street",
            "Company": "SameComp2",
            "PostalCode": "y2n3k4",
            "ProvinceID": 8,
            "CityID": 2,
            "CountryID": 1,
            "Status": true,
            "ParentId": 1
          },
          {
            "Id": 3,
            "Address": "999 Bob Street",
            "Company": "River Corp",
            "PostalCode": "n2g 6m9",
            "ProvinceID": 1,
            "CityID": 4,
            "CountryID": 1,
            "Status": true,
            "ParentId": 1
          }
        ]
      }
    ]
     

    Now, if there are any suggestions that might take this data and display it in a tree please post. I have tried a lot of things and nothing seems to work. 

  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 11 Jun 2015 Link to this post

    Hello again Graham,

    I apologize for missing something that obvious. I reviewed the code snippets again and noticed another obvious thing I missed - the DataSource options are wrapped inside a "datasource" field: 
    var data = new kendo.data.HierarchicalDataSource({
       datasource: {
            ...
        }
    });
    As a result, the DataSource is initialized with no options, which explains why nothing is shown. Other than that the code seems correct and works as expected (see example).

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Graham
    Graham avatar
    4 posts
    Member since:
    May 2015

    Posted 11 Jun 2015 in reply to Alexander Popov Link to this post

    Hi Alexander

    Thanks for the example, and yes you solution did solve one issue, but I ran into a situation where it would give me a
    "Request Failed [Button Retry]".  Since the JS doesn't access a file or database and just gets passed the data from C# I removed the HierarchicalDataSource all together and it seems to give me the correct tree based solely on the data.  I would like to use the HierarchicalDataSource  in case the C# properties names change, have u had this issue before? 

    Thanks

     

  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 15 Jun 2015 Link to this post

    Hello Graham,

    I am not sure I understand your question very well. Would you please share some code snippets, so that we can get a better understanding of the issue you are dealing with?

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Graham
    Graham avatar
    4 posts
    Member since:
    May 2015

    Posted 15 Jun 2015 in reply to Alexander Popov Link to this post

    Due to the severe lack of useful documentation, I have been told to move on from Kendo UI and Telerik.  Best of luck with everything.  
Back to Top
Kendo UI is VS 2017 Ready