or
function mobileListViewPressToLoadMore() {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
serverPaging: true,
transport: {
create: {
data: { key: "34083E61DB18E3E88C80DB638C91009A9934757542B538C20E332BBC3F079BE66E79BDC70F06EED8541925D95599E834CF8877D07FAF4645A190BFA3E38A9A3FCB728E043EB8A081B279B81F6F9CED5A"
}
},
read: {
url: "http://services/rest/plan.svc/Patient" // the remove service url
},
parameterMap: function (options) {
var parameters = {
q: "javascript", //additional parameters sent to the remote service
rpp: options.pageSize,
page: options.page //next page
};
return parameters;
}
}, schema: { // describe the result format
data: "", // the data which the data source will be bound to is in the "results" field
total: function () { return 0; }
}
});
$("#load-more").kendoMobileListView({
dataSource: dataSource,
template: $("#load-more-template").text(),
loadMore: true
});
}
@(Html.Kendo().ComboBox()
.Name("vendorsforClass")
.AutoBind(false)
.HtmlAttributes(new { style = "width: 300px;" })
.DataTextField("Name")
.DataValueField("Id")
)
function
getVendorsForClass() {
var
txtValue = $(
"#txtSearchClassVendor"
).val();
$.getJSON(
'@Url.Action("GetVendorListByClass","RCS", new {classes = "class"}, "http")/'
+ txtValue,
function
(data) {
var
combo = $(
"#vendorsforClass"
).data(
"kendoComboBox"
);
combo.setDataSource(data);
combo.refresh();
});
}
public
JsonResult GetVendorListByClass(
string
classes)
{
var vendors =
new
List<VendorList>();
var classId = classes.Split(
'/'
)[1];
int
outId;
if
(
int
.TryParse(classId,
out
outId))
{
vendors =
new
VendorListFactory().GetVendors(outId);
}
return
this
.Json(vendors.Select(v =>
new
{ v.Name, v.Id }), JsonRequestBehavior.AllowGet);
}
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Voiss</
title
>
<
script
src
=
"Scripts/kendo/last/jquery.min.js"
></
script
>
<
script
src
=
"Scripts/kendo/last/kendo.all.min.js"
></
script
>
<
link
href
=
"Content/kendo/last/kendo.common.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"Content/kendo/last/kendo.default.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"Content/kendo/last/kendo.mobile.all.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
</
head
>
<
body
>
<
div
data-role
=
"view"
data-title
=
"Touch Events"
>
<
div
id
=
"touchSurface"
data-role
=
"touch"
data-enable-swipe
=
"1"
data-touchstart
=
"myTouch.touchstart"
data-swipe
=
"myTouch.swipe"
data-tap
=
"myTouch.tap"
data-doubletap
=
"myTouch.doubletap"
data-hold
=
"myTouch.hold"
>
Touch, swipe, double-tap, tap, and hold me
</
div
>
<
div
class
=
"console"
></
div
>
</
div
>
<
script
>
window.myTouch = {
touchstart: function(e) { kendoConsole.log("touch start"); },
swipe: function(e) { kendoConsole.log("swipe " + e.direction); },
tap: function(e) { kendoConsole.log("tap"); },
doubletap: function(e) { kendoConsole.log("double tap"); },
hold: function(e) { kendoConsole.log("hold"); }
}
</
script
>
<
style
scoped>
#touchSurface {
background: black;
color: white;
padding: 20px;
line-height: 20em;
text-align: center;
font-style: italic;
}
</
style
>
<
script
>
var app = new kendo.mobile.Application(document.body);
</
script
>
</
body
>
</
html
>
var
rawDiv = $(
"<div>"
).append
(
$(
"<div>"
).attr(
"id"
, idDiv).addClass(
"boxSlider "
+ other class).append (
$(
"<span>"
).addClass(
"cover"
),
$(
"<span>"
).addClass(
"description"
)
)
)
return
rawDiv.html();
.boxSlider {
display
:
inline-table
;
margin
:
5px
;
overflow
:
hidden
;
position
:
relative
;
}
.boxSlider .cover {
width
:
100%
;
height
:
100%
;
line-height
:
100px
;
position
:
absolute
;
text-align
:
center
;
display
:
block
;
color
:
#fff
;
font-weight
:
bold
;
font-size
:
18px
;
}
.boxSlider .cover .bsFooter {
width
:
100%
;
font-size
:
14px
;
line-height
:
15px
;
bottom
:
10px
;
margin
:
0
;
position
:
absolute
;
text-transform
:
uppercase
;
font-weight
:
normal
;
}
.boxSlider .description {
display
:
none
;
width
:
100%
;
height
:
100%
;
position
:
absolute
;
font-size
:
12px
;
color
:
#fff
;
overflow-y:
auto
;
}
.boxSlider .description span {
display
:
block
;
}
.boxSlider .description p {
margin-left
:
10px
;
max-width
:
280px
;
min-width
:
240px
;
float
:
left
;
}
BoxSliderAnimation:
function
() {
$(
".boxSlider"
).hover(
function
(e) {
var
div = $(e.currentTarget);
kendo.fx(div.find(
".description"
).css(
"display"
,
"block"
)).tile(
"left"
, div.find(
".cover"
)).play();
},
function
(e) {
var
div = $(e.currentTarget);
kendo.fx(div.find(
".description"
)).tile(
"left"
, div.find(
".cover"
)).reverse();
});
},