Change listview items programmatically

2 posts, 0 answers
  1. Michael Harry
    Michael Harry avatar
    4 posts
    Member since:
    Feb 2010

    Posted 27 Apr 2012 Link to this post

    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>
        </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():
    
    
    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
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 02 May 2012 Link to this post

    Hi,

    You can use the (undocumented, as it is for internal use) listview items method, which returns an array of all listview items DOM elements. 

    $("#listview-card-fundings").data("kendoListView").refresh();

    Kind regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top