or
<
div
data-role
=
"grid"
data-sortable
=
"true"
data-editable
=
"true"
data-columns
=
"source: myColumns"
data-bind
=
"source: entities"
data-row-template
=
"rowTemplate"
></
div
>
var
event_datasource =
new
kendo.data.DataSource({
transport: {
read: {
url:
"/event/datawidget"
,
dataType:
"json"
,
type:
"POST"
},
parameterMap:
function
(data) {
return
kendo.stringify(data);
}
},
schema: {
data:
"data"
,
total:
"total"
,
model: {
id:
"event_id"
,
fields: {
event_id: { type:
"number"
},
description: { type:
"string"
}
}
}
},
sort: { field:
"description"
, dir:
"desc"
}
pageSize: 10,
serverFiltering:
true
,
serverPaging:
true
});
var
event_widget = $(
"#event_id"
).kendoComboBox({
dataTextField:
"description"
,
dataValueField:
"event_id"
,
filter:
"contains"
,
minLength: 2,
dataSource: event_datasource,
placeholder:
"Select an event"
,
value:
'99'
,
text:
'Some event'
,
change :
function
(e) {
if
(
this
.value() &&
this
.selectedIndex == -1)
this
.value(
null
);
// clears the selection when an invalid selection was made
},
autoBind: false
}).data(
'kendoComboBox'
);
Html.Kendo().Window()
.Name(windowId)
.Width(680)
.Height(430)
.Title(Model.ChartTitle)
.Visible(false)
.Modal(true)
.Draggable(true)
.Animation(animation => { animation.Open(open => { open.Fade(FadeDirection.In); }); })
01.
function onCommitmentEdit(e) {
02.
console.log("onCommitmentEdit");
03.
//debugger;
04.
var cell = e.container;
05.
06.
var $bigStringEditor = cell.find(".big-string-editor");
07.
08.
if ($bigStringEditor.length == 1) {
09.
$bigStringEditor.keydown(function (ev) {
10.
stop(ev);
11.
});
12.
13.
14.
$bigStringEditor.mousedown(function (ev) {
15.
if (ev.button == 0) {
16.
ev.stopPropagation();
17.
}
18.
});
19.
20.
}
21.
22.
//debugger;
23.
switch (cell[0].cellIndex) {
24.
case PROJECT_COLUMN:
25.
//only enabled if Type = "Separately Budgeted"
26.
if (e.model.CommitmentTypeId != 3) {
27.
this.closeCell();
28.
}
29.
break;
30.
case OFF_TRACK_IMPLICATION_COLUMN:
31.
//only enabled if Execution is "Behind" or "Failing", or Budget= "Over"
32.
if (e.model.CommitmentStatusTypeId != 3 && e.model.CommitmentStatusTypeId != 4 && e.model.BudgetStatusTypeId != 1) {
33.
this.closeCell();
34.
}
35.
break;
36.
case DEPARTMENTS_INVOLVED_COLUMN:
37.
//only enabled if Cross Department = True
38.
if (!e.model.CrossDepartment) {
39.
this.closeCell();
40.
}
41.
break;
42.
case CANCEL_OK_COLUMN:
43.
//only enabled if Execution is "Cancelled"
44.
if (e.model.CommitmentStatusTypeId != 6) {
45.
this.closeCell();
46.
}
47.
break;
48.
49.
}
50.
e.model.SubGroupId = getSubGroupIdVal();
51.
e.model.DashboardId = getDashBoardIdVal();
52.
53.
}
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
>