or
<!DOCTYPE html>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
meta
name
=
"format-detection"
content
=
"telephone=no"
/>
<
meta
name
=
"viewport"
content
=
"user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=medium-dpi"
/>
<
link
rel
=
"stylesheet"
href
=
"styles/926/kendo.mobile.all.min.css"
/>
<
script
src
=
"js/jquery.min.js"
></
script
>
<
script
src
=
"js/kendo/926/kendo.mobile.min.js"
></
script
>
</
head
>
<
body
id
=
"dmbody"
>
<
script
type
=
"text/javascript"
>
var application = new kendo.mobile.Application($(document).body,
{
transition: "slide",
skin: "flat"
});
function navToView2() {
//performs all sorts of logic, but boils down to calling application.navigate to some URL
application.navigate('#view2');
}
function navToView1() {
//performs all sorts of logic, but boils down to calling application.navigate to some URL
application.navigate('#view1');
}
</
script
>
<!-- initial view -->
<
div
data-role
=
"view"
data-layout
=
"app"
data-title
=
"View 1"
id
=
"view1"
>
<
p
>
<
a
data-role
=
"button"
data-click
=
"navToView2"
>View 2</
a
>
</
p
>
</
div
>
<
div
data-role
=
"view"
data-layout
=
"app"
data-title
=
"View 2"
id
=
"view2"
>
<
p
>
<
a
data-role
=
"button"
data-click
=
"navToView1"
>View 1</
a
>
</
p
>
</
div
>
<!-- application layout template -->
<
div
data-role
=
"layout"
data-id
=
"app"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
header
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
href
=
"#view1"
>View 1</
a
>
<
a
href
=
"#view2"
>View 2</
a
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
@(Html.Kendo().MultiSelect()
.Name("EditModel.Modules.ID")
.DataValueField("ID")
.DataTextField("Name")
.Filter(FilterType.Contains)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetModules", "Modules");
})
.ServerFiltering(true);
}))
<!DOCTYPE html><
br
><
html
><
br
><
head
><
br
><
meta
charset
=
"ISO-8859-1"
><
br
><
title
>Login</
title
><
br
> <
link
href
=
"styles/kendo.mobile.all.min.css"
rel
=
"stylesheet"
/><
br
></
head
><
br
><
body
><
br
> <
div
data-role
=
"view"
data-title
=
"Settings"
id
=
"loginForm"
><
br
> <
header
data-role
=
"header"
><
br
> <
div
data-role
=
"navbar"
><
br
> <
span
data-role
=
"view-title"
></
span
><
br
> </
div
><
br
> </
header
><
br
> Server: <
input
id
=
"serverid"
name
=
"authserver"
type
=
"url"
data-bind
=
"value: authserver"
required
data-required-msg
=
"Enter server address"
data-url-msg
=
"Enter a valid url for server"
><
br
> <
span
class
=
"k-invalid-msg"
data-for
=
"authserver"
></
span
><
br
/><
br
> UserName: <
input
id
=
"emailid"
name
=
"username"
type
=
"email"
data-bind
=
"value: username"
required
data-required-msg
=
"You need to enter email"
data-email-msg
=
"Enter a valid email id"
><
br
> <
span
class
=
"k-invalid-msg"
data-for
=
"username"
></
span
><
br
/><
br
> Password: <
input
id
=
"pwd"
name
=
"password"
type
=
"password"
data-bind
=
"value: password"
required
validationMessage
=
"Enter Password with minimum 6 characters"
><
br
> <
span
class
=
"k-invalid-msg"
data-for
=
"password"
></
span
><
br
/><
br
> <
button
data-bind
=
"click: getUserDetails"
>Login</
button
><
br
> </
div
><
br
> <
script
src
=
"scripts/jquery.min.js"
></
script
><
br
> <
script
src
=
"scripts/kendo.all.min.js"
></
script
><
br
> <
script
src
=
"scripts/viewModel/loginModel.js"
></
script
><
br
> <
script
src
=
"scripts/viewModel/loginViewModel.js"
></
script
><
br
> <
script
><
br
> /** Initial the kendo mobile application */<
br
> var app = new kendo.mobile.Application(document.body);<
br
> </
script
><
br
></
body
><
br
></
html
>
var validator = $("#loginForm").kendoValidator().data("kendoValidator");<
br
><
br
>var loginViewModel = kendo.observable({<
br
> authserver: "",<
br
> username:"",<
br
> password:"",<
br
> getUserDetails: function(){<
br
> if(validator.validate()){<
br
> // alert("Server Address -- "+ this.get("authserver")+" User Name -- "+ this.get("username")+" User Password -- "+ this.get("password"));<
br
> <
br
> var dataSource = new kendo.data.DataSource({<
br
> transport:{<
br
> read:{<
br
> url: "http://127.0.0.1/api/index.php",<
br
> type: "POST",<
br
> dataType: "html",<
br
> <
br
> }<
br
> },<
br
> change: function(data){<
br
> alert("aaa"+dataSource.data);<
br
> alert(data);<
br
> },<
br
> error: function(xhr, error){<
br
> console.log(xhr);<
br
> console.log(error);<
br
> }<
br
> });<
br
> }else{<
br
> alert("Not valid");<
br
> }<
br
> <
br
> },<
br
> <
br
>}) ;
<!--- Layout --->
<
section
data-role
=
"layout"
data-id
=
"default"
>
<!--View content will render here-->
<
header
data-role
=
"footer"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
>Home</
span
>
<
a
data-align
=
"right"
data-icon
=
"icon-three-dot"
data-role
=
"button"
href
=
""
></
a
>
<
a
data-align
=
"left"
data-icon
=
"icon-three-bar"
data-role
=
"button"
href
=
"#sideMenuView"
data-rel
=
"drawer"
></
a
>
</
div
>
</
header
>
</
section
>
<!--- End Layout --->
<!--- Drawers --->
<
div
data-role
=
"drawer"
id
=
"sideMenuView"
data-show
=
"rebindListView"
data-transition
=
"slide"
>
<
div
data-role
=
"footer"
>
<
div
id
=
"sideMenuNavbar"
data-role
=
"navbar"
class
=
"bg-white"
>
<
span
data-role
=
"view-title"
>
<
img
src
=
"./styles/images/SlideNav.png"
>
</
span
>
<
a
data-role
=
"backbutton"
id
=
"btnDrawerBack"
data-align
=
"left"
>Back</
a
>
</
div
>
</
div
>
<
div
class
=
"container"
>
<
ul
id
=
"sideMenuListView"
class
=
"sideMenuListView"
data-role
=
"listview"
data-template
=
"sideMenuDrawer-template"
data-style
=
"inset"
>
</
ul
>
</
div
>
</
div
>
<!--- End Drawers --->
<!-- Script Templates -->
<
script
id
=
"sideMenuDrawer-template"
type
=
"text/x-kendo-template"
>
<
div
class
=
"#: style #"
>
# if (data.style == 'settings') { #
<
a
data-align
=
"left"
data-icon
=
"icon-gears"
data-role
=
"button"
class
=
"btn-icon" data-click="rebindListView"
></
a
>
# } else { #
<
a
data-align
=
"left"
data-icon
=
"icon-angle-right"
data-role
=
"button"
class
=
"btn-icon" data-click="rebindListView"
></
a
>
# } #
<
div
data-role
=
"button"
class
=
"text btn-text"
data-click
=
"#: view #"
>#: name #</
div
>
</
div
>
</
script
>
<!-- End Script Templates -->
<!-- Script Variables -->
<
script
>
var category = new kendo.data.DataSource({
data: [
{id: 1, name: "Dogs", view:"dogView", style:""},
{id: 2, name: "Cats", view:"catModalView", style:""},
{id: 3, name: "Birds", view:"birdView", style:""},
{id: 4, name: "Snakes", view:"snakeView", style:""},
{id: 5, name: "Cows", view:"cowView", style:""}
]
}),
type = new kendo.data.DataSource({
data: [
{id: 1, category: 2, name: "Persian"},
{id: 2, category: 2, name: "Arabian"},
{id: 3, category: 2, name: "Local"},
{id: 4, category: 1, name: "Husky"},
{id: 5, category: 1, name: "Retriever"}
]
})
</
script
>
<!-- End Script Variables -->
<!-- Script Functions -->
<
script
>
function rebindListView(e) {
var params = e.view.params,
element = e.view.element,
backButton = element.find('#btnDrawerBack'),
listView = element.find("#sideMenuListView").data('kendoMobileListView');
if (params) {
var parentID = e.view.params.parent;
sideItem = type.filter({field: "category", operator: "eq", value: parentID});
if (sideItem) {
backButton.show();
listView.setDataSource(sideItem);
} else {
// redirect to root
setTimeout(function() {
kendo.mobile.application.navigate('#homeView');
}, 0);
}
} else {
backButton.hide();
listView.setDataSource(category);
}
e.view.scroller.scrollTo(0, 0);
}
</
script
>
<!-- End Script Functions -->