or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
>My Open Cal</
title
>
<!-- Kendo UI Files -->
<
link
href
=
"styles/kendo.mobile.all.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
"js/jquery.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"js/kendo.mobile.min.js"
type
=
"text/javascript"
></
script
>
<
script
>
$( //jQuery page load
function ()
{
var app = new kendo.mobile.Application($(document.body), { layout: "layout", icon: "/images/xboxavatar.png" });
$("#ulMyCal").kendoMobileListView({
appendOnRefresh: true,
pullToRefresh: true,
pullTemplate: "Pull to refresh",
refreshTemplate: "Loading...",
dataSource: new kendo.data.DataSource(
{
transport:
{
read:
{
contentType: "application/json; charset=utf-8",
type: "GET",
dataType: "jsonp",
data:
{
q: "#tampa"
}
}
},
schema: {
data: "results"
}
}),
template:"<
p
>${text}</
p
>"
});
})
</
script
>
</
head
>
<
body
>
<!-- Layout for all views in the application, as specified when the app is created -->
<
div
data-role
=
"layout"
data-id
=
"layout"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
>My Test</
span
>
</
div
>
</
div
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
href
=
"#index"
data-icon
=
"organize"
>My Calendar</
a
>
<
a
href
=
"#search"
data-icon
=
"search"
>Search</
a
>
<
a
href
=
"settings.htm"
data-icon
=
"settings"
>Settings</
a
>
</
div
>
</
div
>
</
div
>
<
div
data-role
=
"view"
id
=
"index"
data-title
=
"My Calendar"
>
<
div
style
=
"text-align:center"
>
<
ul
id
=
"ulMyCal"
data-style
=
"inset"
>
</
ul
>
</
div
>
</
div
>
<
div
data-role
=
"view"
id
=
"search"
data-title
=
"Search"
>
</
div
>
</
body
>
</
html
>
}
else
if
(value.indexOf(percentSymbol) > -1) {
number = percent;
symbol = percentSymbol;
}
value = value.replace(
"-"
,
""
)
.replace(symbol,
""
)
.replace(nonBreakingSpaceRegExp,
" "
)
.split(number[
","
].replace(nonBreakingSpaceRegExp,
" "
)).join(
""
)
.replace(number[
"."
],
"."
);
value = parseFloat(value);
if
(isNaN(value)) {
value =
null
;
}
else
if
(negative) {
value *= -1;
}
return
value;
kendo.toString(value,
'P'
)
kendo.cultures[
"en-US"
].numberFormat.percent.decimals = 10;
$(
"#grid"
).kendoGrid({
autoBind:
false
,
dataSource: {
schema: {
model: {
id:
"Title"
,
fields: {
Title: { editable:
false
},
Percentage: { editable:
true
, type:
"number"
}
}
}
}
},
columns: [{
title:
"TITLE"
,
field:
"Title"
}, {
title:
"PERCENTAGE"
,
field:
"Percentage"
,
format:
"{0:P}"
}],
editable:
true
,
scrollable:
false
});
new kendo.mobile.Application()
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>@ViewBag.Title</
title
>
@*Kendo*@
<
link
href
=
"../../styles/kendo.common.min.css"
rel
=
"Stylesheet"
/>
<
link
href
=
"../../styles/kendo.mobile.all.min.css"
rel
=
"Stylesheet"
/>
<
script
src
=
"../../js/jquery.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"../../js/kendo.all.min.js"
type
=
"text/javascript"
></
script
>
@*Mine*@
<
script
src
=
"../../myJs/Init1.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"../../myJs/FundingSources1.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"../../myJs/CardFundings1.js"
type
=
"text/javascript"
></
script
>
</
head
>
<
body
>
<
div
id
=
"card-fundings"
data-role
=
"view"
data-title
=
"Available Funds"
>
<
div
class
=
"head"
> </
div
>
<
h2
id
=
"h2-card-id"
>Available Funds</
h2
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
data-type
=
"group"
>
<
li
>
<
ul
id
=
"listview-card-fundings"
>
<
li
>Javascript must be</
li
>
<
li
>enabled</
li
>
</
ul
>
</
li
>
</
ul
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
id
=
"getCount"
data-role
=
"button"
data-icon
=
"contacts"
>Get Count</
a
>
</
div
>
</
div
>
</
div
>
<
script
id
=
"template-funding-sources"
type
=
"text/x-kendo-template"
>
<
li
data-icon
=
"cart"
><
a
href
=
"\#tabstrip-new"
class
=
"km-listview-link data-role="
listview-link">#= FundingSourceName # #= AvailableBalance #</
a
></
li
>
</
script
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
init();
});
</
script
>
</
body
>
</
html
>
init =
function
() {
var
kma =
new
kendo.mobile.Application(document.body);
//android test
//$("body").removeClass("km-ios").addClass("km-android");
$(
"#getCount"
).click(
function
() {
enterFundingSourceNames();
});
getFundingSources();
}
getFundingSources():getCardFundings():FundingSource_Model = kendo.data.Model.define({
fundingSourceID:
"FundingSourceID"
});
getFundingSources =
function
() {
dsFundingSources =
new
kendo.data.DataSource({
transport: {
read: {
url:
"Home/GetFundingSources"
,
dataType:
"json"
}
},
schema: {
model: FundingSource_Model
}
});
dsFundingSources.read();
}
And here's where I need help:CardFunding_Model = kendo.data.Model.define({
cardID:
"CardID"
});
getCardFundings =
function
() {
var
templateFundingSources = kendo.template($(
"#template-funding-sources"
).html());
dsCardFundings =
new
kendo.data.DataSource({
transport: {
read: {
url:
"/Home/GetCardFundings"
,
// the remove service url
dataType:
"json"
,
// JSONP (JSON with padding) is required for cross-domain AJAX
data: {
//additional parameters sent to the remote service
_cardId: fundingItem.cardID
}
}
},
schema: {
model: CardFunding_Model
},
change:
function
() {
// subscribe to the CHANGE event of the data source
$(
"#listview-card-fundings"
).html(kendo.render(templateFundingSources,
this
.view()));
}
});
dsCardFundings.read();
}
I know I could do a join operation on the server and retrieve the FundingSourceName that way, but I'm trying to minimize the load on the server, and since the FundingSources will be static all day, I'd rather the mobile app do that work. Also, as vendors add purchases against the various FundingSource AvailableBalances, I'm going to need to update the listview programmatically to reflect what's left in the till for each FundingSource, so no matter what, I'm going to need to update the UI for them. Is there a way to access the listview and update record items programmatically? Thanks, MikeenterFundingSourceNames =
function
() {
var
thisRecord =
null
;
var
thisFundingSourceID =
null
;
var
totCardFundings = dsCardFundings.total();
for
(
var
i = 0; i < totCardFundings; i++) {
thisRecord = dsCardFundings.at(i);
thisFundingSourceID = thisRecord.FundingSourceID;
//------------------------------------------------------------------------------------------------------
//Here's where I need to iterate through the listview and change the values for CardFundingName
//----------------------------------------------------------------------------------------------------
};
//this doesn't work
//$("#listview-card-fundings").data("kendoListView").refresh();
}