Nested Listview Kendo UI Mobile

[Akshay]

Can we have Nested list view using Kendo UI Mobile ? Pointers to example would be really helpful.
For instance if i have a json as shown below then 
1st -> I should have a list with "Drinks" and "Snacks" as Item
2nd -> If "Drinks" is selected then I should have list with "Water" and "Soda" Items with "Drinks" button to navigate back
3rd -> If "Water" is selected I should have a list with "Still" and "Sparkling" Items with "water" button to navigate back
 
{
       items: [

            {
                text: 'Drinks',
                items: [
                    {
                        text: 'Water',
                        items: [
                            { text: 'Still', leaf: true },
                            { text: 'Sparkling', leaf: true }
                        ]
                    },
                    { text: 'Soda', leaf: true }
                ]
            },
            {
                text: 'Snacks',
                items: [
                    { text: 'Nuts', leaf: true },
                    { text: 'Pretzels', leaf: true },
                    { text: 'Wasabi Peas', leaf: true  }
                ]
            }
        ]
    }

[Alexander Valchev]

Hello Akshay,

Thank you for contacting us.

The functionality that you are looking for is not supported out of the box, because the ListView widget cannot work with hierarchical data as the one you provided. As a workaround I can suggest you to use separate ListView widgets and filter their DataSource.

To demonstrate the solution I prepared a code library project. You can download it from here. There is a version with local and remote data. I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team

[Akshay]

Thanks for the Response Alexander.

[yuva]

Hello Alexander ,

   In above sample for say, if i get in to detailed view of 'Sparkling',is there any way to view the detailed view of 'Still' if i swipe left and if swipe right from 'Still' will it come to 'Sparkling'?

[Alexander Valchev]

Hello Yuva,

This navigation pattern is not provided out of the box by the mobile application.
If you would like to achieve it you can use the swipe event of Kendo Touch component.

• http://docs.kendoui.com/api/mobile/touch#events-swipe
  
  

Please note that this might interfere with swipe gestures in Safari for iOS 7. For more information on the subject you may check the following article:

• http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review (search for "gestures")
  
  

Regards,
Alexander Valchev
Telerik

[Mike]

Do you have another link to this solution?  The link in the response marked 'Answer' is not valid.  

[Petyo]

Hello Mike,

the thread is fairly old. We now have a demo which showcases this.

Regards,
Petyo
Telerik

 

 

[Mike]

Well what I really needed was to show hierarchical data inside list views.  I ended up using nested angular repeat statements to accomplish what I needed since I couldn't find any kendo examples.

http://www.bennadel.com/blog/2456-grouping-nested-ngrepeat-lists-in-angularjs.htm​

[Petyo]

Hello Mike,

the mobile listview supports 1 level hierarchy, also known as grouped mode (we have several examples of that). For more levels, the approach you have taken is a valid one. 

Regards,
Petyo
Telerik