or
<
link
href
=
"@Url.Content("
~/Content/kendo/2013.3.1119/kendo.bootstrap.min.css")"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"@Url.Content("
~/Content/kendo/2013.3.1119/kendo.common-bootstrap.min.css")"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"@Url.Content("
~/Content/kendo/2013.3.1119/kendo.mobile.all.min.css")"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"@Url.Content("
~/Content/bootstrap/bootstrap.min.css")"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"@Url.Content("
~/Content/bootstrap/bootstrap-theme.min.css")"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"@Url.Content("
~/Content/Site.css")"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
"@Url.Content("
~/Scripts/kendo/2013.3.1119/jquery.min.js")"></
script
>
<
script
src
=
"@Url.Content("
~/Scripts/kendo/2013.3.1119/kendo.all.min.js")"></
script
>
@(Html.Kendo().MobileDrawer()
.Name("my-drawer")
.HtmlAttributes(new { style = "width: 270px" })
.Content(obj =>
Html.Kendo().MobileListView().Type("group")
.Items(root =>
{
root.Add().Text("Navigation");
root.Add().Text("Account");
})
)
)
<
div
class
=
"container"
>
<
div
class
=
"row"
>
<!-- main area -->
<
div
class
=
"col-xs-12"
>
@RenderBody()
</
div
>
</
div
>
</
div
>
script src="@Url.Content("~/Scripts/bootstrap/bootstrap.min.js")" type="text/javascript"></
script
>
<
script
type
=
"text/javascript"
>
var app = new kendo.mobile.Application(document.body,
{
skin: "flat",
initial: @Url.Action("Index", "Home")
});
</
script
>
01.
function
updateMessages(id, title) {
02.
var
data = {
03.
'language'
:
"en"
,
04.
'api_version'
:
'2'
05.
};
06.
var
categoryId = id.split(
'-'
).pop();
07.
categoryId =
typeof
categoryId !==
'undefined'
? categoryId :
""
;
08.
09.
var
url = SERVER_NAME;
10.
if
(categoryId ===
""
) {
11.
url +=
'/secret/all'
;
12.
}
13.
else
{
14.
url +=
'/secret/category/'
+ categoryId;
15.
}
16.
url +=
'?callback=?'
;
17.
$.getJSON(url, data,
function
(json) {
18.
var
messages =
''
;
19.
$.each(json.messages,
function
() {
20.
messagesViewModel.addMessage(
this
.id,
this
.message,
this
.machine_timestamp,
this
.human_timestamp,
this
.number_comments)
21.
});
22.
messagesViewModel[
'title'
] = title;
23.
});
24.
app.application.navigate(
'messages.html'
);
25.
}
1.
var
messagesViewModel = kendo.observable({
2.
messages: [],
3.
title:
''
,
4.
5.
addMessage:
function
(id, message, machineTimestamp, humanTimestamp, comments){
6.
this
.messages.push({id:id, message:message, machineTimestamp: machineTimestamp, humanTimestamp: humanTimestamp, comments:comments});
7.
},
8.
})
01.
<!DOCTYPE html>
02.
03.
<
html
>
04.
<
head
>
05.
<
title
></
title
>
06.
</
head
>
07.
<
body
>
08.
<
div
id
=
"messageList"
data-role
=
"view"
data-title
=
"Secrets"
data-model
=
"messagesViewModel"
>
09.
<
div
id
=
"messagesViewContent"
data-role
=
"content"
>
10.
<!-- list of secrets -->
11.
<
ul
id
=
"messageList"
data-role
=
"listview"
data-bind
=
"source: messages"
data-template
=
"messagesTemplate"
data-auto-bind
=
"false"
>
12.
</
ul
>
13.
</
div
>
14.
15.
<
script
type
=
"text/x-kendo-template"
id
=
"messagesTemplate"
>
16.
<
a
id
=
"#:id#"
href
=
"messageDetails.html?id=#:id#&message=#:message#"
>
17.
<
p
>#:message#</
p
>
18.
</
a
>
19.
</
script
>
20.
</
div
>
21.
</
body
>
22.
</
html
>
var
viewModel = kendo.observable({
accept:
function
() {
// ajax call
},
reject:
function
() {
utils.showReject();
// modalview
// get response from showReject (i.e., if they hit Reject,
// give me their comments from the input)
// ajax call with comments from above
}
});
var
showReject =
function
() {
$(
"#reject-view"
).show().data().kendoMobileModalView.open();
}
<
div
data-role
=
"modalview"
id
=
"reject-view"
style
=
"display: none; width: 70%;"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
>Are you sure?</
span
><
br
/>
<
textarea
rows
=
"3"
placeholder
=
"Enter Reject Reason"
style
=
"width: 95%; padding: 5px;"
></
textarea
><
br
/>
<
a
data-click
=
"app.closeModal"
data-modalid
=
"#reject-view"
data-role
=
"button"
>Reject</
a
>
<
a
data-click
=
"app.closeModal"
data-modalid
=
"#reject-view"
data-role
=
"button"
>Cancel</
a
>
</
div
>
</
div
>
</
div
>
Uncaught TypeError: undefined has no properties
(anonymous function)
b.isFunction.i jquery.min.js:3
C.render kendo.mobile.min.js:12
b.isFunction.i jquery.min.js:3
y.extend._renderItems kendo.mobile.min.js:18
y.extend.insertAt kendo.mobile.min.js:18
y.extend.append kendo.mobile.min.js:18
g.Class.extend.init kendo.mobile.min.js:18
$.item kendo.mobile.min.js:18
g.Observable.extend.refresh kendo.mobile.min.js:18
(anonymous function) kendo.mobile.min.js:18
i.extend.trigger kendo.mobile.min.js:12
lt.Observable.extend._change kendo.mobile.min.js:15
(anonymous function) kendo.mobile.min.js:15
i.extend.trigger kendo.mobile.min.js:12
ut.extend._process kendo.mobile.min.js:14
ut.extend.success kendo.mobile.min.js:14
b.isFunction.i jquery.min.js:3
n.success kendo.mobile.min.js:14
c jquery.min.js:3
p.fireWith jquery.min.js:3
k jquery.min.js:5
r jquery.min.js:5
app.noteDetail =
function
(e){
var
view = e.view,
noteDetailTemplate = kendo.template($(
"#detailTemplate"
).text());
app.noteDS.fetch(
function
(){
//still causing issue to collapse listview
var
item = app.noteDS.get(view.params.id);
view.scrollerContent.html(noteDetailTemplate(item));
kendo.bind(view.element, item, kendo.mobile.ui);
});
};
data-bind="source: MenuItems,
visible: isVisible,
events: {change: SectionSelect,}"
var
AdminPanelViewModel = kendo.observable(
{
// data source
MenuItems:
new
kendo.data.DataSource(
{
data: [
{ title:
"Alerts"
, URI:
"j"
, className:
"k-widget MainMenuItem_Bogus"
},
{ title:
"Nodes"
, URI:
"j"
, className:
""
},
{ title:
"Map"
, URI:
"j"
, className:
""
},
],
}),
SelectedMenuItem:
null
,
// visible settings
isVisible:
true
,
selectable:
"single"
,
SectionSelect:
function
(e) {
this
.set(
"SelectedMenuItem"
,e.sender.dataSource.view()[e.sender.select().index()])
},
}
);