or
Just copy the CSS output to a .css file and include it in your page.
This is my simple code.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Basic usage</
title
>
<
script
src
=
"js/jquery.min.js"
></
script
>
<
script
src
=
"js/kendo.mobile.min.js"
></
script
>
<
script
src
=
"content/shared/js/console.js"
></
script
>
<
link
href
=
"styles/kendo.mobile.all.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"styles/silver.css"
rel
=
"stylesheet"
/>
</
head
>
<
body
>
<
a
href
=
"index.html"
>Volver</
a
>
<
div
data-role
=
"view"
id
=
"tabstrip-profile"
data-title
=
"Mi Estado de Cuenta"
data-layout
=
"mobile-tabstrip"
data-transition
=
"slide"
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
data-type
=
"group"
>
<
li
>
<
ul
>
<
li
><
h2
>Grupo SAESA<
span
>Sucursal</
span
></
h2
><
img
src
=
"content/mobile/overview/logo.jpg"
/></
li
>
<
li
>Weekly average sales <
span
class
=
"sales-up"
>$ 8,250</
span
></
li
>
<
li
>Monthly average sales <
span
class
=
"sales-up"
>$ 32,000</
span
></
li
>
</
ul
>
</
li
>
<
li
>
Languages
<
ul
>
<
li
>English <
span
class
=
"value"
>Native</
span
></
li
>
<
li
>Hungarian <
span
class
=
"value"
>Advanced</
span
></
li
>
<
li
>French <
span
class
=
"value"
>Advanced</
span
></
li
>
<
li
>Chinese <
span
class
=
"value"
>Beginner</
span
></
li
>
</
ul
>
</
li
>
</
ul
>
</
div
>
<
div
data-role
=
"view"
id
=
"tabstrip-cortes"
data-title
=
"Cortes Programados"
data-layout
=
"mobile-tabstrip"
data-transition
=
"slide"
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
data-type
=
"group"
>
<
li
>
SAESA
<
ul
>
<
li
class
=
"item-title"
>Lunes 16 de Abril del 2012 Comuna de Valdivia<
span
class
=
"item-info"
>Condominio Silos de Torobayo</
span
><
span
class
=
"item-hora"
>10:00 a 16:00</
span
></
li
>
<
li
class
=
"item-title"
>Lunes 16 de Abril del 2012 Comuna de Valdivia<
span
class
=
"item-info"
>Condominio Silos de Torobayo</
span
><
span
class
=
"item-hora"
>10:00 a 16:00</
span
></
li
>
<
li
class
=
"item-title"
>Lunes 16 de Abril del 2012 Comuna de Valdivia<
span
class
=
"item-info"
>Condominio Silos de Torobayo</
span
><
span
class
=
"item-hora"
>10:00 a 16:00</
span
></
li
>
<
li
class
=
"item-title"
>Lunes 16 de Abril del 2012 Comuna de Valdivia<
span
class
=
"item-info"
>Condominio Silos de Torobayo</
span
><
span
class
=
"item-hora"
>10:00 a 16:00</
span
></
li
>
</
ul
>
</
li
>
</
ul
>
</
div
>
<
div
data-role
=
"view"
id
=
"tabstrip-rating"
data-title
=
"Rating"
data-layout
=
"mobile-tabstrip"
data-transition
=
"slide"
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
data-type
=
"group"
>
<
li
>
Sales Representatives
<
ul
>
<
li
data-icon
=
"toprated"
>1. Andrew Fuller</
li
>
<
li
data-icon
=
"toprated"
>2. Janet Leverling</
li
>
<
li
data-icon
=
"toprated"
style
=
"background-color: #3589e7; color: #fff;"
>3. Carine Callahan</
li
>
<
li
data-icon
=
"toprated"
>4. Margaret Johnson</
li
>
<
li
data-icon
=
"toprated"
>5. Steve Collins</
li
>
<
li
data-icon
=
"toprated"
>6. Maria Steward</
li
>
</
ul
>
</
li
>
</
ul
>
</
div
>
<
div
data-role
=
"view"
id
=
"tabstrip-settings"
data-title
=
"Settings"
data-layout
=
"mobile-tabstrip"
data-transition
=
"slide"
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
data-type
=
"group"
>
<
li
>
Carine Callahan
<
ul
>
<
li
>Notify when online <
input
type
=
"checkbox"
data-role
=
"switch"
checked></
li
>
<
li
>Administrator <
input
type
=
"checkbox"
data-role
=
"switch"
></
li
>
<
li
>Access to stats <
input
type
=
"checkbox"
data-role
=
"switch"
checked></
li
>
</
ul
>
</
li
>
</
ul
>
</
div
>
<
div
data-role
=
"layout"
data-id
=
"mobile-tabstrip"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<!--<a class="nav-button" data-align="left" data-role="backbutton">Back</a>-->
<
span
data-role
=
"view-title"
></
span
>
<
a
data-align
=
"right"
data-role
=
"button"
class
=
"nav-button"
href
=
"#index"
>Index</
a
>
</
div
>
</
header
>
<
p
>TabStrip</
p
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
href
=
"#tabstrip-profile"
data-icon
=
"organize"
>Mi Cuenta</
a
>
<
a
href
=
"#tabstrip-cortes"
data-icon
=
"recents"
>Cortes</
a
>
<
a
href
=
"#tabstrip-rating"
data-icon
=
"stop"
>Emergencia</
a
>
<
a
href
=
"#tabstrip-settings"
data-icon
=
"settings"
>Opciones</
a
>
</
div
>
</
div
>
</
div
>
<
script
>
new kendo.mobile.Application($(document.body), {
platform: "android"
});
</
script
>
</
body
>
</
html
>
Please help me
var data = [
"M10A",
"M11A",
"M12A",
"M15A",
"M15B",
"M15C",
"M15D",
"M16A"
];
//create AutoComplete UI component
$("#<%= txtMailCodes.ClientID %>").kendoAutoComplete({
dataSource: data,
filter: "startswith",
placeholder: "Mailing Codes...",
separator: ", "
});
var
container = that._editContainer = $(html)
.appendTo(that.wrapper)
.kendoWindow(extend({
modal:
true
,
resizable:
false
,
draggable:
true
,
title:
"Edit"
,
visible:
false
}, options));
for
(idx = 0, length = that.columns.length; idx < length; idx++)
<
script
id
=
"popinEditResource"
type
=
"text"
>
<
div
class
=
"k-edit-label"
><
label
for
=
"Language"
>Langue</
label
></
div
>
<
div
class
=
"k-edit-field"
>#= Language #</
div
>
<
div
class
=
"k-edit-label"
><
label
for
=
"Name"
>Nom</
label
></
div
>
<
div
class
=
"k-edit-field"
>#= Name #</
div
>
<
div
class
=
"k-edit-label"
><
label
for
=
"Module"
>Module</
label
></
div
>
<
div
data-container-for
=
"Module"
class
=
"k-edit-field"
><
input
data-bind
=
"value:Module"
name
=
"Module"
class
=
"k-input k-textbox"
type
=
"text"
></
div
>
<
div
class
=
"k-edit-label"
><
label
for
=
"Value"
>Valeur</
label
></
div
>
<
div
data-container-for
=
"Value"
class
=
"k-edit-field"
><
input
data-bind
=
"value:Value"
name
=
"Value"
class
=
"k-input k-textbox"
type
=
"text"
></
div
>
<
div
class
=
"k-edit-label"
><
label
for
=
"Description"
>Description</
label
></
div
>
<
div
data-container-for
=
"Description"
class
=
"k-edit-field"
><
input
data-bind
=
"value:Description"
name
=
"Description"
class
=
"k-input k-textbox"
type
=
"text"
></
div
>
<
div
class
=
"k-edit-label"
><
label
for
=
"IsValidated"
>Validé</
label
></
div
>
<
div
data-container-for
=
"IsValidated"
class
=
"k-edit-field"
><
input
data-bind
=
"checked:IsValidated"
data-type
=
"boolean"
name
=
"IsValidated"
type
=
"checkbox"
></
div
>
</
script
>
editable: {
mode :
"popup"
,
template: $(
"#popinEditResource"
).html()
},
$("#grid").kendoGrid({
columns: [
{field: "Id", title: "â„–"},
{field: "Text", title: "Text"}
],
dataSource: {
data: [
{"Id":"4","Text":"hi"},
{"Id":"7","Text":"word"}
],
schema: {
model: {
id: "Id",
fields: {
Id: {editable: false, validation: {required: true}},
Text: {nullable: true}
}
}
}
},
scrollable: false,
sortable: true,
filterable: true,
editable: true,
save: function(e) {
console.log(e);
}
}).data("kendoGrid");
<
ul
id
=
"ouTreeview"
>
<
li
data-expanded
=
"true"
data-ouid
=
"0"
data-isexternal
=
"false"
data-parentid
=
"0"
>
<
label
>Root Element</
label
>
</
li
>
</
ul
>
<script language=
"javascript"
type=
"text/javascript"
>
var
ouTreeview;
var
selectedOUId;
var
selectedOUName;
var
ouTreeviewNode;
var
selectedParentId;
var
selectedOUIsExternal;
function
setSelectedTitleById(id) {
selectedOUName = $(
".ouLeftCol:first"
).find(
"#ouTreeview:first"
).find(
"li[data-ouid='"
+ id +
"']:first"
).find(
"label:first"
).text();
}
$(document).ready(
function
() {
function
onSelect(e) {
ouTreeviewNode = e.node;
selectedParentId = $(e.node).data(
"parentid"
);
selectedOUIsExternal = ($(e.node).data(
"isexternal"
).toString().toLowerCase() ===
'true'
);
selectedOUId = $(e.node).data(
"ouid"
);
setSelectedTitleById(selectedOUId);
$.ajax({
url:
"@Url.Action("
LoadOUForm
", "
DashBoard
")"
,
type:
"POST"
,
cache:
false
,
success:
function
(response) {
$(
".ouRightCol"
).html(response);
if
(selectedOUId !=
"ROOT"
) {
$(
"table.ouForm"
).find(
"input[id='ouTitle']"
).val(selectedOUName);
if
(selectedOUIsExternal)
{
$(
"table.ouForm"
).find(
"input[id='ouIsExternal']"
).attr(
"checked"
,
"checked"
);
}
else
{
$(
"table.ouForm"
).find(
"input[id='ouIsExternal']"
).removeAttr(
"checked"
);
}
}
}
});
}
ouTreeview = $(
"#ouTreeview"
).kendoTreeView({ select: onSelect });
});