Populate ListView Fields With Data

Thread is closed for posting
2 posts, 0 answers
  1. Lucky
    Lucky avatar
    1 posts
    Member since:
    May 2017

    Posted 26 May 2017 Link to this post

    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

  2. Martin
    Admin
    Martin avatar
    104 posts

    Posted 31 May 2017 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top