or
01.
namespace
ProofOfConcept.BO
02.
{
03.
public
class
Ticket
04.
{
05.
public
int
ID {
get
;
set
; }
06.
public
int
CategoryID {
get
;
set
; }
07.
public
string
Name {
get
;
set
; }
08.
public
string
Content {
get
;
set
; }
09.
public
DateTime DateSubmitted {
get
;
set
; }
10.
}
11.
12.
public
class
Category
13.
{
14.
public
int
ID {
get
;
set
; }
15.
public
string
Name {
get
;
set
; }
16.
public
List<Ticket> Tickets {
get
;
set
; }
17.
}
18.
}
01.
namespace
ProofOfConcept.JSONModels
02.
{
03.
04.
public
class
Ticket
05.
{
06.
// Key values are encrypted into a string before being sent to the client
07.
public
string
ID {
get
;
set
; }
08.
public
string
CategoryID {
get
;
set
; }
09.
public
string
Name {
get
;
set
; }
10.
public
string
Content {
get
;
set
; }
11.
12.
// I would prefer a DateTime value but I don't know if
13.
// converting the value and displaying it properly is supported
14.
public
string
DateSubmitted {
get
;
set
; }
15.
}
16.
17.
public
class
Category
18.
{
19.
// Key values are encrypted into a string before being sent to the client
20.
public
string
ID {
get
;
set
; }
21.
public
string
Name {
get
;
set
; }
22.
23.
// I read that the property for the nested object(s) should
24.
// be removed from the JSON model -- is this correct?
25.
// public List<Ticket> Tickets { get;set; }
26.
}
27.
28.
}
01.
[
02.
{
03.
"ID"
:
"1"
,
04.
"Name"
:
"CategoryName1"
,
05.
"Tickets"
: [
06.
{
07.
"ID"
:
"10"
,
08.
"Name"
:
"name value"
,
09.
"CategoryID"
:
"1"
,
10.
"Content"
:
"content here"
,
11.
"DateSubmitted"
:
"serialized DateTime here"
12.
},
13.
{
14.
"ID"
:
"11"
,
15.
"Name"
:
"name value"
,
16.
"CategoryID"
:
"1"
,
17.
"Content"
:
"content here"
,
18.
"DateSubmitted"
:
"serialized DateTime here"
19.
},
20.
{
21.
"ID"
:
"12"
,
22.
"Name"
:
"name value"
,
23.
"CategoryID"
:
"1"
,
24.
"Content"
:
"content here"
,
25.
"DateSubmitted"
:
"serialized DateTime here"
26.
}
27.
]
28.
},
// ... Removed for readability
29.
]
01.
$(document).ready(
function
()
02.
{
03.
// Objects are defined individually as I want to create
04.
// a single file with all object definitions so that other
05.
// developers can recycle them.
06.
var
Ticket = kendo.data.Model.define(
07.
{
08.
id:
"ID"
,
09.
fields:
10.
{
11.
ID: { type:
"string"
},
12.
CategoryID: { type:
"string"
},
13.
Name: { type:
"string"
},
14.
Content: { type:
"string"
},
15.
16.
// Is there a Date (or DateTime) type?
17.
DateSubmitted: { type:
"string"
},
18.
hasChildren:
false
19.
}
20.
});
21.
22.
var
Category = kendo.data.Model.define(
23.
{
24.
id:
"ID"
,
25.
fields:
26.
{
27.
ID: { type:
"string"
},
28.
Name: { type:
"string"
},
29.
hasChildren:
true
,
30.
children: Tickets
31.
}
32.
});
33.
34.
// The ID of the Category is passed to the handler
35.
// in this format: Tickets.ashx?CID=2
36.
// If possible, I'd also like to pass the ID of the ticket,
37.
// Tickets.ashx?ID=44 which would return the full Ticket (ie: with Content)
38.
var
Tickets =
39.
{
40.
transport:
41.
{
42.
read:
43.
{
44.
url:
"Tickets.ashx"
,
45.
type:
"GET"
,
46.
dataType:
"json"
,
47.
contentType:
"application/json; charset=utf-8"
48.
}
49.
},
50.
schema:
51.
{
52.
data:
"d"
,
53.
model: Ticket
54.
}
55.
};
56.
57.
58.
var
Categories =
new
kendo.data.HierarchicalDataSource(
59.
{
60.
transport:
61.
{
62.
read:
63.
{
64.
url:
"Categories.ashx"
,
65.
type:
"GET"
,
66.
dataType:
"json"
,
67.
contentType:
"application/json; charset=utf-8"
68.
}
69.
},
70.
schema:
71.
{
72.
data:
"d"
,
73.
model: Category
74.
}
75.
});
76.
77.
78.
var
viewModel = kendo.observableHierarchy(
79.
{
80.
Categories: Categories
81.
});
82.
83.
kendo.bind($(
"#divCategory"
), viewModel);
84.
85.
});
01.
<
section
>
02.
03.
<
div
id
=
"divCategory"
data-template
=
"category-template"
data-bind
=
"source: Categories"
>
04.
<
ul
data-template
=
"ticket-template"
data-bind
=
"source: Tickets"
id
=
"divTicket"
>
05.
</
ul
>
06.
</
div
>
07.
08.
<
script
id
=
"category-template"
type
=
"text/x-kendo-template"
>
09.
<
h2
data-bind
=
"text: Name"
></
h2
>
10.
</
script
>
11.
12.
<
script
id
=
"ticket-template"
type
=
"text/x-kendo-template"
>
13.
<
li
>
14.
<
a
data-bind
=
"attr: { href: ID }"
>
15.
<
span
data-bind
=
"text: Name"
></
span
>
16.
</
a
>
17.
<
span
data-bind
=
"text: DateSubmitted"
></
span
>
18.
</
li
>
19.
</
script
>
20.
21.
</
section
>
[HttpPost]
ActionResult BrowseTeeTimes(string club FormCollection formData)
// var dataseries1 = {"Id":4,"Legend":"Label","Description":"Description","DataSeries":{"Data":[{"X":"22","Y":[26000.0]},{"X":"79","Y":[24000.0]},{"X":"70","Y":[23400.0]},{"X":"34","Y":[22500.0]},{"X":"29","Y":[22050.0]},{"X":"10","Y":[21666.666666666668]},{"X":"42","Y":[20200.0]},{"X":"32","Y":[19500.0]},{"X":"59","Y":[19000.0]},{"X":"23","Y":[19000.0]},{"X":"80","Y":[18888.888888888891]},{"X":"19","Y":[18750.0]},{"X":"21","Y":[17399.909677419353]},{"X":"40","Y":[16227.272727272728]},{"X":"99","Y":[16028.571428571429]},{"X":"50","Y":[15000.0]},{"X":"11","Y":[14833.333333333334]},{"X":"60","Y":[14272.727272727272]},{"X":"61","Y":[13000.0]},{"X":"89","Y":[13000.0]},{"X":"82","Y":[12611.952380952382]},{"X":"33","Y":[12000.0]}]}};
var
dataseries1 =
new
kendo.data.DataSource({
transport: {
read: {
url: "APIURL"
,
dataType:
"json"
,
}
},
schema: { data:
function
(response) {
return
response.DataSeries.Data; } }
});
// var dataseries2 = {"Id":5,"Legend":"Label","Description":"Description","DataSeries":{"Data":[{"X":"22","Y":[2]},{"X":"79","Y":[3]},{"X":"70","Y":[5]},{"X":"34","Y":[2]},{"X":"29","Y":[20]},{"X":"10","Y":[3]},{"X":"42","Y":[5]},{"X":"32","Y":[2]},{"X":"59","Y":[3]},{"X":"23","Y":[1]},{"X":"80","Y":[9]},{"X":"19","Y":[4]},{"X":"21","Y":[155]},{"X":"40","Y":[22]},{"X":"99","Y":[420]},{"X":"50","Y":[10]},{"X":"11","Y":[6]},{"X":"60","Y":[11]},{"X":"61","Y":[1]},{"X":"89","Y":[1]},{"X":"82","Y":[21]},{"X":"33","Y":[1]}]}};
var
dataseries2 =
new
kendo.data.DataSource({
transport: {
read: {
url: "APIURL"
,
dataType:
"json"
,
}
},
schema: { data:
function
(response) {
return
response.DataSeries.Data; } }
});
$(
"#chart"
).kendoChart({
title: { text:
"TITLE"
},
dataSource: dataseries1,
series: [
{ type:
"column"
, field:
"Y[0]"
, name:
"NAME"
, axis:
"LABEL"
, visibleInLegend:
false
},
{ type:
"line"
, name:
"NAME"
, visibleInLegend:
false
, axis:
"LABEL"
, data: [ 2, 3, 5, 2, 20, 3, 5, 2, 3, 1, 9, 4, 155, 22, 420, 10, 6, 11, 1, 1, 21, 1 ] }
],
categoryAxis: { field:
"X"
, title: { text:
"LABEL"
}, axisCrossingValue: [0, 99999999] },
valueAxis: [
{ name:
"LABEL"
, title: { text:
"UNITS"
} },
{ name:
"LABEL"
, title: { text:
"UNITS"
} }
],
tooltip: { visible:
true
}
});
@(Html.Kendo().RadialGauge()
.Name("testRadialGauge")
.Pointer(pointer => pointer
.Value(0)
.Color("Blue")
)
.Scale(scale => scale
.MinorUnit(200)
.StartAngle(-30)
.EndAngle(210)
.Max(5000)
.Labels(GaugeRadialScaleLabels => GaugeRadialScaleLabels
.Visible(true)
).Ranges(ranges =>
{
ranges.Add().From(0).To(800).Color("#c20000");
ranges.Add().From(800).To(1600).Color("#ff7a00");
ranges.Add().From(1600).To(2000).Color("#ffc700");
ranges.Add().From(2000).To(5000).Color("green");
})
)
)
Html.Kendo().Window()
@{
Html.Kendo().Chart<
AccountPerformance
>(Model.Results)
.Name("chartPCT")
.Title("% Return")
.Series(series =>
series.Column(model => model.Metrics.Return)
.Name(Model.ColumnTitle))
.ValueAxis(axis => axis.Numeric())
.CategoryAxis(axis => axis.Date().Categories(model => model.Observation))
.Render();
}
<
div
class
=
"k-chart"
id
=
"chartPCT"
></
div
><
script
>
jQuery(function(){jQuery("#chartPCT").kendoChart({"title":{"text":"% Return"},"series":[{"name":"Month","type":"column","field":"Metrics.Return"}],"categoryAxis":[{"type":"Date","categories":["2013/01/31 00:00:00","2013/02/28 00:00:00","2013/03/31 00:00:00","2013/04/30 00:00:00","2013/05/31 00:00:00"]}],"dataSource":{"schema":{"model":{"fields":{"Granularity":{"type":"number"},"GranularityName":{"editable":false,"type":"string"},"Observation":{"type":"date"},"ObservationDescription":{"type":"string"},"IsTimeSeries":{"type":"boolean"},"Metrics":{"type":"object"},"ObservationDisplay":{"editable":false,"type":"string"}}}},"data":[{"Granularity":0,"GranularityName":"Monthly","Observation":"\/Date(1359619200000)\/","ObservationDescription":null,"IsTimeSeries":true,"Metrics":{"MarketValue":370505.870000,"NetInvested":494.280000,"Return":2.740981,"HasMarketValue":true,"HasNetInvested":true},"ObservationDisplay":"January"},{"Granularity":0,"GranularityName":"Monthly","Observation":"\/Date(1362038400000)\/","ObservationDescription":null,"IsTimeSeries":true,"Metrics":{"MarketValue":373901.670000,"NetInvested":284.740000,"Return":0.839149,"HasMarketValue":true,"HasNetInvested":true},"ObservationDisplay":"February"},{"Granularity":0,"GranularityName":"Monthly","Observation":"\/Date(1364713200000)\/","ObservationDescription":null,"IsTimeSeries":true,"Metrics":{"MarketValue":370930.070000,"NetInvested":0.000000,"Return":-0.794754,"HasMarketValue":true,"HasNetInvested":true},"ObservationDisplay":"March"},{"Granularity":0,"GranularityName":"Monthly","Observation":"\/Date(1367305200000)\/","ObservationDescription":null,"IsTimeSeries":true,"Metrics":{"MarketValue":361961.050000,"NetInvested":0.000000,"Return":-2.417981,"HasMarketValue":true,"HasNetInvested":true},"ObservationDisplay":"April"},{"Granularity":0,"GranularityName":"Monthly","Observation":"\/Date(1369983600000)\/","ObservationDescription":null,"IsTimeSeries":true,"Metrics":{"MarketValue":368352.560000,"NetInvested":0.000000,"Return":1.765800,"HasMarketValue":true,"HasNetInvested":true},"ObservationDisplay":"May"}]}});});
</
script
>
</
div
><
script
>
jQuery(function(){jQuery("#window_Monthly").kendoWindow({"modal":true,"iframe":false,"draggable":true,"pinned":false,"title":"Monthly Performance - Account ","resizable":false,"content":null,"width":680,"height":430,"actions":["Close"]});});
</
script
>