Check for duplicate items in Kendo UI ListView before adding the item from Kendo UI AutoComplete

Read full post on Falafel blog

In one of the projects I’m working on, I had a requirement to do the following tasks:

  1. Show a list of items in Kendo UI AutoComplete. It will fetch JSON data from the ASP.NET MVC Action.
  2. Add selected item(s) from Kendo UI AutoComplete to the Kendo UI ListView, while checking if the item already existed in the list. If it does not exist, add the item calling ASP.NET MVC Action or else take no action.
  3. Refresh the data source of Kendo UI ListView locally.

In this post I will show you how to complete the above tasks. First, let us have a look at the ASP.NET MVC Action which returns data in the JSON format as shown below:

Read full post on Falafel blog

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.

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.

Working with KendoUI Mobile ActionSheet 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

ActionSheet in action as below,

image

Let us start creating it by following below steps.

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>
 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>

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 Action Sheet inside that.

Step 3

Now we will add a button. On touch of this event ActionSheet will be open. Let us add button inside the view as following


<div data-role="view" id="mainview" >
 <a data-role="button" data-rel="actionsheet" href="#shareonSocialMediaActionSheet
">Share on Social Media</a>

</div>

If you notice in button attributes we are setting

clip_image002

Step 4

Now we need to add actionsheet on the page. ActionSheet can be created by setting data-role property of <ul> as actionsheet . To create actionsheet there must be at-least one <li> inside <ul>. shareOnsocialmedia actionsheet can be created as following


<ul data-role="actionsheet" id="shareonSocialMediaActionSheet">
 <li><a data-action="functionToShareOnFacebook">Facebook</a></li>
 <li><a data-action="functionToShareOnTwitter">Twitter</a></li>
 <li><a data-action="functionToShareOnLinkedin">Linkedin</a></li>
 <li><a data-action="functionToShareOnFlickr">Flickr</a></li>
</ul>

Some points about above code is as following

  • There are links <a> inside <li>. data-action attribute of <a> is set to JavaScript function we want call on the tap of the item in actionsheet
  • After execution of the function set in data-action control will returned to calling DOM element.
  • By default a cancel item will get added to the ActionSheet.

Running Application

Let us go ahead and run the application to see ActionSheet in the action.

clip_image001

On touch of this button ActionSheet will open as following

clip_image003

You can see that Cancel item has been added by the framework itself. On tap of cancel control will return to calling DOM element.

Below you can find full source code of above discussion


<!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>

 <script>
 function functionToShareOnFacebook(e) {

 console.log("share on FB");
 }

function functionToShareOnTwitter(e) {
 console.log("share on Twitter");
 }
 function functionToShareOnLinkedin(e) {
 console.log("share on Linkedin");
 }

function functionToShareOnFlickr(e) {
 console.log("share on Flickr");
 }

 </script>

</head>

<body>

<div data-role="view" id="mainview" >
 <a data-role="button" data-rel="actionsheet" href="#shareonSocialMediaActionSheet">Share on Social Media</a>
<ul data-role="actionsheet" id="shareonSocialMediaActionSheet" cancel="hello" >
 <li><a data-action="functionToShareOnFacebook">Facebook</a></li>
 <li><a data-action="functionToShareOnTwitter">Twitter</a></li>
 <li><a data-action="functionToShareOnLinkedin">Linkedin</a></li>
 <li><a data-action="functionToShareOnFlickr">Flickr</a></li>
</ul>
</div>
<script>
 var app = new kendo.mobile.Application($(document.body), {
 initial: "mainview"
 });
</script>
</body>
</html>

In this way you can work with KendoUI Mobile ActionSheet in four steps. I hope you find this post useful. Thanks for reading.