Data-reload transition issue

6 posts, 0 answers
  1. NOON
    NOON avatar
    5 posts
    Member since:
    Aug 2009

    Posted 16 Oct 2014 Link to this post

    Hello, I am using a base layout in which i load remote views. The problem is that each time i use data-reload=true in one of my remote views the transition is not as smooth as when i set data-reload=false. I causes a "flicker" to be shown in android, ios and telerik app builder simulator. Is there a way to avoid this? I prefer to keep my remote views and just use data-reload. My code is something like this
    my main layout

     <!--Layout-->
            <div data-role="layout" data-id="tabstrip-layout" data-show="rebindListView">
                <!--Header-->
                <div data-role="header" >
                    <div data-role="navbar" id="employee-navbar">
                        <a data-align="left" data-role="backbutton">Πίσω</a>
                        <span data-role="view-title" id="navbar"></span>
                        <a data-align="right" data-transition="slide:left" href='#About'>
                            <img src="Images/maternal48.png" style="height:30px;width:auto;" />
                        </a>
                    </div>
                </div>
                <!--Footer-->
                <div data-role="footer">
                    <div data-role="tabstrip">
                        <a href="#tabstrip-Search" data-icon="search">Αναζήτηση</a>
                        <a href="#tabstrip-View" data-icon="contacts" id ="viewChange">Προβολές</a>
                        <a href="#AppoinmentsSearch" data-icon="recents">Ραντεβού</a>
                        <a href="#tabstrip-Sync" data-icon="history">Συγχρονισμος</a>
                    </div>
                </div>
            </div>


    and one of my remote views that uses data-reload

    <div data-role="view" 
         id ="CurrentPreg" 
         data-model="obstModel" 
         data-show = "showSinglePregnancyTitle"
         data-after-show="removeNotNeededObstetricFields" 
    data-reload="true">
        <div data-role="header" >
            <div data-role="navbar" id="SingleCurrentPregNavbar" >
                <a data-align="left" data-role="backbutton">Πίσω</a>
                <span id="CurrentPregnancyTitle">Τρέχουσα εγγυμοσύνη</span>
                <a data-align="right" data-transition="slide:left" href='#About'>
                    <img src="Images/maternal48.png" style="height:30px;width:auto;" />
                </a>
            </div>
        </div>
        <form>
            <ul data-role="listview" data-style="inset">

                <li>
                    <div>
                        <b>LMP</b>
                    </div>
                    <div style="float: left;margin-top:5px" data-bind="text: ObstCase.LMP_Show"></div>
                </li>
            </ul>
        </form>
    </div>












  2. Tsvetina
    Admin
    Tsvetina avatar
    1874 posts

    Posted 21 Oct 2014 Link to this post

    Hello,

    The behavior that you describe is expected, as with each reload, the remote view is read again from the file and rendered again. With disabled reload, the view content is loaded just once and it remains in the page HTML. Is there a specific reason why you want to reload the remote views each time? We may be able to suggest you another approach to achieve your requirement without reloading the views.

    Regards,
    Tsvetina
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  3. NOON
    NOON avatar
    5 posts
    Member since:
    Aug 2009

    Posted 21 Oct 2014 Link to this post

    Hello and thank you for replying to my post. The thing is that i have a listview, with many items and each one has its own details. If i select one of the items and i don't usedata-reload it never reloads the remote view in which i load the item's details. Another way that it's working is the following

    kendo.unbind($("#viewID"));
    kendo.bind($("#viewID,Model);

    If i don't use the above the so it goes like this

    Model= kendo.observable({}); //model that is used by the remote view
    Database.ObstCases.filter("it.ID==" + e.dataItem.ID).forEach(function (item) {
         kendo.unbind($("#CurrentPreg"));
         kendo.bind($("#CurrentPreg"), Model);
         Model.set('null');
         Model.set('ObstCase', item);
    })
    app.navigate("Views/Single/Obstetric/CurrentPregnancy.html", "slide:left");

    So i was wondering if there is another "cleaner" way and i ran into data-reload which works but it's causing the "transition smoothness" issue which i described. 

























  4. Sean
    Sean avatar
    18 posts
    Member since:
    Nov 2010

    Posted 22 Oct 2014 in reply to NOON Link to this post

    I don't use data-reload for any of my views when I need to update a listview.  On the initialise of the view, I run this to bind to the list view:

    var dataSource = new kendo.data.DataSource({
                 transport: {
                        read: function(options){
           //what ever your datasource is
                        }
                    }
               });

       $("#modules").kendoMobileListView({
            dataSource: dataSource,
                    template: $("#presentation-items").html(),
                     style: "inset"
       }); 

    In my data-show I then use:

    var modulesData = $('#modules').data('kendoMobileListView');
    modulesData.dataSource.read();
    modulesData.refresh();

    I can't tell you if it is efficient or not, as I am only new to appbuilder, but so far it has worked, and has worked much faster than the alternates that are out there.

    My app is different, i only use one view to display all of my data, I use the above method to update the listview, but then use html injection to modify the content on the fly by binding to a div.

    Cam.



  5. Tsvetina
    Admin
    Tsvetina avatar
    1874 posts

    Posted 23 Oct 2014 Link to this post

    Hi,

    Sean's suggestion is indeed a more optimized approach - use the show event of the view that you are loading to trigger the logic that updates the data in the view.

    Sean, thank you for sharing your knowledge. A small advice would be to try and remove the following call from your code:

    modulesData.dataSource.read();

    The modulesData.refresh()  line should trigger a read() method call for the dataSource internally. You may be doing two subsequent reads at the moment.

    Regards,
    Tsvetina
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  6. Sean
    Sean avatar
    18 posts
    Member since:
    Nov 2010

    Posted 23 Oct 2014 in reply to Tsvetina Link to this post

    I found it was the reverse, if I commented out modulesData.dataSource.read(), the listview never updated.  But if I left that in and commented out modulesData.refresh(); the listview updated.

    Thanks for the heads up.

Back to Top