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: [
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 }
]
}
]
}
8 Answers, 1 is accepted
0
Accepted
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
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Akshay
Top achievements
Rank 1
answered on 02 Feb 2013, 12:58 PM
Thanks for the Response Alexander.
0

yuva
Top achievements
Rank 1
answered on 09 Dec 2013, 06:35 AM
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'?
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'?
0
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.
Regards,
Alexander Valchev
Telerik
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.
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Mike
Top achievements
Rank 1
answered on 14 Jul 2015, 10:12 PM
Do you have another link to this solution? The link in the response marked 'Answer' is not valid.
0
Hello Mike,
the thread is fairly old. We now have a demo which showcases this.
Regards,
Petyo
Telerik
the thread is fairly old. We now have a demo which showcases this.
Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Mike
Top achievements
Rank 1
answered on 17 Jul 2015, 03:30 PM
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​
0
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
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!