This is a migrated thread and some comments may be shown as answers.

Change listview items programmatically

1 Answer 884 Views

ListView (Mobile)

This is a migrated thread and some comments may be shown as answers.

Michael Harry asked on 27 Apr 2012, 11:44 PM

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:

<!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>

<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():

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();
 
}
getCardFundings():

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();
}
And here's where I need help:

enterFundingSourceNames = 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();

}
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,

Mike

Change listview items programmatically

1 Answer, 1 is accepted