Telerik blogs

Our 2013 Q2 release is almost here, and we are giving you a sneak peek!  Our beta is now available for download from your Telerik account.  This is our most aggressive release yet for Windows 8 HTML, and builds on the momentum created with the 2012 Q1 release.

In this release we are introducing three new controls, significant updates to our flagship RadDataGrid, Pan and Zoom in the RadCharts, and support for cascading selections when using the AutoComplete, DropDownList, and ComboBox text boxes.  You can see all of this and more in our newly redesigned Samples Demos, available through the Windows Store.

Interested in TypeScript support?  You asked for it, you got it! All of our controls now have TypeScript definitions for static typing support and full IntelliSense.

The last goodie of the release is our CTP of our Data Storage for Windows 8 HTML, making offline and occasionally connected applications easier than ever!

The full release notes can be found here.

New Controls

Calendar

Ever wanted a better and more intuitive way of selecting dates? That’s what RadCalendar will enable you to do. While the DatePicker is extremely useful when you simply need to select dates, the RadCalendar will let you choose a date in a month view. Every single element of the control has been carefully thought for the Windows 8 touch environment so that users can easily select dates, navigate fast between months, years, decades or even centuries.  An example showing two RadCalendars working in conjunction with each other to facilitate a hotel check in/check out process is shown in Figure 1.

image

Figure 1 – Check In/Check Out

The RadCalendar includes the capability for adding clear indications about special dates, like national holidays, events, and other icons that enhance your users’ experience with your application. Some examples are shown in Figure 2.

image

Figure 2 – Special Indicators

TokenInput

RadTokenInput will enable your end-users to search and select items from a pre-defined range in a way that they’re used to in many modern applications, especially those for social media and photo sharing. Selected items can be conveniently removed by tapping the “x” (close) button displayed in each of the selected items. Additionally, the control can consume remote data, filter the items as the user types and be customized to your very own liking.  An example is shown in Figure 3.

image
Figure 3 – Customized TokenInput control

Sparklines

Sparklines allow for lightweight and fast visualization of data in a meaningful way. The 2013 Q2 release adds six Sparkline types - line, column, bar, area, bullet and pie. Sparklines are great when you need to embed a sales trend or other KPIs in your dashboard.  Figure 4 shows a variety of Sparklines in a RadGrid.

image
Figure 4 – Sparklines in a RadGrid

New Features and Improvements

Grid Editing

We’ve continued to enhance our flagship Enterprise control, the RadGrid, by adding editing capabilities.  Optimized for touch and fully supporting keyboard and mouse actions as well, your users can insert, update and delete their data right in the RadDataGrid itself. In place editing of data in the RadDataGrid is built into the control, so you don’t need to do any complicated event handling or UI manipulation to give your users an excellent experience right out of the box.  Additionally, the RadDataGrid has a rich API for programmatic manipulation. You users can update cell values, delete rows, insert new rows and handle any CRUD operation.  Figure 5 shows in place editing of a data row.

image
Figure 5 – Row Editing in the RadDataGrid

Editing can also be contained at the cell level, as shown in Figure 6.

image

Figure 6 – Cell Editing

Pan and Zoom for Charts

With the latest version of RadChart your users can easily zoom and pan the chart area.  Figure 7 shows the charts zoomed out, Figure 8 shows the chart zoomed in after pinching (or scrolling with the mouse).

image

Figure 7 – Zoomed Out Chart

image

Figure 8 – Zoomed In Chart

Cascade Support for DropDownList and ComboBox

With the new Cascading feature you can easily implement cascading drop-down controls, where the selection in one drop-down will limit the available options in the others.  The example in Figure 9 shows cascading DropDownList boxes that continually narrow the selection of athletes for the user. 

image

Figure 9 – Cascading Selections

New Sample Demos Design

With the Q2 Beta release we’re launching brand new versions of our demo applications that will be available in the Windows Store. All of the source code for the Sample Demos is also installed locally when you install the RadControls for Windows 8 HTML. The UI and the overall experience have been significantly improved to enable you to easily learn and navigate through all the features and controls that are included in the RadControls for Windows 8 bundle.  The application was written with the full time involvement of our designers in order to set a new high standard for Windows 8 modern apps.

image

Figure 10 – Updated Sample Demos

The detail pages have been improved as well, as shown in Figure 11.  The NavBar contains navigation links to all of the related topics.  The AppBar still has the option to view the code that comprises the current example, but also enables the user to pin the specific example to the start page. Finally, there is a command to display more descriptive information about the sample.

image

Figure 11 – Enhanced detail pages

TypeScript Support

RadControls for Windows 8 HTML now provide TypeScript definitions by supporting static typing and API IntelliSense for all RadControls and utility classes. The declarations are built against TypeScript v0.8.3.1.  Although TypeScript is still considered an alpha product, we are committed the user of TypeScript with our RadControls for Windows 8 HTML, and will continue to evolve the TypeScript support in lock step with the changes of TypeScript itself.  The TypeScript definition files for RadControls for Windows 8 HTMLare located in %installdirectory%js (for the default location, this equates to “C:\Program Files (x86)\Telerik\RadControls for Windows 8 HTML Q2 2013\js”.

A simple example of using TypeScript to create a calendar control is shown in Listing 1.

/// <reference path="../ts/winjs.d.ts" /> 
/// <reference path="../ts/telerik.d.ts" /> 
var element = document.createElement("myCalendar");
var calendar = new Telerik.UI.RadCalendar(element);
calendar.footer.enabled = false;

Listing 1 – Creating a calendar control in code

NOTE: In order to take full advantage of TypeScript in Visual Studio, please download the TypeScript Editor from http://www.typescriptlang.org/#Download.  You can need to install WebEssentials from the Visual Studio Gallery to gain even more support for TypeScript in Visual Studio 2012. Finally, you will need to grab winjs.d.ts and winrt.d.ts from the typescript source and include those in your project.

Data Storage for Windows 8 HTML CTP

Create data driven applications with ease and save all important data locally on any Windows 8 (WinRT) mobile device with the new DataLayer component. Your app will be capable to operate and store data while offline without the need to implement your own storage engine and data serialization design.

Leveraging the rich native JavaScript API and building upon common standards (SQLite), the DataLayer will easily enable you to perform any basic CRUD operation.   Some example CRUD operations are shown in Listing 2.  Look for a more detailed blog post on the Data Storage for Windows 8 HTML coming soon!

function deleteData(table, value) { 
 var db = Telerik.Data.Database.open("BikesStore_DB_HTML"); 
   db.remove(table, value); 
 return db.sync().then(function () { 
      db.close(); 
   }); 
}  
function insertData(table, value) { 
 var db = Telerik.Data.Database.open("BikesStore_DB_HTML"); 
   db.insert(table, value); 
 return db.sync().then(function () { 
      db.close(); 
   }); 
} 
function updateData(table, value) { 
 var db = Telerik.Data.Database.open("BikesStore_DB_HTML"); 
   db.update(table, value); 
 return db.sync().then(function () { 
      db.close(); 
   }); 
} 
insertData('BikeType', { id: 1, BikeType: 'Road' });
Listing 2 – Utilizing the Data Storage for HTML

You can download the Data Storage for HTML solution separately under Your Account->Data Storage->Q2 2013 - HTML Data Storage CTP.

Summary

As you can see, the 2013 Q2 release contains an incredible amount of new and improved features.  Designed with the same personality as the native Windows 8 controls, the RadControls for Windows 8 HTML will get your application up and running fast with features that will set it head and shoulders above the competition.  Download it now and give it a spin!

Win8_Download_10_2013_Beta

 

Japikse
About the Author

Phil Japikse

is an international speaker, a Microsoft MVP, ASPInsider, INETA Community Champion, MCSD, CSM/ CSP, and a passionate member of the developer community. Phil has been working with .Net since the first betas, developing software for over 20 years, and heavily involved in the agile community since 2005. Phil also hosts the Hallway Conversations podcast (www.hallwayconversations.com) and serves as the Lead Director for the Cincinnati .Net User’s Group (http://www.cinnug.org). You can follow Phil on twitter via www.twitter.com/skimedic, or read his personal blog at www.skimedic.com/blog.

 

Comments

Comments are disabled in preview mode.