Data binding on 2nd visits to view

[David]

Hello,

I could use a bit of advice.

I am working with a listview that has tiered sections. I can click on each branch in the tree to drill down to the next level. It looks like this: 

$("#listview").kendoMobileListView({
    dataSource: data,
    template: kendo.template($("#exampleTemplate").html()),
    click: function (e) {
         // event to handle change in dataSource
         $("#listivew").data("kendoMobileListView").setDataSource(dataSource);
    }
});

This is working - the problem occurs if I revisit a view. If I click through the list, updating the dataSource and showing the new options, I can't go back and choose a different option. If I try, I am met with an "Uncaught TypeError: Cannot read property 'sectionId' of undefined". 

It's a category list with sub-categories underneath. If I click Shoes > Sandals > Flip-Flops everything works, but if I try to go back and change from Flip-Flops to something else, I'm met with the TypeError.

This tells me that the data isn't getting bound to the view when I go back (right?). I currently use onShow() to set up the dataSource. When using onBeforeShow() the list won't update with new data after the first time through, so going back and selecting Hiking Boots instead of Sandals will still show me the results for Sandals.

Is there another method I could use to get this data to show up correctly on subsequent passes through the list?

Thanks!

[Travis]

There are two references that should help. The first is a link to how heirarchies should be done with Kendo datasources and listviews:
Hierarchy
The second is a link to gotchas with kendo mobile, pay particular attention to the section on event order of beforeShow etc.
Gotchas
Lastly you may want to look at the Kendo Music Store example application use of MVVM and Require.js to simplify your code.

[Petyo]

Hi David,

My guess is that you are re-initializing the mobile listview widget multiple times in a show event. Such approach is not supported. I would like to suggest that you examine this code library, which covers a scenario that seems quite similar to your case.

Kind regards,
Petyo
the Telerik team

[David]

Thanks for the tips. 

Are you saying that I cannot have hierarchy structure within one view? I'd like to just update the list to a sub-category on click. This is because some sub-categories have 5-6 categories beneath them, and so on. This is also a random amount for each category, so one sub-category may reach the end after one click, one might have 2-3 more clicks before the end.

So I could have Shoes > Sandals > Flip-Flops (results) or Shoes > Boots > Work > Steel Toe > High Top (results)

Because of this random hierarchy, and the fact that some have many sub-categories, I'd like to keep it all within one view that refreshes. That way I won't have to create a lot of views for each sub-category.

Does that make sense?

[Petyo]

Hi David,

Such scenario can be implemented - the listview items should navigate to the same view but with different parameters. The only trade-off is that the view transition won't be possible (as the view navigates to itself).

Regards,
Petyo
the Telerik team