ListView does not always display data

[Mark]

I am having some issues with a listView.  I am populating it with information, I have each listView Item clickable to another screen to edit the item.  But sometimes when I navigate back, the listView shows no data at all.  When I debug my code I can see that data is being returned every single time and the listView is being re-bound.  The data is also displayed in the HTML markup of my page, so I know it returned it.

Here is a copy of the code I am using along with some screen shots.

WidgetListView.prototype.initView = function (initEvent) {
    var thisClass = this;
    //Grab data
    thisClass.listView = new kendo.data.DataSource({
        transport: {
            read: $.ajax({
                type: "POST",
                url: thisClass.loadEndpoint,                            
                contentType: 'application/json; charset=utf-8',
                dataType: "json",
                headers: { 'x-sauthcode': localStorage["authCode"] },
                data: JSON.stringify(
                    thisClass.loadEndpointData()                        
                ),
                success: function (result, status) {

                    thisClass.viewModel.set("data", result);   //this part here always has data even if the listView does not display it

                    if (result.length > 0) {
                        //prepare Data if needed
                        thisClass.prepareDataEvent(result);             

                        ///bind the listView to element ID
                        $(thisClass.listViewId).kendoMobileListView({
                            dataSource: thisClass.viewModel.get("data"),
                            //bind template ID
                            template: $(thisClass.templateId).text(), 
                            click: function (e) {
                                thisClass.clickEvent(e);
                            }
                        });
                        //Do post data checks
                        thisClass.postGetEvent(result);                 

                    } else {
                        //console.log(noResultsMsg);
                        thisClass.noResultsEvent(thisClass.noResultsMsg);
                    }
                },
                error: function (error) {
                    console.log(error);
                    //Handle Errors
                    thisClass.errorEvent();                             
                }
            })
        }
    });
};


Here is my HTML code:
<div data-role="content">
    <ul id="historyList" data-role="listview" data-style="inset" data-template="historyTemplate"></ul>
</div>

My Template:
<script type="script/x-kendo-template" id="historyTemplate">
    <div class="listViewItem">
        <div id="ListItemRow">
            <div id="ListItemLabel">Status:</div>
            <div id="ListItemValue">#: (Status != null) ? Status : ''  # &nbsp;</div>
        </div>
        <div id="ListItemRow">
            <div id="ListItemLabel">Date:</div>
            <div id="ListItemValue">#: (StatusDate != null) ? dateFormat(StatusDate, "m/d/yyyy", true) : ''  # &nbsp;</div>
        </div>
        <div id="ListItemRow">
            <div id="ListItemLabel">Modified:</div>
            <div id="ListItemValue">#: (ModifiedBy != null) ? ModifiedBy : ''  # &nbsp;</div>
        </div>
    </div>
</script>



any help to why the list binds most of the time but sometimes randomly does not, even though data was returned the HTML would be great.  Thanks for the help!

[Mark]

I forgot the pictures, so here they are.

[Kiril Nikolov]

Hi Mark,

The problem comes from the fact that you are initializing the Kendo UI Mobile ListView component more than once. As you can see in your data-is-in-html screenshot, you have 3 div elements with class km-listview-wrapper (widget is initialized with data-role attributes and JavaScript init as well). When you initialize the widget more than once, behavior like the one you describe is expected. 

Regards,
Kiril Nikolov
Telerik

[Mark]

Thanks for the quick response! I have since removed the data-role and all other data attributes from my html code so that it is now:
 <ul id="idhere"></ul>

We still seem to have to problem of the data only showing sometimes.  Is it possible that because I am binding the listview in the success function of the init method that it is messing it up?  Should this only be done in the showView?

[Kiril Nikolov]

Hi Mark,

I am not aware of the logic in your project, but I guess the success function is called more than once in your application lifecycle, so it is possible that you are still initializing the widget more than once. Please inspect your code and make sure that you initialize the widget only once.

I would suggest you to use the data-init event of the view to initialize the widget, and the setDataSource method, to change the data that the widget uses (if its needed).

Regards,
Kiril Nikolov
Telerik