Completed one Year at Telerik

I am happy to share with each one of you that I have completed 1 year working for esteem organization Telerik

image

 

I joined Telerik on 2nd July 2012 as their second employee in India. Journey from Developer to Evangelist has been exciting so far. As part of my job responsibility I focused on Mobile and Device technologies along with our Automated Testing tool Test Studio. I mainly focus on evangelizing following products,

  • Dev Tools for WPF , Windows 8 , Windows Phone
  • Icenium
  • Kendo UI
  • Test Studio

I must say I am in love of my job and you can read my blog on Telerik products here and can reach me at Dhananjay.kumar@telerik.com

My organization gave me ample opportunity to help community. Along with my job as part of my community engagement in last 1 year (1st July 2012 to 30th June 2013) I contributed 102 blog posts and spoke /organized in 23 events all across India.

image

 

I am excited for future. I thank each one of your for your support. Committed to help you through blog posts and speaking.

About these ads

First look of Telerik India office

image

Telerik  is a recognized name in the space of developer tools. We make controls that deliver popping user experience and tools to make a normal developer a Ninja!

Once we wondered – where do we find the most Developer Ninja’s in the world? The answer didn’t really require us to be enlightened. So, Telerik India came into being!

I am here with some snaps of Telerik India office. Our office is on Sohna Road, Gurgaon. It is on the 5th floor of Shopper Stop building.

image

image

image

image

image

image

On behalf of Telerik India, I invite you to visit our office and have a technological chit chat over coffee. Trust me our coffee machine‘s coffee is worth trying once

Working with KendoUI Mobile Switch in Four steps

In this post we will learn how to work with KendoUI Mobile ActionSheet in four steps. You can learn more about this here

Switch is in action as following

clip_image001 clip_image002

Let us follow below steps to work with switch.

Step 1

Add all the required references to work with Kendo UI on your page .Make sure you are adding references in Head section of the page


<head>
 <title>
 Working with Switch
 </title>
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css" rel="stylesheet" />
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <!-- Kendo UI Scripts -->
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js" type="text/javascript"></script>
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js" type="text/javascript"></script>

</head>

Step 2

Next we need to create a main view on the page and initialize the page to be used as page of mobile application. For this just above closing body tag add following script

<script>
var app = new kendo.mobile.Application($(document.body), {
initial: "mainview"
});
</script>
</body>

You will notice that we have set initial view property. So let us go ahead and create a view with the id mainview

<div data-role="view" id="mainview" >

</div>

By this step we have added all the required references and created the main view to put Switch inside that.

Step 3

Now we can put a Mobile Switch as following


<div data-role="view" id="mainview" >
<input type="checkbox" data-role="switch" />
</div>

Only you need to provide value of data-role attribute as switch of checkbox element. Suppose we want to check this on click event of a button. For that let us put a button in the maindiv . On click of button we will check whether switch is on or off.

After adding button div will be as following


<div data-role="view" id="mainview" >
<input type="checkbox" data-role="switch" id="onoffswitch" />
 <a data-role="button" data-click="checkSwitchState">Check Switch State</a>
</div>

And on click of button function checkSwitchState is being called. See the data-role property of button. Now let us write checkSwitchState function.


<script>
 function checkSwitchState() {
 var switch1 = $("#onoffswitch").data("kendoMobileSwitch");
 var checked = switch1.check();
 alert(checked);
}
</script>

You can Toggle the button as following,


<script>
 function checkSwitchState() {
 var switch1 = $("#onoffswitch").data("kendoMobileSwitch");

 switch1.toggle();

}
</script>

Now let us stop for a moment and run the page to see how it works

image

image

On click event of the button, switch will be toggled and we will get alert on the state of the switch.

image

And on clicking Ok switch will be toggled.

image

Below you can find full source code of above discussions.

<!DOCTYPE html>
<html>
<head>
 <title>
 Sharing on Social Media
 </title>
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css" rel="stylesheet" />
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <!-- Kendo UI Scripts -->
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js" type="text/javascript"></script>
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js" type="text/javascript"></script>

</head>
<script>
 function checkSwitchState() {
 var switch1 = $("#onoffswitch").data("kendoMobileSwitch");
 var checked = switch1.check();
 alert(checked);
 switch1.toggle();
 }
</script>

<body>
<div data-role="view" id="mainview" >
<input type="checkbox" data-role="switch" id="onoffswitch" />
 <a data-role="button" data-click="checkSwitchState">Check Switch State</a>
</div>
<script>
 var app = new kendo.mobile.Application($(document.body), {
 initial: "mainview"
 });
</script>
</body>
</html>

Step 4

Sometime you may want to fire an event when user is changing state of the switch. You can do that as following


$("#onoffswitch").data("kendoMobileSwitch").bind("change", function (e) {
 console.log(e.checked); // true or false
 alert(e.checked);
 });

In this way we can work with Switch in KendoUI Mobile in four steps. I hope you find this post useful. Any comment is welcome.