ListView does not always display data

5 posts, 0 answers
  1. Mark
    Mark avatar
    25 posts
    Member since:
    Dec 2013

    Posted 10 Feb 2014 Link to this post

    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!







  2. Mark
    Mark avatar
    25 posts
    Member since:
    Dec 2013

    Posted 10 Feb 2014 Link to this post

    I forgot the pictures, so here they are.
  3. Kendo UI is VS 2017 Ready
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 11 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Mark
    Mark avatar
    25 posts
    Member since:
    Dec 2013

    Posted 11 Feb 2014 Link to this post

    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?
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 12 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready