List view click stops working when databound more than once

[Cliff Gibson]

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?

[Alexander Valchev]

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

[Cliff Gibson]

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