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
Top achievements
Rank 1
Dan asked on 23 Jun 2012, 09:40 PM
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">
    <!-- What Do I put here ?? -->
</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

Sort by
0
Dan
Top achievements
Rank 1
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
0
Dan
Top achievements
Rank 1
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)
    });
}
0
Alexander Valchev
Telerik team
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!
0
Dan
Top achievements
Rank 1
answered on 28 Jun 2012, 03:34 PM
Thank you for the reply.  I will take a look at that.

Are you saying that the data will automatically refresh when I change the Datasource of the already initialized Listview?
0
Dan
Top achievements
Rank 1
answered on 29 Jun 2012, 03:35 PM
Thank you - that strategy works fine now.  

I have very recently discovered MVVM through the kendoui framework usage and am trying to wire this up using a viewModel instead of how it is done above, as I believe there are several benefits.  I have started another thread for help understanding why the Listview does not work well for me with MVVM.

http://www.kendoui.com//forums/mobile/listview/listview-not-working-with-data-bind-help.aspx 
0
Accepted
Alexander Valchev
Telerik team
answered on 02 Jul 2012, 01:52 PM
Hello Dan,

I am glad to hear that the suggested approach fits in your case.

Are you saying that the data will automatically refresh when I change the Datasource of the already initialized Listview?

  • Yes, when the DataSource is modified (read, edited/deleted/inserted record, replaced data) its change event will fire which will cause the widget that is bound to it to refresh automatically. 

I hope this helps.

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!
Asked by
Dan
Top achievements
Rank 1
Answers by
Dan
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or