Resources for webinar “Integrating Knockout.js with Kendo UI”

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

On 24^th April 2014 we hosted a webinar on Integrating KendoUI with Knockout.js. Now a days MV* patterns are most used patterns in almost all kind of applications. Knockout.js is one of the most popular library to achieve MVVM in JavaScript based web applications.

Learn more about Knockout.js here

Kendo UI provides complete capability to achieve MVVM. If you use Kendo UI, you don’t need to use any other JavaScript library to create applications based on MVVM or Single Page Application. In this webinar we tried to show you integration between Kendo UI and Knockout.js.

Learn more about Kendo UI here

Find below slides from the webinar,

Find below recording of webinar,

I hope you find this webinar useful.

How to work with Kendo UI Mobile Buttons

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

Learn more about Kendo UI here

In this post we will take a look on working with Kendo UI Mobile buttons and how can we change their icons and styles.

You can create Kendo UI mobile buttons as below,


<a href="#add" data-role="button">Add</a>
 <a href="#home" data-role="button">Home</a>

To create Kendo UI Mobile Button you need to follow following steps,

Create anchor tag
Set data-role as button
Set href as id of the view you want to navigate on click of the button

If you want to call a JavaScript function and execute some code on click of button then you need to set data-click as name of the JavaScript function.


<a data-role="button" data-click="AddFunction">Add</a>
<a href="#home" data-role="button">Home</a>

As you see in above example on click of button Add , JavaScript function AddFunction will be called. Whereas on click of Home button user will be navigated to mobile View with id home.

By default you get buttons rendered as below,

You can put style of buttons as well. For example you can set background colour as below,


<a data-role="button" data-click="AddFunction" style="background-color: green">Add</a>
 <a href="#home" data-role="button" style="background-color: red">Home</a>

You will get buttons rendered on mobile view as below,

There could be scenario in which you need to render different colours of buttons for android and iOS. Let us say you want blue colour for Android and red for iOS. You can do that by setting button styles in CSS as below,


.km-ios .buttonscolor { background-color: green; }
 .km-android .buttonscolor { background-color: red; }

Above we are overriding default style of Kendo UI Mobile Buttons. And set CSS class of buttons as below,


<a data-role="button" data-click="AddFunction" class="buttonscolor">Add</a>
 <a href="#home" data-role="button" class="buttonscolor">Home</a>

You will get buttons rendered on mobile view as below,

You can set icons of buttons as well. Icons can be set by setting data-icon property.


<a data-role="button" data-click="AddFunction" data-icon="add" class="buttonscolor">Add</a>
 <a href="#home" data-role="button" data-icon="home" class="buttonscolor">Home</a>

As you see we set data-icon attribute to add and home respectively. You will get buttons rendered on mobile view as below,

You see there are icons rendered on button now. Kendo UI provides you set of icons out of box to use.

You can use any of above shown icon by setting data-icon attribute. If you want you can create custom icons and set as button icon as well.

Apart from above icons Kendo UI provides you other set of icons as well. You can use them with their Unicode.

Learn more about Fonts here

So let us say you want to use telephone icon as icon of button then you can use that using the Unicode.


.km-upload:after,
 .km-upload:before
 {
 content: "\e009";
 }

And then you can use upload as value of data-icon attribute of button as given below,


<a data-role="button" data-click="AddFunction" data-icon="upload" >Add</a>
 <a href="#home" data-role="button" data-icon="upload">Home</a>

You will get buttons rendered on mobile view as below,

In this way you can take use of Kendo UI Mobile Buttons in your application. I hope you find this poste useful. Thanks for reading.

Learn more about Kendo UI here

How to fetch Data from Telerik Everlive using REST API in a Web Application.

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

Learn more about Kendo UI here

Learn more about Icenium here

In this post we will take a look on fetching data from Telerik Everlive using REST API and use it in a web application. In web app we will be using Kendo UI DataSource to bind data to Kendo UI web ListView.

We are going to learn following,

Fetch data from Telerik Everlive using REST API
Create Kendo DataSource from returned data
Bind data to Kendo UI ListView

Okay so to keep it simple, I have created a simple Content Type Products in Everlive project as below. Permission of this Products content type is set as Public.

To fetch data from Telerik Everlive using REST API, Simply you can fetch data from Icenium Everlive using a AJAX call. You need to provide

URL of the Everlive project with API key
Content type name should be appended in URL. In this case we have appended Products (name of content type) in URL.
Set type as GET
You need to set two callback function. One Callback function will be called on success and another on error.

So data can be fetched using below code. You may want to notice that you need to replace yourapikey in URL with API key for your Everlive project.


$.ajax({
 url: 'http://api.everlive.com/v1/yourapikey/Products',
 type: "GET",
 headers: {
 "Authorization": "Bearer ${AccessToken}"
 },
 success: function (data) {
 BindDataToListView(data);
 },
 error: function (error) {
 alert(JSON.stringify(error));
 }
})

BindDataToListView is callback function and this function will be called on success fetching of data. In this function you need to create Kendo UI DataSource from returned data. Before we do that let us examine what value we get from Everlive server.

You should get below output in browser console,

You can see that in output you are getting count and data in Result property of the returned Object. So you can create Kendo DataSource as follows,

function BindDataToListView(e)
{
 console.log(e);
 var dsource = new kendo.data.DataSource(
 {
 data: e.Result
 });

}

Again in Console log you can view that Kendo DataSource has been created from returned data.

Next we need to create Kendo Template and Kendo ListView. We are going to create a very simple template as follows,


<script type="text/x-kendo-template" id="producttemplate">
 <div>
 <h2>#:ProductName# <br/>
 <h3>#=UnitInStock# #:UnitPrice#</h3>
 </div>
</script>

And to create Kendo ListView create a HTML div as follows,


<div id="listView"></div>

Again let us go back to callback function BindDataToListView() and convert div to Kendo ListView and bind already datasource

function BindDataToListView(e)
{
 console.log(e);
 var dsource = new kendo.data.DataSource(
 {
 data: e.Result
 });
 console.log(dsource);

$("#listView").kendoListView({
 dataSource: dsource,
 template: kendo.template($("#producttemplate").html())
 });

}

This is it. We are setting datasource and template after converting HTML div as Kendo ListView. When you run this web application you should get output as below,

In this way you can fetch data from Telerik Everlive using REST API and use in Kendo UI Web. I hope you find this post useful. Thanks for reading.

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

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

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,

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.

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,

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

How to fix ButtonGroup at the top in KendoUI Mobile View

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

Learn more about Kendo UI here

Recently, I was working on one of the requirement in which I had following widgets in same mobile view.

Kendo UI Mobile ListView
Kendo UI Mobile ButtonGroup

I had to fix position of ButtonGroup always on the top. To explain it more let us suppose there are a ListView and ButtonGroup as given in below image,

I have created above view with following code


<div data-role="view" data-title="Sessions" id="sessionview" data-show="getSessions">

 <ul data-role="buttongroup" data-index="1" data-select="onSelect">
 <li>Day 1</li>
 <li>Day 2</li>
 <li>Day 3</li>
 </ul>

 <ul id="sessionList"
 data-source="sessionDataSource"
 data-endlessscroll="true"
 data-template="sessionTemplate"
 data-role="listview"
 data-style="inset">
 </ul>

</div>

Only problem in above implementation is that, ButtonGroup is not fixed and when you scroll ListView it will scroll with ListView.

Fixing this or rather achieving this is quite simpler, what all you need to do is to put ButtonGroup inside a header. Essentially you need to do following,

Now I have modified implementation as below to achieve ButtonGroup at fixed position


<div data-role="view" data-title="Sessions" id="sessionview" data-show="getSessions">

 <div data-role="header">
 <ul data-role="buttongroup" data-index="1" data-select="onSelect">
 <li>Day 1</li>
 <li>Day 2</li>
 <li>Day 3</li>
 </ul>
 </div>
 <ul id="sessionList"
 data-source="sessionDataSource"
 data-endlessscroll="true"
 data-template="sessionTemplate"
 data-role="listview"
 data-style="inset">
 </ul>

</div>

On running application ButtonGroup is fixed at the top.

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

How to fetch data from Icenium Everlive using KendoUI DataSource

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

Read about Icenium here

Icenium Everlive is Backend as a Service offering from Telerik. In this post we will take a look on how easily KendoUI DataSource can be used to fetch data from Icenium Everlive.

To start with, in Everlive I have created a content type with name Session. In Everlive Content type represents a data type or loosely I can say a table. I have created content type with name Sessions. Now we need to fetch all the items from Sessions content type using Kendo UI DataSource.

Very first we need to add reference of Everlive as below,


<script src="scripts/everlive.all.min.js"></script>

After adding reference create instance of Everlive as below. You need to pass Everlive application key as parameter while creating instance of Everlive. You will find application key on Everlive portal.


var el = new Everlive('W1286lVOH0DXYZ');

Now you will be amazed seeing how easily you can fetch all the items from Session content type using Kendo UI DataSource. Only you need to provide type as everlive and in transport typeName as name of Everlive Content type.


var sessionDataSource = new kendo.data.DataSource({
 type: 'everlive',
 transport: {
 typeName: 'Sessions'
 },
 schema: {
 model: { id: Everlive.idField }
 }

});

While fetching data from Everlive using Kendo UI Data Source, we need to set following

type as everlive
In transport typeName as content type name. You need to provide name of the content type which data items you want to fetch. In this case we want items of Sessions content type so typeName is Sessions

You can verify in any debugger console that data is fetched from Everlive in Kendo UI DataSource.

Now once you have data at the client side you can use them as of your requirement. You can bind that ListView , GridView etc. I hope you find this post useful. Thanks for reading.

Telerik India at PUG DevCon 2013

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

It was 10th Anniversary of India’s one of the most prominent Microsoft User Group and as always Pune User Group did not disappoint. PUG delivered packed two days event with more than 300 attendees and 25 speakers.

More about event here

Telerik loves community and as part of our community engagement, Telerik India team participated in event.

We had a booth for both days and we had great interaction with Pune community. We loved the passion of community and discussion went on the topics ranging from Cross Platform Mobile Apps to Automate Testing. I and Telerik India country manager Abhishek Kant both presented in event.

Mr Kant presented on SPA with Kendo UI and I presented on Backend as a Service with Everlive. We gave away Ninja T-Shirts and one lucky winner got a Karbon Android tablet.

I loved passion being shown my developers around Kendo UI and Icenium .

If you were at the event and want any further discussion or demo, do not hesitate to reach us through our site or send us a mail on Dhananjay.kumar@telerik.com or abhishek.kant@telerik.com

Resources for Webinar “Hybrid Mobile Application Development with cloud based IDE – Icenium”

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

On Jun 25th we conducted a webinar titled “Hybrid Mobile Application Development with Cloud based IDE Icenium”. This is part of an ongoing webinar series we here at Telerik India are doing targeting APAC region. We call this the Telerik .NET Ninja Developer Webinar Series. You can take a look at the Jun-Jul schedule here: https://telerikhelper.net/2013/05/24/telerik-webcasts-june-july/

Get it started with Icenium here

In webinar we discussed following topics,

What is Hybrid Application
Introducing Icenium
Introducing Kendo UI Mobile
Creating Employee Details App on Northwind database
Working with Views , Template , Datasource
Consuming services

Slide Deck

Here is the slide deck which I used for the webinar

Recorded webinar

Here is the recorded webinar

NET Ninja T-Shirt Giveaway:

We select 2 person from the webinar attendees and give away our .NET Ninja T-Shirt in each of our webinars. We have picked up 2 lucky persons in this webinar too. They are:

Jalani S

Nitish Agarwal

Congratulations to the winners. We will be contacting you shortly and we will ship your t-shirts.

Recap of webinar: Building Windows Phone 8 Apps using Kendo UI

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

Download Source Code and Slides from here

On 23^rd May 2013, we at Telerik India hosted a webinar on “Building Windows Phone 8 Apps using Kendo UI Mobile”. This webinar received great response from audience and we had around 150 developers attending webinar. Participants were very active during webinar and there were a flood of questions around Windows Phone 8, Coredova and Kendo UI.

We discussed following topics in webinar,

What is Hybrid App
Why we need Hybrid App
Setting Visual Studio2012 to develop Wp8 apps using coredova
Setting WP8 App project to work with Kendo UI

In demo part we covered following topics,

Creating Kendo Datasource
Consuming OData and REST Srervice in Kendo Datasource
Working with Kendo Template
Working with Layout , Views
Working with dynamic navigation

We learnt and experienced that how easily a developer could work with all complexities such that consuming services, navigating between views, working with layouts rendering native to WP 8, adaptive rendering etc. using Kendo UI Mobile.

If you create a Hybrid App for Windows Phone 8 using KendoUI Mobile and Coredova then with minimal or zero effort you can publish same app as iPhone app and Android App.

You can watch recorded webinar below,

As you can see in recorded webinar that we focused on writing codes and shown you how easily and quickly a Marketplace ready Windows Phone 8 app can be created using Kendo UI.

Download Source Code and Slides from here

You can revisit presentation of webinar below,

If you want us to do webinar on a particular topic related to Telerik products then feel free to send is mail at Dhananjay.kumar@telerik.com

Download Source Code and Slides from here

We had promised that we will be giving away 2 .NET Ninja T-Shirts as a webinar give away.

We normally pick 2 people randomly from the audience and raffle it out. So, as part of this webinar we are happy to say that the following 2 people are winners of our .NET Ninja T-Shirts:

Ramu Naik
Ardhendusekhar Kanungo

Congratulations to the winners. We will be contacting you shortly as we need your postal address to ship your t-shirts. Rest of you folks, don’t worry you still have chance to win the t-shirt. Do attend our next webinar which is on May 30 titled – MVVM and Validation with Kendo UI Web. Register for that webinar here

Download Source Code and Slides from here

Webinar Recap : ASP.NET MVC–Better User Experience with Kendo UI

Posted by Lohith

On Feb 28 we at telerik India hosted a webinar for Asia Pacific Region titled “ASP.NET MVC – Better User Experience with Kendo UI”. This blog post will allow you to get a recap of the same in the form of presentation slide deck and video recording

The webinar was an aim at letting you the user know about Kendo UI Web framework and how Kendo UI can work with ASP.NET MVC and improve the user experience of ASP.NET MVC applications. As you know ASP.NET MVC is a pattern based web application development stack from Microsoft and allows complete control over the mark up that gets generated. This means that there is no server control or control state or view state to maintain. You are left with plain HTML markup to play with.

Kendo UI is a HTML5 based client side JavaScript framework. Kendo UI control supports around 20+ controls which can be instantiated using pure JavaScript coding or using the ASP.NET MVC server side wrappers. With the Server Side wrappers you get the power of JavaScript with productivity of the server. The wrappers make it easy for you and you need not know JavaScript coding at all. The wrapper code makes it easy for you to work with Razor or Webforms engine as it supports both.

Through this webinar – I showcased the use cases of how ASP.NET MVC Wrappers allow you to integrate Kendo UI Web controls with your existing ASP.NET MVC applications and improve the user experience of your apps.

Here is the presentation slide deck used in the webinar:

Asp.net mvc – Better User Experience with Kendo UI from Lohith GN

Here is the video recording of the webinar:

Hope you find this webinar useful and try our Kendo UI ASP.NET MVC Wrappers in your application too.

Till next time – Happy Coding.

Download Slides and Source Code of Webinar Create Hybrid Mobile Application in 1 hour

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

Download Presentation and Source Code from here

How will we connect our local development database to build these apps using Icenium

Icenium is cloud based IDE and it cannot directly connect to SQL Server or any other database. You have three options

Create a service layer over database and work with service in Icenium
Expose data as OData and can work with OData in Icenium.
Icenium allows you to work with HTML5 storage directly.

Does Icenium support Windows Phone?

As of now Icenium does not support Windows Phone. But it is in Roadmap. Read more here

Does Icenium support Enterprise Application Development?

Icenium only allows you to create Cross Platform device applications at this time.

What other datasource can be used other than SQL?

In Hybrid Applications you can use any database. However, you will have to expose operations on database as service. Essentially, you will be consuming Services in the Hybrid Application.

Can we use jQuery mobile instead of Kendo UI Mobile in Icenium?

Yes, you can use jQuery Mobile instead of Kendo UI Mobile in Icenium. To work with jQuery Mobile choose the second project template while creating a new project in Icenium.

Can you show a Login Screen implementation in Icenium ?

You can implement it in the same way you implement Login in any HTML5 based web application. You have two options to authenticate a user:

Call a authentication service
You can authenticate user from data stored from local storage as well.

Can we use ASP.NET WEB API in a Hybrid Application?

Yes you can use Web Api in the same way you consume a WCF REST Service.

How does Icenium Cost?

Until 1^st May Icenium is completely free. Find more pricing details here

What is role of PhoneGap Here?

Icenium uses Phonegap (aka Apache Cordova) to build and package applications for various platforms.

Can we use SharePoint as Datasource ?

In SharePoint 2010 and onwards you get OData feed of SharePoint lists. You can use them to create Kendo Data source.

Can we work collaboratively on Icenium?

Yes, you can. You can invite collaborators by right -clicking on project and choosing the option for Version Control.

Can we directly deploy on device?

Yes, you can directly deploy on multiple devices.

Can we use Camera in Icenium ?

Yes, you can access camera on Icenium using Phonegap API to access Camera.

Once again, I thank you for attending the webinar. If you have any question feel free to reach me at Dhananjay.kumar@telerik.com . For update follow @icenium and @kendoui on twitter.

Create Hybrid Mobile Application in 1 hour: Join the webinar on 21st February at 3pm IST

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

Telerik India is conducting a webinar on “Hybrid Mobile Application Development “on 21^st February 2013 from 3pm to 4 pm IST.

Would you like to create a mobile application that can run on most of the mobile application platforms? From the same codebase?

Gone are the days when one had to write different codes in different languages for different mobile platforms. Now a days developers are more inclined to write Cross Platform Mobile Applications or Hybrid Mobile Application. An application written using web technologies like HTML, JavaScript and deployed on multiple platforms without changing any codebase is known as Hybrid Mobile Application.

Webinar details are here,

Title: Hybrid Mobile Application Development

Date: 21^st February 2013

Time: 3pm to 4 pm

Presenter: Dhananjay Kumar

This session will focus on various development aspects of Hybrid Mobile Application development. Session will follow step by step approach to create Hybrid Mobile Application. This will be a demo oriented session. In Session demo will be on creating Hybrid Applications like Netflix Movie Explorer and Twitter Search using Telerik JavaScript Hybrid Mobile Application development framework Kendo UI Mobile in Icenium . This session will also touch upon various complexities of building and packaging a hybrid application along with their solution.

Come and learn with us of this amazing capability with the skills you already possess. We will go from nothing to a fully functional mobile app ready for the app store in an hour.

Register Here for the Webinar

How to fetch data of selected item in KendoUI Mobile ListView

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

In this post we will take a look on how to read data value of selected item in KendoUI Mobile ListView. Let us say you have a ListView as given in following image,

As you see that there is button in each ListView item and on click of the button you need to fetch the selected phone number to make a call.

Above ListView can be created as following,


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

<ul data-role="listview"
id="policestationlistview"
data-style="inset"
selectable="true"
data-source="somedata"
data-template="sometemplate"
data-click="somefunction">
</ul>

</div>

In above view

Data source is set to somedata
Data Template is set to sometemplate
Most importantly data-click is set to a JavaScript function

Now in function you can fetch selected item on click event of ListView as following,

In above code snippet phonenumber and name is properties of the array set as the data source of the listview. For your reference datasource is as following. You can see that name and phonenumber are properties of the array used to create datasource.


var dataarray = [

{ name: "Darya Ganj", phonenumber: " 01123274683", group: "CENTRAL" },
{ name: "Kamla Mkt", phonenumber: "01123233743", group: "CENTRAL" },
{ name: "I.P. Estate", phonenumber: "01123318474", group: "WEST" }

];

var somedatasource = new kendo.data.DataSource.create(
{
data: dataarray,
group: "group"
});

</script>

In this way you can fetch data of slecetd itm of KendoUI Mobile ListView. I hope you find this post useful. Thanks for reading.