Bind Datasource to a MobileView - How-to? in Kendo UI for jQuery

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

Bind Datasource to a MobileView - How-to?

6 Answers 205 Views

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

Dan asked on 23 Jun 2012, 09:40 PM

Capture.PNG

I have what I believe is a fairly common and straight-forward scenario that I am trying to figure out with Kendoui Mobile:

First I display a ListView is retrieves data from a Web Service via the Datasource object to display a list of Customers. I use a template here to add a link:

<script id="MyCustomersTemplate" type="text/x-kendo-template">

<a href="CustomerDetailView?ID=#= ID #">

<div style="font-weight:bold;">#= Name #</div>

<div style="font-weight:normal;font-size:smaller">#= City #, #= State #</div>

</a>

</script>

When you click on a customer, I navigate to a new MobileView called CustomerDetailView - where I would like to display the following:

Customer Name, Address and other simple information
List of Contacts (in a ListView)
List of Sales (also in a ListView)

I can't seem to find an example that shows how this would work. Here is where I am at right now:

<div data-role="view" data-transition="overlay" data-title="Customer Detail" id="CustomerDetailView"

data-show="getCustomer">

</div>

And on the show event of the MobileView I retrieve the data:

function getCustomer(e) {

var wsParams = {

"ID": e.view.params.ID

};

var dsCustomerDetail = new kendo.data.DataSource({

transport: {

read: {

type: "POST",

contentType: "application/json; charset=utf-8",

url: virtualDirectory + "/CRM/GetClientInfo.asmx/Read",

dataType: "json",

data: { callParams: wsParams }

},

parameterMap: function (options) {

return kendo.stringify(options);

}

},

schema: {

data: "d"

// How do I setup the Datasource to expose multiple collections (i.e Contacts and Sales) from this web service, without having to call it multiple times for each control databind?

}

});

// How do I now get this data onto the MobileView? Can I use a Template?

}

Attached is a screenshot of part of the JSON data that is returned by the web service, to give you an idea what I am dealing with here.

6 Answers, 1 is accepted

answered on 26 Jun 2012, 05:34 PM

Let me simplify my question. I have a datasource (below) that returns single value data and a few arrays. I would like to be able to call this datasource, and access both the single value data (for filling out some <span> tags) and the arrays (for binding to a couple of list views).

var wsParams = {

"ID": e.view.params.ID,

"UserID": "Me"

};

var dsCustomerDetail = new kendo.data.DataSource({

transport: {

read: {

type: "POST",

contentType: "application/json; charset=utf-8",

url: virtualDirectory + "/CRM/GetClientInfo.asmx/Read",

dataType: "json",

data: { callParams: wsParams }

},

parameterMap: function (options) {

return kendo.stringify(options);

}

},

schema: {

data: "d"

}

});

For instance I would like to do the following:

var AccountBalance = dsCustomerDetail.data().Balance; // Single value field returned in datasource

var City = dsCustomerDetail.data().City; // Single value field returned in datasource

var State= dsCustomerDetail.data().State; // Single value field returned in datasource

var dsListOfContacts = new kendo.data.DataSource(dsCustomerDetail.data.Contacts()) // List of contacts in data returned

answered on 26 Jun 2012, 08:16 PM

After a lot of searching around, I seem to have it working like this. Would love a confirmation if there is a better way of doing this:

function getCustomer(e) {

getCustomerDetail("Me", e.view.params.ID).success(

function (data) {

// Data is now retrieved for this customer and can be bound up to various controls

// on the customer detail screen

$("#vCustomerBalance").html(data.d.Balance);

$("#vCustomerOther").html(data.d.Other);

var dsContacts = new kendo.data.DataSource({ data: data.d.Contacts });

$("#lContacts").kendoMobileListView({

dataSource: dsContacts,

template: $("#tContactDetail").text(),

pullToRefresh: true

});

}

);

}

function getCustomerDetail(uID, cID) {

var wsParams = {

callParams: {

ID: cID,

UserID: uID

}

};

return $.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: virtualDirectory + "/CRM/GetClientInfo.asmx/Read",

dataType: "json",

data: kendo.stringify(wsParams)

});

}

answered on 28 Jun 2012, 07:39 AM

Hi Dan,

I am afraid that this scenario is currently not supported out of the box. If I understood it right, on each show of the view you are creating a new dataSource instance and are initializing new mobile list view. Even though this works, it might cause performance issues, so If you need to change only the data records I would recommend to consider using the data method - for example:

function getCustomer(e) {

getCustomerDetail("Me", e.view.params.ID).success(

function (data) {

// Data is now retrieved for this customer and can be bound up to various controls

// on the customer detail screen

$("#vCustomerBalance").html(data.d.Balance);

$("#vCustomerOther").html(data.d.Other);

//var dsContacts = new kendo.data.DataSource({ data: data.d.Contacts });

//replace the dataSource data with new array of records

$("#lContacts").data("kendoMobileListView").dataSource.data(data.d.Contacts);

}

);

}

In this case you will have to initialize the list view and its dataSource only once - on view init event.

Kind regards,
Alexander Valchev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Accepted