or
01.
define('projectsDataService', ['underscore'],
02.
function(_) {
03.
var projectsDataSource = new kendo.data.DataSource({
04.
transport: {
05.
read: {
06.
url: "api/projects",
07.
dataType: "json"
08.
},
09.
update: {
10.
url: "api/projects",
11.
dataType: "json",
12.
type: 'PUT'
13.
}
14.
},
15.
page: 1,
16.
pageSize: 20,
17.
schema: {
18.
model: {
19.
location: function() {
20.
return this.projectAddress.city + ", " + this.projectAddress.state.abbr;
21.
},
22.
encodedProjectAddress: function () {
23.
//implement Strategy pattern for encoding
24.
var fullAddress = this.projectAddress.streetAddress + ",+" +
25.
this.projectAddress.city + ",+" +
26.
this.projectAddress.state.abbr;
27.
28.
return fullAddress.replace(/ /g, "+");
29.
},
30.
multilineProjectAddress: function() {
31.
var address = [this.projectAddress.streetAddress,
32.
'<
br
/>',
33.
this.location() + ' ' + this.projectAddress.postalCode].join('\n');
34.
35.
return address;
36.
},
37.
created: function() {
38.
return moment(new Date(this.createdAt)).fromNow();
39.
}
40.
}
41.
}
42.
}),
43.
44.
getProjects = function (projectsObservableArray) {
45.
projectsDataSource.fetch(function() {
46.
var dataView = projectsDataSource.view();
47.
var projects = [];
48.
_.each(dataView, function (item) {
49.
50.
projects.push(ko.observable(item));
51.
});
52.
projectsObservableArray(projects);
53.
});
54.
},
55.
56.
saveProjects = function() {
57.
projectsDataSource.sync();
58.
};
59.
60.
return {
61.
getProjects: getProjects,
62.
saveProjects: saveProjects
63.
};
64.
}
65.
);
@(Html.Kendo().Grid(Model.Items as IEnumerable<
Holding
>)
.Name("KendoCGrid")
.Columns(columns =>
{
columns.Bound(e => e.SymbolDescription).Title("Security Name");
columns.Bound(e => e.Symbol).Title("Symbol");
columns.Bound(e => e.SecurityType).Title("Type");
})
.Sortable()
.DataSource(dataSource=>dataSource
.Ajax()
.PageSize(50)
.ServerOperation(false)
)
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width"
/>
<
title
>Redacted</
title
>
<
link
href
=
"/Content/bootstrap.css"
rel
=
"stylesheet"
/>
<
link
href
=
"/Content/site.css"
rel
=
"stylesheet"
/>
<
script
src
=
"/Scripts/jquery-1.9.1.js"
></
script
>
<
script
src
=
"/Scripts/jquery.validate.js"
></
script
>
<
script
src
=
"/Scripts/jquery.validate.unobtrusive.js"
></
script
>
<
script
src
=
"/Scripts/bootstrap.js"
></
script
>
</
head
>
<
body
>
<
link
href
=
"/Assets/css/kendo/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"/Assets/css/kendo/kendo.default.min.css"
rel
=
"stylesheet"
/>
<
script
src
=
"/Assets/js/kendo/kendo.core.min.js"
></
script
>
<
script
src
=
"/Assets/js/kendo/kendo.userevents.min.js"
></
script
>
<
script
src
=
"/Assets/js/kendo/kendo.data.min.js"
></
script
>
<
script
src
=
"/Assets/js/kendo/kendo.treeview.min.js"
></
script
>
<
div
class
=
"container"
>
<
h1
>Batch Reporting</
h1
>
<
div
class
=
"accordion"
id
=
"reports"
>
<
div
class
=
"accordion-group"
>
<
div
class
=
"accordion-heading"
>
<
a
class
=
"accordion-toggle"
data-toggle
=
"collapse"
data-parent
=
"reports"
href
=
"#dataExtract"
>Data Extract</
a
>
</
div
>
<
div
id
=
"dataExtract"
class
=
"accordion-body collapse"
>
<
div
class
=
"accordion-inner"
>
<
form
action
=
"/Report/DataExtract"
method
=
"post"
>
<
div
style
=
"height: 300px; overflow-y: scroll"
>
<
div
id
=
"treeview"
></
div
>
</
div
>
<
div
>
<
br
/>
<
button
class
=
"btn "
type
=
"submit"
>Submit</
button
>
</
div
>
</
form
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
type
=
"text/javascript"
>
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true,
name: "checkedItem[]"
},
dataSource: [
{
"id": 13, "hasChildren": true, "text": "csd", "items": [
{
"id": 25, "hasChildren": true, "text": "School", "items": [
{ "id": 39, "hasChildren": false, "text": "Class 1", "items": null, "expanded": false },
{ "id": 48, "hasChildren": false, "text": "Class 2", "items": null, "expanded": false },
{ "id": 90, "hasChildren": false, "text": "Class 3", "items": null, "expanded": false },
{ "id": 85, "hasChildren": false, "text": "Class 4", "items": null, "expanded": false },], "expanded": false
}], "expanded": true
}]
});
</
script
>
</
body
>
</
html
>
public
ActionResult DataExtract(
string
[] checkedItems)
{
// Do some really important stuff here...
return
RedirectToAction(
"Index"
,
"Home"
);
}