Kendo UI Mobile listview datasource not working

Question

I am trying to bind a field returned from a web service to a listview.

The Json object is:

{"retrieveIndividualAccountResponse":
{"operationResult":"SUCCESS","responseDateTime":"2015-07-15T00:53:43.464+0000","individualAccount":{"createdDateTime":"2012-04-30T05:00:00.000+0000","lastModifiedDateTime":"2013-06-26T05:00:00.000+0000","accountId":3280,"primaryContact":{"contactId":3280,"firstName":"Mike","lastName":"Barber","preferredName":"Mike","phone1":"817 360-7057","phone1Type":"MOBILE","phone2":"817 334-7360","phone2Type":"WORK","fax":"817 334-7364","email1":"[email protected]","email2":"","email3":"","deceased":false,"addresses":{"address":[{"addressId":3521,"isPrimaryAddress":true,"isShippingAddress":false,"addressType":{"id":"1","name":"Home"},"addressLine1":"505 Main Street, Suite 300","city":"Fort Worth","state":{"code":"TX","name":"TEXAS"},"country":{"id":"1","name":"United States"},"zipCode":"76102"},{"addressId":4163,"isPrimaryAddress":false,"isShippingAddress":false,"addressType":{"id":"2","name":"Business"}}]},"title":"Fort Worth Area President"},"noSolicitation":false,"customFieldDataList":{"customFieldData":[]},"source":{},"existingOrganizationId":3917,"individualTypes": {"individualType":[{"id":"32","name":"LC Prospect 2017"}]}}}}

The html view is:

<!DOCTYPE html>

<html>
    <head>
        <title>Test Datasource</title>
    </head>
    <body>               
       <div data-role="view" id="memberProfileView" data-title="Member Profile" data-show="showMemberProfile">
           <h3>Edit Profile</h3> 
           <ul id="memberProfileUL"
                data-source="memberProfileData"
                data-endlessScroll="true"
                data-template="memberProfileTemplate"
                data-role="listview"
                data-style="inset">
            </ul>
       </div>
       <script id="memberProfileTemplate" type="text/x-kendo-template">
            <li>
                <h3>#: FirstName#</h3>  
            </li>
       </script> 

       <script>

          var MemberProfile = kendo.data.Model.define({
              id: "retrieveIndividualAccountResponse.individualAccount.primaryContact.accountId",
              fields: {
                FirstName: "retrieveIndividualAccountResponse.individualAccount.primaryContact.firstName"
              }
          })

          var memberProfileData = new kendo.data.DataSource({
                transport: {
                    read:  {                        
                        url: "https://api.neoncrm.com/neonws/services/api/account/retrieveIndividualAccount?responseType=json&userSessionId=cf96ec15f21d271366c2d03b8bff1a83&accountId=3280",
                        dataType: "jsonp"                           
                    },
                    schema: {
                    model: MemberProfile
                    }
                }
            });           

        function showMemberProfile(e){
                //accountID = e.view.params.accountID;
                //sessID = e.view.params.userSess;
                memberProfileData.fetch();
        }

        </script>
    </body>
</html>

When I tried to run it in the Telerik simulator, it just displayed 'Loading...'. Any help will be greatly appreciated.

Sarantis Tofas Sarantis Tofas · Accepted Answer · 2015-07-15T10:41:17

try to add the 'data' configuration in your datasource. It should be like this:

var memberProfileData = new kendo.data.DataSource({
            transport: {
                read:  {                        
                    url: "https://api.neoncrm.com/neonws/services/api/account/retrieveIndividualAccount?responseType=json&userSessionId=cf96ec15f21d271366c2d03b8bff1a83&accountId=3280",
                    dataType: "jsonp"                           
                },
                schema: {
                model: MemberProfile
                },
                data: "retrieveIndividualAccountResponse.individualAccount.primaryContact"
            }
        });

if it doesnt work please send jsfiddle link or something similar.

Kendo UI Mobile listview datasource not working

1 Answers