Populate ListView Fields With Data

[Lucky]

Hi Telerik Team,

I'm newbie to hybrid mobile development using Telerik AppBuilder, however I have a view that display list of customers using kendo template, so my question is:

1. How do I select list view record and display it's data into a modal view that contains  list view

html mark:

 <!--Declaring View (Customer List) markup-->
    <div data-role="view" data-id="customerList"
         data-layout="main" data-model="app.customerService.viewModel"
         data-title="Customers">
        <!--Overridden Header-->
        <div data-role="header">
            <div data-role="navbar">
                <button data-role="button" data-align="left" data-icon="refresh" data-bind="click:refresh"></button>
                 <span data-role="view-title"></span>
                <a data-role="button" data-align="right" data-rel="modalview" href="#add" data-icon="compose"></a>
            </div>
        </div>

   
        <div class="customers">
            <ul class="customers-list" data-id="customers-listview" data-role="listview"
                data-bind="source:customers"
                data-click="app.customerService.viewModel.customerSelected"
                data-template="customers-listview-template"
                data-style="inset"
                selectable="true"></ul>
        </div>
    </div>

    <!--Customer List Template-->
    <script type="text/x-kendo-tmpl" id="customers-listview-template">
        <div>
            <div>
                Customer ID:
                  <span class="customer-info totalItems customer-name" data-bind="text: CustomerID"></span>
            </div>
            <div class="position-center">
                First Name:
                <span class="customer-info totalItems customer-name" data-bind="text: FirstName"></span>
            </div>
            <div class="position-center">
                Last Name:
                <span class="customer-info totalItems customer-name" data-bind="text: LastName"></span>
            </div>
            <div class="position-center">
                Email:
                <span class="customer-info totalItems customer-name" data-bind="text: EmailAddress"></span>
            </div>
            <div class="position-center">
                Created Date:
                <span class="customer-info totalItems customer-name" data-bind="text: CreatedDate"></span>
            </div>
        </div>
         </script>

code snippets

(function (global) {

//Creating kendo ui class called OrderService
    var CustomerService = kendo.Class.extend({
        init: function () {
            //A reference to the base class object
            var that = this;

            //Create the viewModel
            that.viewModel = kendo.observable({

                customers: [],
                customer: {},
                refresh: function () {
                    getCustomers(this);
                },
                showDetail: function () {
                    alert('Test');

                },

                customerSelected: function (e) {

                     if (that.editViewModel) {
                        that.editViewModel.set("customerid", e.dataItem.CustomerID);
                        that.editViewModel.set("firstname", e.dataItem.FirstName);
                        that.editViewModel.set("lastname", e.dataItem.LastName);
                        that.editViewModel.set("emailaddress", e.dataItem.EmailAddress);

                        alert(that.editViewModel.get("customerid"));

                     } else {
                            that.editViewModel = new kendo.observable({
                            customerid: e.dataItem.CustomerID,
                            firstname: e.dataItem.FirstName,
                            lastname: e.dataItem.LastName,
                            emailaddress: e.dataItem.EmailAddress,
                            back: function () {
                                global.app.application.navigate("#:back");

                            }
                          
                            });
                            that.editViewModel.set("customerid", e.dataItem.CustomerID);
                            that.editViewModel.set("firstname", e.dataItem.FirstName);
                            that.editViewModel.set("lastname", e.dataItem.LastName);
                            that.editViewModel.set("emailaddress", e.dataItem.EmailAddress);
                            $("#edit").data("kendoMobileModalView").open();
                     }
                  
                  
                }
              
            });

 

 

       //Instantiate the CustomerService object
    global.app.customerService = new CustomerService();

    document.addEventListener('deviceready', function () {

        //TODO: Wire this up to launch in the correct order
        app.application = new kendo.mobile.Application(document.body,
{
   layout: "main",
   transition: 'zoom',
   skin: 'flat',
            initialView:"index.html",
   init: function () {
       global.app.application = this;
       getCustomers(global.app.customerService.viewModel);
      // $('ul > li').addClass("test");
      // alert($('ul').html());
   }
});
    }, false);


})(window);

Kidest Regards

Lucky Khoza

[Martin]

Hi Lucky,

I have prepared a very simple project (find attached) with your HTML code showing how to populate the ListView and show details page when you click on an item in the ListView.

Complete documentation on Kendo mobile UI ListView can be found here.

To get started with AppBuilder and Kendo UI framework you may create a sample project with Telerik Platform View Service (Views tab in the platform portal) and look at the generated code. Also, you may go through out interactive tutorials.

Let me know if this has helped.

Regards,
Martin
Progress Telerik