Bind Datasource to a MobileView - How-to?

[Dan]

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.

[Dan]

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

[Dan]

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)

    });

}

[Alexander Valchev]

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

[Dan]

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?

[Dan]

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 

[Alexander Valchev]

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