Bind Datasource to a MobileView - How-to?

7 posts, 1 answers
  1. Dan
    Dan avatar
    139 posts
    Member since:
    Feb 2011

    Posted 23 Jun 2012 Link to this post

    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.
  2.
  3. Dan
    Dan avatar
    139 posts
    Member since:
    Feb 2011

    Posted 26 Jun 2012 Link to this post

    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
  5. Dan
    Dan avatar
    139 posts
    Member since:
    Feb 2011

    Posted 26 Jun 2012 Link to this post

    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)
        });
    }
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 28 Jun 2012 Link to this post

    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!
  9. Dan
    Dan avatar
    139 posts
    Member since:
    Feb 2011

    Posted 28 Jun 2012 Link to this post

    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?
  11. Dan
    Dan avatar
    139 posts
    Member since:
    Feb 2011

    Posted 29 Jun 2012 Link to this post

    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 
  13. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 02 Jul 2012 Link to this post

    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!
Back to Top