Telerik Forums
Kendo UI for jQuery Forum
2 answers
270 views
I have a listview uses the selectable property as true, and in the item templateI have a link to remove an item.

But, when I click the link the change event fires first.

Is there a way to know in the change event that the remove was called?
rlapao
Top achievements
Rank 1
 answered on 02 May 2012
0 answers
41 views
Hi! I'm loftconversions and I download your free trial at Mozilla browser. Although the download was successful but I can't open it at Mozilla itself. I need help please?
John8
Top achievements
Rank 1
 asked on 02 May 2012
1 answer
121 views
Hi,

I'm having a problem programmatically creating a grouped list view that looks like this (from the basic listview demo) :

http://www.captainsjob.com/test/cj/images/listscreen.png 

I've created a cut down demo that recreates my problem page in as simple a way as possible. In the real page I'm using Backbone JS and underscore templating. I can't use

new kendo.mobile.Application()

in this case (which works by the way).

Here is the test page showing my problem. The result is a much simpler list with no grouping. It's missing lots of styles but I don't know why :

http://www.captainsjob.com/test/cj/test.html 

Can you have a look and tell me what I'm doing wrong? It doesn't look like the grouped list view

Thanks
Petyo
Telerik team
 answered on 02 May 2012
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
730 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
286 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
255 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
136 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?