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.
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.
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.
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.
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: 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.
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
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,
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,
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:
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:
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:
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.
A 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:
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)
Browse to Profile –> Update Email Subscriptions
Choose the newsletter(s) that you want to subscribe to and click on Apply Changes
Helping Ninja Technologists 