How to perform various tasks while navigating to/from KendoUI Mobile View in Cross Platform App

Learn more about Kendo UI here

Recently while conversing with one of the customers I came across some of the following queries,

  • How to do some tasks while navigating away from Mobile View
  • How to do some tasks while navigating to a Mobile View

Let us first simplify above queries. Essentially customer wants to call JavaScript functions while navigating to or navigating away from the Mobile View. There could be following combinations of scenarios like following,

  • Perform some task before Mobile View is visible
  • Perform some task after Mobile View is visible
  • Perform some task before Mobile View is hidden
  • Perform some task after Mobile View is hidden
  • Perform some task when Mobile View is visible
  • Perform some task when Mobile View is hidden

Kendo UI Mobile View provides events for all these scenario. As a developer what all you need to do is to call various events associated with Kendo UI Mobile View. Various events with their purpose is depicted in below image,

image

Now let us consider example that you need to perform a task before Kendo UI Mobile view is getting visible. You can do that by setting data-before-show attribute of Mobile View. In below image we are setting data-before-show property to a function with name myfunct.

image

Now each time before homeview (id of the view in example is set to homeview) will be navigated or get visible a function myfunct will be called. In the same way you can set other events as attributes to achieve a particular task while navigating to or away from view. Let us consider one more example that you want to achieve a task after view is hidden. In that scenario you need to set data-hide attribute of the view. We can achieve that as given in following image,

image

In this way you can set events as attributes to achieve any tasks while navigating to and from a Mobile View. Below I am putting codes from above discussion,


<div id="homeview"
 data-role="view"
 data-title="Mobile View"
 data-before-show="myfunct"
 data-hide="myfunct1" >

 <h1>Mobile View Contnet</h1>

 </div>

<script>
 function myfunct() {

alert("Called before View is Visible");
 console.log("Called before View is Visible");
 }
 function myfunct1() {

alert("Called after View is Hiden");
 console.log("Called after View is Hiden");
 }
 </script>

I hope you find this post useful. Thanks for reading.

Learn more about Kendo UI here

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s