How to properly rebuild a list view with different parameters?

[Yohann]

Hello,

I have a list view that can display, depending on the user behavior, different sets of results. One simply has to click on a button to trigger a JS event that will retrieve the appropriated data.

Basically, I have a very simple listview in my homepage.html:

<div id="mainContainer">
    <ul id="list-container">
    </ul>
</div>

on which I attache a listview with jQuery:

$.when( Event.getEventsNearby( position.coords.latitude, position.coords.longitude, radius, limit, offset, key ) ).done( function( response )
    {
            var template = Handlebars.compile( $( '#eventListTemplate' ).html() );
            $("#list-container").kendoMobileListView({
                template : template,
                dataSource: kendo.data.DataSource.create(results)
            });
    } );

And when a user needs other results, I repeat this process again. For instance:

$.when( User.getUsersNearby( position.coords.latitude, position.coords.longitude, Usr_radius, Usr_limit, Usr_offset ) ).done( function( response )
    {
            var template = Handlebars.compile( $( '#userListTemplate' ).html() );
            $("#list-container").kendoMobileListView({
                template : template,
                dataSource: kendo.data.DataSource.create( results )
            });
});

And I can see the results I want to be display in the listview. But I've noticed 2 things:

1 - If the previous list was longer than the new one, the user can get "stuck" at the bottom of the list where no results are displayed. I would like to have the listview to automatically scroll to the top.

2 - I have the feeling I'm adding a list view in within the list view when looking at my html in the code inspector, after clicking to different buttons with the same puropose (only the content is different, as well as the structure of the results received from my servers) I have the list view appended inside the previous one:

See the screenshot.

Can you help me fixing those 2 issues ?
Many thanks

[Kiril Nikolov]

Hello Yohann,

First of all thank you very much for your interest in Kendo UI Mobile.

I can see that you are creating multiple ListViews using the same container which is not support and can cause the issues that you mention. This is why in such cases (changing the data of the ListView) we strongly recommend using the build-in setDataSource() method. This method basically changes the ListView's data with the newly created dataSource. An other approach will be to use the destroy() method of the ListView and then initialize the ListView again using the new dataSource. All these methods are reference in the following API documentation article:

http://docs.telerik.com/kendo-ui/api/mobile/listview

The same is valid for all the Kendo UI Widgets and the application as well - more than one initialization of a widget or mobile application is not supported/recommended. 

I hope this information will be helpful, but if you have any questions, please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik

[Yohann]

Thank you,

I was re reading this post and one question came in mind:

What if I have a list view in my home page + a list view in the drawer menu + a scroll view in some view 2 others in 2 differents views. All in the same page (it's not refreshing the page from a view to another) and rebuilt depending on the data the user needs. When you say :

"The same is valid for all the Kendo UI Widgets and the application as well - more than one initialization of a widget or mobile application is not supported/recommended. "

I am wondering if I should really remove the widget every time a user leave the page ?

What is the best practice for this ?

Thank you

[Kiril Nikolov]

Hi Yohann,

There is no problem to have more than one widgets of a certain type in your application. Just you need to use separate containers and not initialize the same widget more than once for one container. 

If this is not the question you are asking, please elaborate a bit more, so I can better understand your scenario.

Regards,
Kiril Nikolov
Telerik

 

 

[Yohann]

Sorry for being unclear, but yes that was my question.

i can have the same widget in different views in withing the same page and it's fine if it is not in the same container.

What do you mean by container ? A div for instance ?

[Kiril Nikolov]

Hi Yohann,

By container I mean the HTML element that is used to instantiate the Kendo UI widget on. For example the Kendo UI Mobile ListView should be instantiated from a <ul> element - so this elements is the container that I am referring to.

Regards,
Kiril Nikolov
Telerik