Conditional Navigation between Views in Kendo UI Mobile

Recently while working with Kendo UI Mobile, I had to navigate from one view to other view inside if else condition. I had scenario, something like following

image

To achieve this, first I tried something like following,

image

In above approach, I was able to navigate to views. However after navigating views were not adhering to the layout set for the application because I was creating new instance of the Application. So certainly this approach was not a suitable solution to go ahead with.

To solve this, you need to navigate on instance which you already created while initializing the html for mobile application. You create something like this on HTML.

image

To navigate conditionally just call navigate function on app. essentially you do not need to recreate instance of application. So if we modify above solution, you do not need first line of the code. Point to be noted here is that app is the variable name we are using while initializing the application on the html.

image

In this way you can navigate to different views from JavScript in KendoUI Mobile. I hope you find this post useful. Thanks for reading.

How to change background of View in Kendo UI Mobile

In this post I will show you how we can put a background color in Kendo UI Mobile view. Let us suppose that we got following view

clip_image001

There may be requirement when you will have to change background color of this view. You can change that using CSS as following

clip_image002

You will have to put this CSS on the page. I hope this post was useful. Thanks for reading

Dynamically Navigating from one View to other in Kendo UI Mobile

While creating application, a very common requirement you may come across is to dynamically navigate from one View to other on basis of some query parameter.

Consider a requirement from below diagram, when you click on a particular session, you need to navigate to session detail view.

image

We can list down the requirement as following

  • We need to fetch Session ID from All Session View and pass it as input parameter to Session Detail view
  • On Session Detail view fetch the data on basis of the Session Id passed from All Session View.
  • Dynamically display Session Detail of a particular Session on Session Detail View.

At very first we need to set the query parameter in Template of All Session View as following. If you notice we are setting Session ID as query parameter in list view link button. On click of the detail button, application will be navigated to SessionDetails view with Session ID as value in query parameter.

image

Next Session Detail View is as below. Data-Show attribute of Session Detail View is set the function sessionDetailsShow. Whenever application will navigate to this view javascript function SessionDetails will be invoked

image

In SessionDetails function view Session ID can be read as following

image

Once you have value of Session ID passed from All Session View on Session Detail view, filter the data source on this Session ID. After fetching filtered data, data can be bind to Session Detail template as following.

image

Above code should be in SessionDetailShow function and you can define Template from Session Detail View as of your requirement

image

This is what all you need to do to do navigate from one view to other with data. I hope this post is useful. Thanks for reading.