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>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
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.
​