Kendo UI + NavBar + Scrollview + DataViz

[Iker]

I have recently adquired Kendo UI for developing html5 applications. I have created few examples with success but I'm stuck with few examples.

I would like to get the following structure for the website skelethon:

• 3 NavBar

• Kendo UI or Jquery Scrollview plugin inside the content(picture,text,etc) of each Navbar (2 or 3 left/right scrollable pages)

• I would like to add inside the content of the scrollview page a pie chart, datapicker and few mote stuff.

Not sure how I should manage to create all of this or which libraries I should include in the project
I have tried several times without success.

I would really appreciate any help.

Best regards

[Alexander Valchev]

Hi Iker,

I cannot understand the scenario that you described. The NavBar is usually used inside the header and shows the current view title in the center, as well as some additional left and right aligned buttons. I would not recommend including 3 NavBars in a single View. Could you please provide an example that shows the application layout that you would like to create?

Regarding second part of your post, Kendo Chart and datepicker are part of KendoUI DataViz and KendoUI Web. If you want to use them in your application you should include kendo.all.min.js combined script. For more information please check the JavaScript dependencies help topic.

In addition make sure to initialize the widgets at the init event of the corresponding View.

I hope this information will help.

Kind regards,
Alexander Valchev
the Telerik team

[Iker]

Hi Alexander,

First of all, I would like to thank you for taking part of your time to answer my question.

I'm not very keen on HTML5 or JS but I would like to get a similar Layout like the Android and Iphone "Toshl" finance application.

e.g: I would like to get the following:

1) 3 Navigation tabs (Let's say Expenses, Incomes, Settings)
2)  I choose the Expenses tab
3)  Inside Expenses tab there should be a scrollview with two or more pages
4) In one of the scrollable page there should be the list of the expenses and when you move you finger to the right to another page of the scrollview I would like to see the expenses Pie char.
5) The same for the Income tab.

I have already posted some code but not sure if it's working properly as I wanted

I would really appreciate any help

Best regards and have a nice day

[Alexander Valchev]

Hello Iker,

Thank you for the example.

To build your application you can use:

1. TabStrip for the navigation (demo).
2. ScrollView widget (demo).
3. ListView widget (demo).
4. A View to display the chart (include kendo.all.min.js and initialize the chart at the init event of the view).

The sample that you provided in your first post does not contain TabStrip, ListView or view with a Chart widget. Please review carefully the demos as well as the Getting started topics of the corresponding widgets and their API reference. 

Regards,
Alexander Valchev
the Telerik team