Hi all,
I need to iterate through the items in a listview and change them programmatically. It's a point-of-sale app that will have to dataSources, one for FundingSources, which will be loaded once at the beginning of the day, and one for "credit cards", which can have mulitiple FundingSources. So each time a get the info for a credit card, it will return a list of funding sources (CardFundings dataSource) for that card and each record will have a FundingSourceID. Based on that FundingSourceID, I want to populate a FundingSourceName field in the FundingSources dataSource.
I can iterate through the the records in the CardFundings dataSource, but how do I iterate through the items in the associated listview and populate them?
Here's the code:
html:
And the init() function:
I need to iterate through the items in a listview and change them programmatically. It's a point-of-sale app that will have to dataSources, one for FundingSources, which will be loaded once at the beginning of the day, and one for "credit cards", which can have mulitiple FundingSources. So each time a get the info for a credit card, it will return a list of funding sources (CardFundings dataSource) for that card and each record will have a FundingSourceID. Based on that FundingSourceID, I want to populate a FundingSourceName field in the FundingSources dataSource.
I can iterate through the the records in the CardFundings dataSource, but how do I iterate through the items in the associated listview and populate them?
Here's the code:
html:
<!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
>
And the init() function:
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();
}