Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Treeview Model with Custom JSON - ASP.NET

6 Answers 1122 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Graham
Top achievements
Rank 1
Graham asked on 05 Jun 2015, 05:24 PM

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>

​

6 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 09 Jun 2015, 11:54 AM
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!
 
0
Graham
Top achievements
Rank 1
answered on 09 Jun 2015, 04:46 PM

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. 

0
Alexander Popov
Telerik team
answered on 11 Jun 2015, 12:30 PM
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!
 
0
Graham
Top achievements
Rank 1
answered on 11 Jun 2015, 01:56 PM

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

 

0
Alexander Popov
Telerik team
answered on 15 Jun 2015, 12:51 PM
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!
 
0
Graham
Top achievements
Rank 1
answered on 15 Jun 2015, 01:15 PM
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.  
Tags
TreeView
Asked by
Graham
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Graham
Top achievements
Rank 1
Share this question
or