Can't get listview to reload based on selection from previous listview

5 posts, 1 answers
  1. fired
    fired avatar
    3 posts
    Member since:
    Mar 2014

    Posted 18 Apr 2014 Link to this post

    I am having this issue on a Samsung Galaxy Note 3 but it works in the simulator. I have tried many different ways, has anyone run across a similar problem? Basically there are 2 listviews, sites and packages, when you select a site it brings you to a new listview of the packages based on the site you select. The second packages listview is populated by a SQL datasourse and it uses a value from the selected sites item to use in the SQL which populates the packages listview on the next view. Any help is appreciated!

    HTML:
    <div id="closeoutSites"
        data-role="view"
        data-title="Sites"
        data-model="app.closeoutViewHelperService.viewModel">
         
            <!--Header-->
            <div data-role="header">
                <div data-role="navbar">
                    <a id="back-button" class="nav-button" data-align="left" href="#tabstrip-closeout" data-role="backbutton">Back</a>
                    <span data-role="view-title"></span>
                </div>
            </div>
     
            <div class="view-content">
             
                <br/>
                <h3>Select a Job Site</h3>
             
                <div class="separator">
                    <div class="dark"></div>
                    <div class="light"></div>
                </div>
             
                <ul data-role="listview"
                     class="closeout-site-list"
                     data-style="inset"
                     data-bind="source: displaySitesDataSource"
                     data-template="site-lookup-template">
                     
                     
                </ul>
            </div>
             
     
            <!--sites template-->
            <script type="text/x-kendo-tmpl" id="site-lookup-template">
                 
                 <a data-icon="site" onclick="app.closeoutViewHelperService.viewModel.goToSite('#= id #','#= name #')">
                    #= name #
                 </a>
                 
             
            </script>
         
        <!--Footer-->
        <div data-role="footer">
     
        </div>
          
    </div>
     
    <div id="closeoutPackages"
         data-role="view"
         data-title="Packages"
         data-model="app.closeoutViewHelperService.viewModel"
         data-init="app.closeoutViewHelperService.viewModel.showPackageList"
         data-show="app.closeoutViewHelperService.viewModel.refreshPackageList">
         
            <!--Header-->
            <div data-role="header">
                <div data-role="navbar">
                    <a id="back-button" class="nav-button" data-align="left" href="#closeoutSites" data-role="backbutton">Back</a>
                    <span data-role="view-title"></span>
                </div>
            </div>
         
            <div class="view-content">
             
                <br/>
                <h3><span data-bind="text: selectedSiteName"></span></h3>
             
                <div class="separator">
                    <div class="dark"></div>
                    <div class="light"></div>
                </div>
     
                <ul id ="packageList"
                    <!--data-role="listview" -->
                    class="closeout-package-list"
                    data-auto-bind="false"
                    data-style="inset"
                    >
                </ul>
            </div>
             
     
            <!--packages template-->
            <script type="text/x-kendo-tmpl" id="closeout-package-template">
                 
                 <a data-icon="package" onclick="">
                    #= name #
                 </a>
                 
             
            </script>
         
            <!--Footer-->
            <div data-role="footer">
     
            </div>
    </div>

    JavaScript:
    (function(global, $) {
        var CloseoutFormsViewModel, app = global.app = global.app || {};
     
        CloseoutFormsViewModel = kendo.data.ObservableObject.extend({
            selectedSiteId : "",
            selectedSiteName : "",
     
            init : function() {
                var that = this;
                kendo.data.ObservableObject.fn.init.apply(that, []);
     
                sitesDataSource = new kendo.data.DataSource({
                    transport : {
                        read : function(options) {
                            read(app.db, options.success);
                        },
                        data : {},
                    },
                    schema : {
                        model : {
                            id : "id",
                            fields : {
                                name : {
                                    editable : false
                                },
                                id : {
                                    editable : false
                                },
                                package_id : {
                                    editable : false
                                },
                                naming_convention : {
                                    editable : false
                                }
                            }
                        }
                    }
                });
     
                packagesDataSource = new kendo.data.DataSource({
                    transport : {
                        read : function(options) {
                            readPackages(app.db, selectedSiteId, options.success);
                        },
                        data : {},
                    },
                    schema : {
                        model : {
                            id : "id",
                            fields : {
                                name : {
                                    editable : false
                                },
                                id : {
                                    editable : false
                                }
                            }
                        }
                    }
                });
     
                that.set("displaySitesDataSource", sitesDataSource);
                ///that.set("displayPackagesDataSource", packagesDataSource);
            },
     
            refreshPackageList : function() {
                $("#packageList").data("kendoMobileListView").dataSource.read();
                //$("#packageList").data("kendoMobileListView").setDataSource(packagesDataSource.read());
                var listView = $("#packageList").data("kendoMobileListView");
                listView.refresh();
                return;
            },
     
            showPackageList : function() {
     
                if ($("#packageList").data("kendoMobileListView") != null) {
                    $("#packageList").data("kendoMobileListView").dataSource.read();
                } else {
                    $("#packageList").kendoMobileListView({
                        dataSource : packagesDataSource,
                        template : $("#closeout-package-template").html()
                    });
                }
            },
     
            goToSite : function(id, name) {
                var that = this;
                selectedSiteId = [id];
                selectedSiteName = [name];
                that.set("selectedSiteId", id);
                that.set("selectedSiteName", name);
                app.application.navigate("#closeoutPackages");
     
                //.then($("#packageList").data("kendoMobileListView").dataSource.read());
     
                //var newDataPromise = $.ajax(packagesDataSource.read());
                //$("#packageList").data("kendoMobileListView").dataSource.read();
                //var newDataSourcePromise = $.ajax(
                //$("#packageList").data("kendoMobileListView").setDataSource(packagesDataSource);//);
                //$("#packageList").data("kendoMobileListView").dataSource.read();
                //$.when(newDataPromise,newDataSourcePromise).done(function() {
                //var listView = $("#packageList").data("kendoMobileListView");
                //listView.refresh();
                //app.application.navigate("#closeoutPackages");
                //});
                //var listView = $("packageList").data("kendoMobileListView");
                //listView.refresh();
                //app.application.navigate("#closeoutPackages");
     
                //$("#packageList").data("kendoMobileListView").refresh();
                //$("#packageList").data("kendoMobileListView").dataSource.read().then(app.application.navigate("#closeoutPackages"));
     
                //var dataPromise = $.ajax(packagesDataSource.read());
                //$.when(dataPromise).done(function() {
     
                //var listView = $("#packageList").data("kendoMobileListView");
                //listView.refresh();
     
                // });
     
                //app.application.element.find(packageList).data("kendoMobileListView").dataSource.read();
                //$("#packageList").data("kendoMobileListView").dataSource.read();
                //that.set("displayPackagesDataSource", packagesDataSource);
                //app.application.navigate("#closeoutPackages");
                //app.application.element.find(closeoutPackages).find(packageList).data("kendoMobileListView").refresh();
                //$("#listView").data("kendoMobileListView").setDataSource(bar);
     
            }
        });
     
        function read(db, callback) {
            db.transaction(function(tx) {
                tx.executeSql('select projects.* from project', [], function(tx, result) {
                    callback(toArray(result));
                }, app.onerror);
            });
        }
     
        function readPackages(db, siteId, callback) {
            db.transaction(function(tx) {
                tx.executeSql('select package_instances.id, packages.id as package_id, packages.name, packages.naming_convention from packages join package_instances on (package_instances.package_id = packages.id) where package_instances.object_table = "projects" and package_instances.object_id = ?', [siteId], function(tx, result) {
                    callback(toArray(result));
                }, app.onerror);
            });
        }
     
        function toArray(result) {
            var length = result.rows.length;
            var data = new Array(length);
            for (var i = 0; i < length; i++) {
                data[i] = $.extend({}, result.rows.item(i));
            }
            return data;
        }
     
     
        app.closeoutViewHelperService = {
            viewModel : new CloseoutFormsViewModel()
        };
     
    })(window, jQuery);
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 23 Apr 2014 Link to this post

    Hello Peter,

    The code looks ok in general; the only issue I can see is that you are calling the goToSite in the onclick handler of the link. Apart from being slow, this is not reliable on touch devices. A reliable alternative in this case would be to use view parameters instead; check out how the sushi app implements a similar pattern. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. fired
    fired avatar
    3 posts
    Member since:
    Mar 2014

    Posted 23 Apr 2014 in reply to Petyo Link to this post

    Hi Petyo - Thank you for your response. This is very helpful information, I actually tried that navigation approach but I couldn't figure out how to use a view parameter that is a dynamic template variable. For example, I know I can do:

    <a data-icon="site" href="#closeoutPackages?siteName=name?siteId=id">

    But in the context of a template, I can't figure out any syntax that works, all attempts have led me to the loader just spinning infinitely. I tried to do something like this:

    <!--sites template-->
    <script type="text/x-kendo-tmpl" id="site-lookup-template">
                 
        <a data-icon="site" href="\\#closeoutPackages?siteName=\#: name \#?siteId=\#: id \#">
          #= name #
        </a>
            
    </script>


    I think you definitely pointed me in the correct direction here, do you know the proper syntax for when it is a template variable that needs to be used as a view parameter?


    Thanks,

    Pete
  4. fired
    fired avatar
    3 posts
    Member since:
    Mar 2014

    Posted 23 Apr 2014 in reply to fired Link to this post

    Hi Petyo - sorry, here is a more accurate example of what I had tried:

    <!--sites template-->
    <script type="text/x-kendo-tmpl" id="site-lookup-template">
                
    <a data-icon="site" href="\\#closeoutPackages?siteName=\#= name&amp;siteId=\#= id \#">
    #= name #
    </a>
                
    </script>
  5. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 24 Apr 2014 Link to this post

    Hello,

    The correct syntax in that case would be:

    <a data-icon="site" href="\#closeoutPackages?siteName=#: name #&siteId=#: id #">

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top