Data-reload transition issue

[NOON]

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>

[Tsvetina]

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

 

 

[NOON]

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. 

[Sean]

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.



​

[Tsvetina]

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

 

 

[Sean]

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.

​