Resources from webinar Node.js development using Visual Studio

On Jan 23 2014 we conducted the webinar on “Node.js development using Visual Studio”. This blog post will provide you some of the resources from the webinar like Slide Deck, Video recording of the webinar and source codes used in the demo.

Download source code and slide from webinar here

Node.js

Node.js is asynchronous event driven server side JavaScript. It is written in C++ and runs on Google V8 engine. Servers created using Node are high at performance and scalable. It perform File, DB and IO operations in non-blocking way.

Learn more about Node.js here

Slide Deck

Here is the slide deck from the webinar:

Video

As with every webinar, we have recorded this one too. Here is the video recording of the webinar for your leisure viewing

Download source code and slide from webinar here

T-Shirt Give Away

Every webinar we give away two .NET Ninja T-Shirts which have become quite popular among developers. In this webinar we have selected the following 2 persons to receive our t-shirt.

  • Ishitva Goel
  • Ramesh Pyru

Congratulations to the winners. We will contact you on the email address you have provided to us. We will ship the t-shirt to your address.

Thanks for attending webinar.

Download source code and slide from webinar here

Advertisements

Resources for webinar “Achieve Responsive Web Applications with Ease using Kendo UI”

On Jan 16 2014 we conducted the very first webinar of 2014 titled “Achieve Responsive Web Application with Ease using Kendo UI”. This blog post will provide you some of the resources from the webinar like Slide Deck, Video recording of the webinar and lastly the Q&A section.

Responsive Web Design:

Responsive Web Design or RWD as it is known as, is an interesting topic in the landscape of modern day web application development. With the proliferation of mobile phones and tablets, your web page is seen not just in one screen i.e. Desktop Browser but also in Mobile Browsers and Tablet Browsers. Because of the screen size or form factor differences, it is important for your as a app developer to provide the right experience across the form factors. So in this webinar we looked at how Kendo UI is responsive and how you can build responsive screens using Kendo UI.

image

Slide Deck:

Here is the slide deck from the webinar:

Video:

As with every webinar, we have recorded this one too. Here is the video recording of the webinar for your leisure viewing:

Questions & Answers:

There was a lot of questions asked during this webinar. we were able to answer some of them during the live webinar. Here is the complete list of questions and answers to those questions:

Q: can we mix azure mobile services Apis with kendo?
A: Absolutely. Kendo UI is a client side framework. You can use it with any backend.

Q: can we integrate with Silverlight?
A: Sorry, Silverlight is a very different framework. Kendo UI is a HTML 5 framework.

Q: We have existing clients having content added in tables , can we make existing content responsive using CSS?
A: Yes. Kendo Grid provides adaptive layouts as well.

Q: Is Kendo UI necessary to develop responsive web design?
A: No not necessary. It is a framework that enables writing web applications to deliver responsive design much easier.

Q: What is the difference between Kendo UI and other similar services like Sencha?
A: Kendo UI is an HTML 5 framework for the web, mobile and data visualizations. I am not as knowledgeable about Sencha but it could be just a mobile development framework.

Q: Is it necessary to use visual studio or we can use other IDE also?
A: Any IDE can be used – Eclipse, Sublime or simply notepad 🙂

Q: Required to import Kendo UI framework/library in projects?
A: yes. that’s what gives the functionality of being responsive.

Q: Does Kendo do any polyfill ?
A: Yes. We do polyfilling under the hood. We sniff the browser and see if it supports HTML5. If not we polyfill. This is pertaining only Kendo UI controls and behaviors only.

Q: When we design a responsive web design application, is it like we wont see horizontal scroll bar?
A: Horizontal scroll bars are not considered good usability. So, responsive design avoid having them.

Q: For Kendo UI .net framework required?
A: No. Kendo UI doesn’t require .NET framework.

Q: Can Kendo UI be used with android as well?
A: Kendo UI Mobile controls can be used to create cross platform hybrid mobile applications.

Q: How does the old browsers behave with Media queries?
A: While some polyfill is available, Kendo does require modern browsers with HTML5 support to function correctly. We support IE7+, FF, Chrome and other major browsers.

Q: Does all the controls in Kendo are responsive in nature, or not?
A: Yes, they are. And then there are adaptive layouts for Grid etc.

Q: Can Kendo UI be used with android as well?
A: Yes. We have a specific module for mobile applications – Kendo UI mobile. http://www.kendoui.com/mobile.aspx

Q: How will be the performance of Kendo UI control?
A: We have optimized Kendo UI for extremely fast performance. In our studies it may be perform a lot better than some other frameworks.

Q: Is Kendo UI based on twitter bootstrap?
A: No. We have out of the box 11 themes that we ship. We have also released a Kendo UI Twitter Bootstrap theme and with this theme all our widgets will look and feel like a bootstrap scheme.

Q: Is it light weight?
A: yes, this framework is very light weight with option to assemble only the functionality that you require (reducing the size even further)

Q: Is it mandatory to know HTML5 in order to use Kendo UI?
A: yes, Kendo UI is based on HTML 5 capabilities.

Q: Is it compatible with Windows phone too?
A: Kendo UI Web controls are supported on latest and greatest browsers which support HTML5. We also have Kendo UI Mobile controls which can be used to develop cross platform hybrid mobile apps. Kendo UI Mobile are supported on all major Mobile OS.

Q: Is there any difference between ASP.NET MVC Kedo UI controls and simple Kendo UI controls?
A: The functionality is the same in both. The programming model is different. Kendo UI needs JS programming while MVC controls are programmed with Razor syntax.

Q: Can we use Kendo UI with Asp.Net MVC 4?
A: Yes. We support MVC 3+.

Q: Kendo UI is browser specific?
A: Nope. Just requires a HTML 5 enabled browser.

Q: I’m using fusionchart component for data visualization.. i want to make it responsive as my app works on iPad and desktop.. is it possible with Kendo?
A: Yes. You can use Kendo DataViz for the same. http://www.kendoui.com/dataviz.aspx

Q: can we integrate with PHP site?
A: Absolutely. There is specific wrapper for PHP as well that will allow you to continue to write PHP code. http://www.kendoui.com/server-wrappers/php.aspx

Q: Can we use Kendo UI in xcode?
A: Kendo UI is a web framework. You would be building native app with XCOde. In that case, you can use Kendo in a WebView only.

Q: How can we customize Kendo Ui to adapt style sheet css from our web application, Requirement is Kendo ui controls use the web site theme ?
A: You can use our themebuilder to customize the stylesheet instead of using the theme we ship. Take a look at our theme builder here: http://demos.kendoui.com/themebuilder/web.html

Q: can we create custom controls using Keno UI?
A: Yes. We support plugin architecture. So you can create a custom plugin and use it as a Kendo UI Widget.

Q: Is all Kendo UI controls are responsive?
A: Yes.

Q: Can Kendo UI be used with PhoneGap?
A: Yes. The specific control set for mobiles is Kendo UI mobile: http://www.kendoui.com/mobile.aspx

Q: What is right database connectivity for developing browser application using Kendo UI
A: You will need to develop a server side application that spits out REST based JSON data. In .NET, you can use WebAPI or WCF Data Services.

Q: Can we use Kendo UI in java?
A: YEs you can. We also support JSP based coding via Kendo UI wrapper for JSP. http://www.kendoui.com/server-wrappers/jsp.aspx

Q: is there any drag and drop control in Kendo UI?
A: You can check out our Drag & Drop demos here http://demos.kendoui.com/web/dragdrop/index.html

T-Shirt Give Away:

Every webinar we give away two .NET Ninja T-Shirts which have become quite popular among developers. In this webinar we have selected the following 2 persons to receive our t-shirt.

  • Dhiraj Gautame
  • Tejendra Chaturvedi

Congratulations to the winners. We will contact you on the email address you have provided to us. We will ship the t-shirt to your address. Others don’t feel bad. There are plenty of webinars to come. So keep participating and try your luck next time

Happy Coding!

How to work with Kendo UI Mobile Buttons

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,

image

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,

image

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,

image

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,

image

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

image

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,

image

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

Kendo UI Grid Wrapper for ASP.NET MVC – Getting Started

Overview:

In this blog post I will be exploring how to get started with our Kendo UI Grid Wrapper for ASP.NET MVC. We will take a basic usage of displaying data in a grid format in an ASP.NET MVC view. To know more about Kendo UI Web controls head over to www.kendoui.com. If you want to follow along with this blog post, you can do so by downloading a 30 day free trial of Kendo UI Complete for ASP.NET MVC.

Getting Started:

First lets create a ASP.NET MVC project. I am using Visual Studio 2012. When you install Kendo UI, we also install certain project templates which make it easy to create kendo UI based ASP.NET MVC project. I assuming you have installed Kendo UI Web for the rest of the post. In Visual Studio, select File > New Project > Web > Kendo UI for ASP.NET MVC. Give it a name and wait for Visual Studio to spin up the new project.

Datasource:

For the sake of this blog post, I will be using Northwind database. I will also be using ADO.NET Entity Model to Northwind database and use Customers table data. So go ahead and add a ADO.NET Entity Model to your project. We will use the entity data model to fetch data and bind it to the grid. I have also created a CustomerViewModel so that I can use this as the Model to the view. Here is the code for the CustomerViewModel:


public class CustomerViewModel
{
public string CustomerID { get; set; }
public string CompanyName { get; set; }
public string ContactName { get; set; }
public string ContactTitle { get; set; }
public string Country { get; set; }
}

Home Controller & Index Action method changes:

We will read the customers data, build CustomerViewModel list and add this to view as a Model. Here is the Index Action method code snippet:


public ActionResult Index()
{
var customerViewModelList = GetCustomers();
return View(customerViewModelList);
}

GetCustomers is a helper method which converts Customers entity to CustomerViewModel entity and return a list. Here is the code snippet of GetCustomers method:


private IEnumerable<CustomerViewModel> GetCustomers()
{
var context = new NORTHWINDEntities();
var customers = context.Customers.Select(customer => new CustomerViewModel
{
CustomerID = customer.CustomerID,
CompanyName = customer.CompanyName,
ContactName = customer.ContactName,
ContactTitle = customer.ContactTitle,
Country = customer.Country,
});
return customers;
}

Adding Grid to View:

In order to use a grid on a view, you will use the GridBuilder. GridBuilder supports the following overloaded methods for creating the grid:


public virtual GridBuilder<T> Grid<T>() where T : class;

public virtual GridBuilder<DataRowView> Grid(DataTable dataSource);

public virtual GridBuilder<DataRowView> Grid(DataView dataSource);

public virtual GridBuilder<T> Grid<T>(IEnumerable<T> dataSource) where T : class;

public virtual GridBuilder<T> Grid<T>(string dataSourceViewDataKey) where T : class;

in this blog post we will be using the method where it allows us to pass a IEnumerable as the data source. First lets take a look at the code snippet. Following the snippet I will explain the code in detail:


@using GridGettingStarted.Models
@model IEnumerable<CustomerViewModel>
@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(c => c.ContactName).Width(140);
columns.Bound(c => c.ContactTitle).Width(190);
columns.Bound(c => c.CompanyName);
columns.Bound(c => c.Country).Width(110);
})
.Pageable()
.Sortable()
.Groupable()
.Filterable()
)

Well that’s all it takes to create a grid in MVC. Now lets go over the code in detail.

  • We pass the Model which is IEnumerable<CustomerViewModel> in this case to the GridBuilder
  • All widgets in Kendo UI needs to be named, so we provide a name using the Name() method
  • We define columns of the grid using the Columns() method. We can provide lambda expression to indicate which columns should be bound
  • In order to allow paging on the grid, we just add the Pageable() method
  • Sorting on the grid is enabled by adding the Sorting() method
  • Grouping is enabled by adding the Groupable() method
  • Similarly, filtering is provided by adding the Filterable() method

Now build the project and run the application. Following is the output of the code we just wrote:

image

Server Operation False:

At this moment if you click on a pager link or try to sort or try to group, Kendo UI Grid will be default send a request back to Server. That’s the default behavior that the grid works with. It assumes that Server would like to perform operation before getting the data. In this scenario that is not intended for me. I have got all the data that I need and I have given it to the grid. So it should do all the operation at client side rather than sending a request to server. For this to happen we just need to let the Grid DataSource not to perform server operation. This can be done by setting the Grid DataSource setting as  below:


@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(c => c.ContactName).Width(140);
columns.Bound(c => c.ContactTitle).Width(190);
columns.Bound(c => c.CompanyName);
columns.Bound(c => c.Country).Width(110);
})
.Pageable()
.Sortable()
.Groupable()
.Filterable()
.DataSource(source => source
.Ajax()
.ServerOperation(false)
)
)

now when you run the project and perform any operations, grid will not send a request to the server but do it client side.

Conclusion:

This blog post was like a primer to anybody who would like to get started with Kendo UI Grid Wrapper for ASP.NET MVC. With just 15 lines of settings you will have a full fledged grid in your app within no time. If you are interested in Kendo UI Grid, do download a 30 day free trial at www.kendoui.com.

The New Year e-learning goodies are rolling

Colored-GoodiesA Very Happy New Year to you! 2014 is expected to be a good year for IT industry that is still recovering from the slow down in 2013.

Forrester is forecasting good IT growth in 2014 with focus on mobile, cloud and analytics. What this means for development teams is the need for new skills to cater to the hungry business users. I called the business users “hungry” for a specific reason. The business users are now demanding consumer grade experiences on multiple devices as they have become accustomed to the great user experience they offer. This hunger will need to be satiated by the development teams of today.

Telerik is ready to help you take on these new challenges with new products and services in the new year.

In addition, we are happy to share our learnings with you so that you can deliver the experiences that your customers want.

Check out the list of webinars we have in store for you for Jan – Feb ‘14:

Date Time (Indian Time) Topic
Jan-16 3:00 – 4:00 PM Achieve Responsive Web Applications with ease using Kendo UI
Jan-23 3:00 – 4:00 PM NodeJS with Visual Studio
Jan-30 3:00 – 4:00 PM Scaffolding in One ASP.NET
Feb-13 3:00 – 4:00 PM Kendo Mobile UI – Tips and Tricks
Feb-20 3:00 – 4:00 PM Mobile & Web Services testing with Test Studio
Feb-27 3:00 – 4:00 PM Take your reports to any screen with Telerik Reporting

Register for free by clicking on the webinars, you would like to attend. We will remind you of the upcoming webinar a day prior to the event.

By popular demand, we will continue to give out Telerik Ninja T-Shirts to the top 2 engaged attendees during the webinar.

Now, aren’t the celebrations continuing after the New Year?

Delivering Telerik awesomeness in your mailbox

Telerik tools work on the cutting edge of ever changing technology. This means we work on a lot of new things that can be shared. Keeping abreast of these changes may be a challenge for anyone. Wouldn’t it be great if there was a simple way of keeping track of what’s new from Telerik?

Telerik publishes monthly newsletters that make brings the summary of the latest in your mailbox. If you have trialled any  product from Telerik or downloaded a free product, you may still not be subscribed to the newsletters. This is strictly sent on an “opt-in” basis to avoid any unintentional spamming.

Here’s how you can subscribe to the Telerik newsletters:

  • Login to your Telerik a/c. (create a new one for free if you don’t have one)

image

image

  • Browse to Profile –> Update Email Subscriptions

image

  • Choose the newsletter(s) that you want to subscribe to and click on Apply Changes

image

  • Add newsletters@telerik.com to your safe sender’s list
  • The newsletters will drop in your mailbox when they are ready

Stay awesome in 2014!