List view click stops working when databound more than once

3 posts, 1 answers
  1. Answer
    Cliff Gibson
    Cliff Gibson avatar
    45 posts
    Member since:
    Oct 2009

    Posted 21 Mar 2013 Link to this post



    I've got 2 list views on my page...
    <div id="contents" data-role="view" data-title="Contents" data-layout="main-layout">
                <ul id="primaryMenu"></ul>
                <ul id="subMenu"></ul>
    </div>
    and 3 js functions. The first to load the first menu onDeviceReady, the second to load the 2nd list view on click of the first, and the 3rd to load content on click of the 2nd list view.

    function loadMenu()
                {
                    var primaryMenu = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "http://dsdmservices.azurewebsites.net/dsdmRest.svc/GetPrimaryMenu",
                                dataType: "json"
                            }
                        }
                    });
                     
                    primaryMenu.read();
                     
                     
                    $("#primaryMenu").kendoMobileListView({
                        template : "<strong>#:data.MenuTitle#</strong>",
                        dataSource: primaryMenu,
                        click: function(e) {
                             loadSubMenu(e.dataItem.BookMenuID);
                        }
                    });
                     
                     
                }
                 
                function loadSubMenu(bookMenuID)
                {
                    var subMenu = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "http://dsdmservices.azurewebsites.net/dsdmRest.svc/GetSubMenu",
                                dataType: "json",
                                data: {BookMenuID : bookMenuID},
                            }
                        }
                    });
                     
                    subMenu.read();
                     
                    $("#subMenu").kendoMobileListView({
                        template : "<i>#:data.MenuTitle#</i>",
                        dataSource: subMenu,
                        click: function(e) {
                            alert(e.dataItem.ChildCount);
                             
                            if (e.dataItem.ChildCount == 0)
                            {
                                loadContent(e.dataItem.BookMenuID);
                                app.navigate("#content");
                            }
                        }
                    });
                     
                }
                 
                function loadContent(bookMenuID)
                {
                    $.ajax({
                        url: "http://dsdmservices.azurewebsites.net/dsdmRest.svc/GetContent",
                        dataType: "json",
                        data: {
                            BookMenuID: bookMenuID
                        },
                        success: function (data, textStatus, jqXHR) {
                            $('#selectedContent').html(data.Content);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert(jqXHR + ', ' + textStatus + ', ' + errorThrown);
                        }
                    });
                     
                }

    The 1st list view loads OK, and you can click on this as many times as you like and the 2nd list view always loads correctly.

    However the click event of the 2nd list view only works the first time it is loaded, then each time it is refreshed by clicking on the 1st list view the 2nd list view click event stops working...

    Do I need to put something in place to remove the 2nd list view and recreate it?

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 25 Mar 2013 Link to this post

    Hello Cliff,

    I believe that the problem is caused by the multiple initialization of the second ListView widget. Instead of re-initializing the widget each time when the loadSubMenu function is executed, I recommend you to only read its dataSource.

    Read method allows you to pass optional data to the remote service. In this way you would be able to send the bookMenuID parameter with the Ajax request. As soon as the server response is received, the ListView will automatically refresh.

    //initialize widgets at the init event of their View container
     
    function loadSubMenu(bookMenuID) {
        $("#subMenu")
            .data("kendoMobileListView")
            .dataSource
            .read({BookMenuID : bookMenuID});
    }

    I hope this information will help.

    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!
  3. Kendo UI is VS 2017 Ready
  4. Cliff Gibson
    Cliff Gibson avatar
    45 posts
    Member since:
    Oct 2009

    Posted 25 Mar 2013 Link to this post

    Hi

    I got around it by adding:
    $('#divContentSecond').html('<ul id="subSecondMenu"></ul>');
    to the start of the JS and removing the ul from the div containing the menu.

    This appears to work really well, I'll give your method a try too.

    Cheers
    Cliff
Back to Top