or
<
div
data-role
=
"pane"
data-layout
=
"side-default"
data-transition
=
"slide"
>
@* Menu: Level 1 *@
<
div
data-role
=
"view"
data-title
=
"Centro Web Panel"
id
=
"side-root"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
header
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
@*
data-source
=
"splitViewCategories"
data-template
=
"categoriesTemplate"
*@>
@* TODO: Get rid of hard coded stuff *@
<
li
><
a
class
=
"km-listview-link"
href
=
"#side-inbox"
data-role
=
"listview-link"
>Todo</
a
></
li
>
<
li
><
a
class
=
"km-listview-link"
href
=
""
data-role
=
"listview-link"
>Drafts</
a
></
li
>
<
li
><
a
class
=
"km-listview-link"
href
=
""
data-role
=
"listview-link"
>Pending</
a
></
li
>
<
li
><
a
class
=
"km-listview-link"
href
=
""
data-role
=
"listview-link"
>Completed</
a
></
li
>
</
ul
>
</
div
>
<
div
data-role
=
"view"
data-title
=
"Todo"
id
=
"side-inbox"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
a
id
=
"back-button"
class
=
"nav-button"
data-align
=
"left"
data-role
=
"backbutton"
>Back</
a
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
header
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
>
<
li
><
a
class
=
"km-listview-link"
href
=
""
data-role
=
"listview-link"
>Cardiology</
a
></
li
>
<
li
><
a
class
=
"km-listview-link"
href
=
""
data-role
=
"listview-link"
>Radiology</
a
></
li
>
<
li
><
a
class
=
"km-listview-link"
href
=
""
data-role
=
"listview-link"
>All Patients</
a
></
li
>
</
ul
>
</
div
>
</
div
> @* --> end of left menu area *@
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: ('<%=Url.Action("GetUserList") %>'),
dataType: "json"
},
{"fclID":3,
"fclName":"TestFacility",
"fclActive":true,
"fclCity":"Mobile",
"stateID":3,
"state":{"country":null,
"stateID":3,
"stateName":"Alaska",
"stateAbbr":"AK",
"ctyID":1}
}
var
fclDataSource =
new
kendo.data.DataSource({
//datasource for grid
batch:
false
,
autosync:
true
,
transport: {
create: { url:
"/DataService/InsertFacility"
,
dataType:
"json"
,
cache:
false
},
read: {
url:
"/DataService/GetFacilities"
,
dataType:
"json"
,
cache:
false
},
update: {
url:
"/DataService/UpdateFacility"
,
dataType:
"json"
,
cache:
false
}
},
schema: {
model: {
id:
"fclID"
,
fields: {
fclName: { type:
"string"
,
validation: { required:
true
}
},
fclCity: { type:
"string"
},
fclActive: { type:
"boolean"
,
defaultValue:
false
},
stateID: { type:
"number"
,
validation: { required:
true
}
}
}
}
},
pageSize: 10
});
$(
'.adminboxlarge'
).append($(
'#admingrid'
).kendoGrid({
dataSource: fclDataSource,
height: 600,
width: 890,
filterable:
true
,
sortable:
true
,
pageable:
true
,
scrollable:
false
,
toolbar: [
{ name:
"create"
, text:
"Add Facility"
}
//button to add new row
],
columns: [
{
field:
"fclName"
,
title:
"Name"
,
editable:
true
,
filterable:
true
//width: 250
}, {
field:
"fclCity"
,
title:
"City"
,
editable:
true
,
filterable:
true
//width: 75
}, {
//field: "state.stateAbbr",
field:
"stateID"
,
template:
"#=state.stateAbbr#"
,
title:
"State"
,
editor: facilityStateEditor,
editable:
true
,
filterable:
true
//width: 75
}, {
command: [
{ name:
"edit"
, text:
""
}
]
//width: 50
}
],
editable: {
mode:
"inline"
,
update:
true
,
// puts the row in edit mode when it is clicked
destroy:
false
,
// does not remove the row when it is deleted, but marks it for deletion
},
edit:
function
() {
curr_container =
this
._editContainer;
//selects the current edit container
//deletes the text from the "Update" and "Cancel" buttons
$(curr_container).find(
"a.k-grid-update"
).text(
""
).append(
'<span class="k-icon k-update"/>'
);
$(curr_container).find(
"a.k-grid-cancel"
).text(
""
).append(
'<span class="k-icon k-cancel"/>'
);
}
})
)
function
facilityStateEditor(container, options) {
//defines facility combobox
$(
'<input data-text-field="stateName" data-value-field="stateID" data-bind="value:'
+ options.field +
'"/>'
)
.appendTo(container)
.kendoDropDownList({
dataSource: fclstateDataSource,
dataTextField:
"stateName"
,
dataValueField:
"stateID"
});
};