This is a migrated thread and some comments may be shown as answers.

Nested Listview Kendo UI Mobile

8 Answers 122 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Akshay
Top achievements
Rank 1
Akshay asked on 30 Jan 2013, 06:07 PM
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  }
                ]
            }
        ]
    }

8 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 01 Feb 2013, 02:42 PM
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
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'?
0
Alexander Valchev
Telerik team
answered on 09 Dec 2013, 08:44 AM
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.
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:

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
Petyo
Telerik team
answered on 17 Jul 2015, 06:55 AM
Hello Mike,

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
Petyo
Telerik team
answered on 20 Jul 2015, 06:36 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
General Discussions
Asked by
Akshay
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Akshay
Top achievements
Rank 1
yuva
Top achievements
Rank 1
Mike
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or