Telerik Forums
Kendo UI for jQuery Forum
1 answer
873 views
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
Petyo
Telerik team
 answered on 02 May 2012
1 answer
65 views
I have a inserted one tabstrip when I click one detail.

But when I clicked on the next detail, the tabstrip is added to the previous row instead of the current one?

Is there a method to target the tabstrip adding dynamically to the current selected row/detail??

                    var tabstrip = $(".tabstrip").data("kendoTabStrip");
                    var nextItem = tabstrip.select().next();              
                    if (!nextItem.length) {
                        tabstrip.insertAfter({ text: 'metadata', contentUrl: URL }, tabstrip.tabGroup.children("li:last"));                                       
                        tabstrip.select(tabstrip.tabGroup.children().first());       
                    }
George
Top achievements
Rank 1
 answered on 02 May 2012
5 answers
247 views
I originally had a listview with a hard coded list and the layout was fine.  I changed it to use a datasource and template instead and now gaps appear between the list items.  Can anyone suggest why this is and how to remove these?

original code which displays no gaps:

    <div data-role="view" data-title=" Control Panel - Mobile" id="listmessages" data-init="listMessagesInit">
        <h2>Customer Messages</h2>
        <p><?php echo $unread_messages . ' - unread messages'; ?></p> <a data-align="right" data-role="button" id="markasread">Mark as read</a><a data-align="right" data-role="button" id="delete">Delete</a>
        <ul id="message_list">
        <li class="isnew_1" id="890"><a href="/messages/view/890">
       <div style="float:left; width:150px; height: 50px">customer name<br />date</div>
       <div style="height: 50px"id="message_#= id #">customer name</div>
   </a></li><li class="isnew_0" id="234"><a href="/messages/view/#= id #">
       <div style="float:left; width:150px; height: 50px">customer name<br />date</div>
       <div style="height: 50px"id="message_#= id #">customer name</div>
   </a></li><li class="isnew_0" id="456"><a href="/messages/view/#= id #">
       <div style="float:left; width:150px; height: 50px">customer name<br />date</div>
       <div style="height: 50px"id="message_234">customer name</div>
   </a></li>
        </ul>
    </div>
 
<script>
 
     function listMessagesInit(){
         $("#message_list").kendoMobileListView({
              style: "inset",
          });
     }
    </script>


amended code which displays gaps:

<div data-role="view" data-title="Control Panel - Mobile" id="listmessages" data-init="listMessagesInit">
        <h2>Customer Messages</h2>
        <p><?php echo $unread_messages . ' - unread messages'; ?></p> <a data-align="right" data-role="button" id="markasread">Mark as read</a><a data-align="right" data-role="button" id="delete">Delete</a>
        <ul id="message_list"></ul>
    </div>
 
   <script id="message_list_template" type="text/x-kendo-template">
<li class="isnew_#= isnew #" id="#= id #"><a href="/messages/view/#= id #">
       <div style="float:left; width:150px; height: 50px">#= customer_name #<br />#= created #</div>
       <div style="height: 50px"id="message_#= id #">#= message #</div>
   </a></li>
</script>  
 
 function listMessagesInit(){
 
        var messageDataSource = new kendo.data.DataSource({
            
            transport: {
                read: "/messages/data",
                dataType: "json",
            schema: {
              model: {
                  id: "id",
                  fields: {
                      created: { type: "string" },
                      message: { type: "string" },
                      customer_name: { type: "string" },       
                      isnew: { type: "string" }
                     }
                      
                 }
             },
                  
           });
 
          $("#message_list").kendoMobileListView({
              dataSource: messageDataSource,
              //pullToRefresh: true,
              //appendOnRefresh: true,
              style: "inset",
              template: $("#message_list_template").text()
          });
 }


If I change the li's to divs this works layout wise but then the links within the divs will not work as remote view navigation.  Please advise..
Dimo
Telerik team
 answered on 02 May 2012
1 answer
731 views
I have a class: PeopleService that returns IQueryable list of People

public class PeopleService
    {
        List<Person> people = new List<Person>()
        {
            new Person(50, "Fred"),
            new Person(30, "John"),
            new Person(26, "Andrew"),
            new Person(24, "Xaier"),
            new Person(5, "Mark"),
            new Person(6, "Cameron"),
        };
 
        public IQueryable<Person> People
        {
            get { return people.AsQueryable<Person>(); }
        }
    }

This is the script that I am using:

<script>
    var myDataSource = {
        type: "odata",
        transport:
    {
        read: "http://localhost:56626/WcfDataService1.svc/People"
    }
    };
 
    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: myDataSource,
            height: 500,
            columns: ["Age", "Name"]
        });
    });
</script>

Here is the url view source of my read:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
  <title type="text">People</title>
  <id>http://localhost:56626/WcfDataService1.svc/People</id>
  <updated>2012-04-27T15:18:58Z</updated>
  <link rel="self" title="People" href="People" />
  <entry>
    <id>http://localhost:56626/WcfDataService1.svc/People('Fred')</id>
    <title type="text"></title>
    <updated>2012-04-27T15:18:58Z</updated>
    <author>
      <name />
    </author>
    <link rel="edit" title="Person" href="People('Fred')" />
    <category term="WebApplication1.Person" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
    <content type="application/xml">
      <m:properties>
        <d:Age m:type="Edm.Int32">50</d:Age>
        <d:Name>Fred</d:Name>
      </m:properties>
    </content>
  </entry>
  <entry>
    <id>http://localhost:56626/WcfDataService1.svc/People('John')</id>
    <title type="text"></title>
    <updated>2012-04-27T15:18:58Z</updated>
    <author>
      <name />
    </author>
    <link rel="edit" title="Person" href="People('John')" />
    <category term="WebApplication1.Person" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
    <content type="application/xml">
      <m:properties>
        <d:Age m:type="Edm.Int32">30</d:Age>
        <d:Name>John</d:Name>
      </m:properties>
    </content>
  </entry>
  <entry>
    <id>http://localhost:56626/WcfDataService1.svc/People('Andrew')</id>
    <title type="text"></title>
    <updated>2012-04-27T15:18:58Z</updated>
    <author>
      <name />
    </author>
    <link rel="edit" title="Person" href="People('Andrew')" />
    <category term="WebApplication1.Person" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
    <content type="application/xml">
      <m:properties>
        <d:Age m:type="Edm.Int32">26</d:Age>
        <d:Name>Andrew</d:Name>
      </m:properties>
    </content>
  </entry>
  <entry>
    <id>http://localhost:56626/WcfDataService1.svc/People('Xaier')</id>
    <title type="text"></title>
    <updated>2012-04-27T15:18:58Z</updated>
    <author>
      <name />
    </author>
    <link rel="edit" title="Person" href="People('Xaier')" />
    <category term="WebApplication1.Person" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
    <content type="application/xml">
      <m:properties>
        <d:Age m:type="Edm.Int32">24</d:Age>
        <d:Name>Xaier</d:Name>
      </m:properties>
    </content>
  </entry>
  <entry>
    <id>http://localhost:56626/WcfDataService1.svc/People('Mark')</id>
    <title type="text"></title>
    <updated>2012-04-27T15:18:58Z</updated>
    <author>
      <name />
    </author>
    <link rel="edit" title="Person" href="People('Mark')" />
    <category term="WebApplication1.Person" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
    <content type="application/xml">
      <m:properties>
        <d:Age m:type="Edm.Int32">5</d:Age>
        <d:Name>Mark</d:Name>
      </m:properties>
    </content>
  </entry>
  <entry>
    <id>http://localhost:56626/WcfDataService1.svc/People('Cameron')</id>
    <title type="text"></title>
    <updated>2012-04-27T15:18:58Z</updated>
    <author>
      <name />
    </author>
    <link rel="edit" title="Person" href="People('Cameron')" />
    <category term="WebApplication1.Person" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
    <content type="application/xml">
      <m:properties>
        <d:Age m:type="Edm.Int32">6</d:Age>
        <d:Name>Cameron</d:Name>
      </m:properties>
    </content>
  </entry>
 
</feed>

My grid is not returning data:  What am I missing?
Nikolay Rusev
Telerik team
 answered on 02 May 2012
5 answers
287 views
I would like to create a panel bar from a JSON object which is forged on basis of some nested array application data.
At some moment, I want to know the currents selection of the panel bar, and do something with corresponding selection of my original data.
However the .selected() method of the panelbar object returns the selected DOM element, and not a kind of index.
How to figure out what number of list element that actually is?

Suppose we have the panelbar as created in the panelbar basic demo, and we have selected the 'Q3 forecast' of the 'Sales forecast' of the Projects, then I would idealy want to know its relative index, something like 1,1,2. 

I studied the onSelect function of the panelbar API demo, but that does the tric the otherway arround.
Any suggestion, or do I perhaps misunderstand the concept of a panelbar  in the first place? 

Kamen Bundev
Telerik team
 answered on 02 May 2012
1 answer
256 views
Hi,

In our application, we need to have a custom handle responding to the swipe (left and right) touch events, I am aware with the lack of handling these events in the current released version of kendo mobile, so I need to replicate a similar behavior of these events.

Do you have any suggestions?

Amr 
Petyo
Telerik team
 answered on 02 May 2012
1 answer
138 views
Hi,

I am using Keno Mobile with PhoneGap in my application, I am replicating a list view similar to the one showed in the demo.
However, scrolling through the list items takes a considerable time to render the rest of the list items.

Can you have any suggestions about the source of this performance issue?

Thanks,
Amr
Petyo
Telerik team
 answered on 02 May 2012
6 answers
270 views
I've already seen too many forum post about problems, so I'm looking for a better intro and walkthrough for getting started that does NOT make any assumptions.

Yes, I understand that KendoUI is HTML5+jQuery+CSS but when building multi-targeted mobile apps for iOS, Android, etc must the HTML5 app be served from a web server?  Or will it be accessed from an app installed on the mobile device after packaging with PhoneGap? So that the HTML5 web pages are actually packaged into the app that is installed on each mobile phone device?

And if packaged with PhoneGap, where do you start: with a PhoneGap project?  Or with a Visual Studio project?  Especially if you want to build upon existing ASP.NET project dll's and ASP.NET MVC3 or MVC4 projects?

A complete walkthrough clarifying which development steps to complete in which development environment would prevent time wasted on trial and error.   Especially for the situation where I want to develop in Visual Studio with ASP.NET MVC 4 plus KendoUI on PC Windows, then eventually get to an iOS app for iPad and iPhone on Apple.
Dimo
Telerik team
 answered on 02 May 2012
1 answer
99 views
Is it possible to have a slider on graphs. We have a lot of data to graph and presently it just makes the columns or bar smaller trying to fit everything in the area allowed. I have attached an exemple to show what we would like to have.

Thanks in advance.

Pierre Sauvé

Hristo Germanov
Telerik team
 answered on 02 May 2012
1 answer
199 views
Hello,
data-init=" function " is executed when the page view is loaded the first time.

who load a function each time that is displayed ?

I try
app.navigate( url );

or
window.location = url;


but the page not call the function again.
Sasha
Top achievements
Rank 1
 answered on 02 May 2012
Narrow your results
Selected tags
Tags
+138 more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?