Quantcast
Channel: Telerik Blogs | .NET
Viewing all 1954 articles
Browse latest View live

Telerik UI for WinForms R1 2016 SP1 is Live

$
0
0

The Telerik UI for WinForms R1 2016 SP1 is here, featuring improvements to VirtualGrid and much more. Learn more about the latest upgrades.

With this blog I would like to introduce you to what’s new in the R1 2016 SP1 release of Telerik UI for WinForms. During the past month, we continued to develop further enhancements throughout the suite, and continued to improve and add to our newest control—RadVirtualGrid, which debuted in our
previous release.

Here are some of the highlights in this release.

RadVirtualGrid

  • AutoSizeColumnsMode—With this mode, the grid will size the columns in a way that automatically fills the available real estate, depending on the size of the content it contains.

    Telerik_UI_for_WinForms_Q1_2016_SP1_is_live_001

  • Save/Load layout with flexible serialization API—With the new serialization API, the control’s content can be serialized to a file/stream and then deserialized. This makes it possible to preserve user settings and restore them afterwards. In addition, the API allows for fine grain customization on what should be serialized, providing the opportunity to remove some of the default items being serialized and to add additional ones.
  • Cell and row validation—The CellValidating and RowValidating events provide functionality to validate the cell/row contents. This functionality is also complimented by an error indicator displayed in the indent cell, used to notify the user of a validation error.

    Telerik_UI_for_WinForms_Q1_2016_SP1_is_live_002

  • Right to left support—The control now features RTL support, so it is now enabled for world-wide adoption.

    Telerik_UI_for_WinForms_Q1_2016_SP1_is_live_003

  • Design time improvements—The design time functionality of the control is also improved. With the new Smart Tag, the most common control options are exposed for easier setup.

    Telerik_UI_for_WinForms_Q1_2016_SP1_is_live_004

RadDiagram

RadDiagram’s toolbox now features over 60 predefined shapes and connections. The Basic shapes have been complimented with new ones, and three new categories with shapes and connections have been added—Arrow, Flowchart and Container.

Telerik_UI_for_WinForms_Q1_2016_SP1_is_live_005

RadGroupBox

RadGroupBox's latest addition is support for mnemonics. Prefixing any of the characters in its header text with an ampersand will place an underscore underneath the character, and the prefixed character will play the role of a keyboard shortcut. When executed, this will select the first control in the group box container.

 Telerik_UI_for_WinForms_Q1_2016_SP1_is_live_006


Go ahead and grab this update now—you can get the latest bits from your Telerik account. If you don’t have one, you can also download a trial here.

As always, your comments are most welcome. Feel free to leave a comment below, and you can also use our feedback portal to review and vote for current ideas or share new ones.


Web Mail—A New Demo Application using UI for ASP.NET AJAX

$
0
0

If you use Outlook's Web Access, you know it's convenient to access your email through a web client. With the new "Web Mail" for Telerik UI for ASP.NET AJAX, web access to your mail is now easy. Read on for a quick demo and rundown of the features.

Two weeks ago we covered all the new things we have put up in our latest release of UI for ASP.NET AJAX through a webinar. If you missed that webinar don’t worry, we have you covered. You can watch a recap right here. One of the exciting things in this webinar for me was the new demo application that our team released. We call it "Web Mail" You can take a look at the demo app right now by going here and playing around a bit.

The Plot

You might be thinking “Why Web Mail?” Let me ask you a question: “Do you use Microsoft Outlook?” Dumb question—everybody does. But do you know you can access your Outlook mailbox over web? Microsoft has what is called as Outlook Web Access or OWA—the web access to outlook mailbox which is nothing but a web application.

I work from home. Sometimes I am on my work laptop where I have Outlook Windows client installed and sometimes I am on my personal laptop. On my personal laptop if I have to quickly get to any of my work mail, I just access it through OWA. OWA provides me access to Mail, Calendar, People and Tasks. Here is a screenshot of the OWA interface:

Fig 1: Microsoft Outlook Web Access

What better example than OWA to showcase the potential of our AJAX suite? So let’s take a tour of our Web Mail.

Web Mail Application

If you haven’t taken a look at the demo, this may be a good time to give it a spin and come back. When you access the app you will first land on Mail view. Here's a screenshot of the default look:

 
Fig 2: Web Mail Demo Application

Notice the  icon at the top left hand corner of the page. When clicked this icon will reveal an application-wide menu. The menu will provide links to other views, namely: Contacts, Calendar and Notes. As a user you will be able to easily navigate between any of the views.

Let's continue our tour of the application—just sit back and read on.

Slider Menu

For the web mail demo application, the application-wide navigation is based as a slider. The slider slides in and slides out from the left hand side of the page. You access the slider by clicking the Icon found before the page title. Here is a screenshot of how you access the slider menu:

Web Mail - Slider Menu
Fig 3: Slider Menu in Web Mail Application

Let me tell you a secret: There is no RadSlider in our arsenal.

I was amazed when our team crafted this sexy slider with just a div. Yes, when the page first loads the slider div is hidden. When you click on the menu icon, the slider is made to appear with a set width. The menu items themselves are actually our RadMenu control with Vertical flow & LightWeight rendering. A super simple solution that gives a modern look and feel.

This solution is pretty simple indeed, but let us know in the comments below if you need such an app drawer control as part of the Telerik ASP.NET AJAX suite.

Mail Section

This is the first section of the application. As the name indicates, this section mimics your mailbox. Let me list all the salient portions of this section. We have:

  1. Mailbox Folder listings
  2. Action bar which provides email related actions
  3. Email listing grid
  4. Email preview area

 Visually, the screenshot below will show you the different areas of this section:

Fig 4: Areas in Mailbox Section

The folder listing is provided using our RadTreeView control. The action bar is made using RadNavigation control. The mail listing is based on our ever popular RadGrid. You can group your emails or sort based on any columns displayed. The preview pane is just a div where we output the mail content. You can change how you preview the email. On the action bar we have two icons which let you change the preview area location—below or to the side of the email listing grid.

Just to give you a quick glance of all the supported features in this section, I have created the following GIF:

Web Mail - Mail View
Fig 5: Mail Section Features

Contacts Section

This is the second section in the demo application. As the name says—you can manage your contacts in this section. You can see all of your contacts or favorite contacts or friends or work contacts. One of the features available in this section is the ability to create a new folder to store your contacts. You can create new contacts and while creating save them in one of the folders available (i.e. All/Favorites/Friends/Work/etc.). Searching for contacts by using a search box is also possible. If you ever have a need to export your contacts list to Word/CSV/Excel/PDF there is an Export function available on the action bar.

From a controls perspective we have used RadTreeView, RadNavigation, RadListView and RadSearchBox. Here is a quick glance on what features are available in this section:

WebMail - Contacts View
Fig 6: Contacts Section Features

Calendar Section

The third section in the web mail demo application is the Calendar. I don’t have to explain much here. We make use of our RadCalendar, RadTreeView, RadNavigation, RadScheduler and RadClientExportManager AJAX controls in this section. You can play around to take a look at different features this section provides.

Here is a screenshot of different things you can do in Calendar mode:

Web Mail - Calendar View
Fig 7: Calendar Section Features

Notes Section

This is the last section of the demo application. The Notes section allows you to create quick notes and save them in different categories. You can create different categories to group your notes. You search for notes using the search box. You can select one or more notes and delete them using the delete button available in action bar.

This uses RadTreeView, RadGrid, RadNavigation and RadSearchBox controls. I'll let you play around with Notes yourself to explore these features further.

Get Your Hands Dirty

If you are as excited as I am with this demo application and if you are eager to jump start one of your projects based on this application—you're in luck. We have the complete source code available for this demo application. You can find the download link within the demo application itself, or download it right here. In the demo, look for Download link in the title bar of the app or in the drawer menu:

 

This was our attempt to showcase how, using UI for ASP.NET AJAX, you can build Modern looking, LightWeight and Responsive Web applications without breaking a sweat. Many of the controls used in this demo now support LightWeight rendering and with this you get to lighten your page size.

We look forward to hearing what you all think of this demo application. If you have any comments for us, please do write them below. We look forward to hearing from you soon.

PS: If you like what you are seeing then stay tuned. We will soon be releasing this as a Visual Studio template for you to use in your projects.

Kendo UI R1 2016 Webinar Wrapup

$
0
0

The Kendo UI R1 2016 webinar was a huge event. The recording is now available on YouTube and we've selected the winners of all our great prizes.

Last week we officially took the wraps off of the first major release of Kendo UI for 2016. We had over 4,000 people register for the webinar. In case you missed it, let me give you the TL;DR.

  • Documentation improvements (wave 1)
  • New Dashboard Template
  • Spreadsheet Enhancements
    • Client-Side importing
    • New formula option and improved functions
    • Enhanced export (client-side PDF)
    • Disable cells or ranges of cells
    • Auto-fill
    • A huge new client API
  • Grid Enhancements
    • Excel-like filtering
    • Enhanced filtering
      • Filtering by null/empty values
  • Disabling dates in Calendar Pickers
    • One of our most requested features of all time!
  • Spreadsheet for UI for MVC
  • New VS app templates
  • Update on ASP.NET Core 1 and proposed support for TagHelpers

And lastly, HUGE news about the new version of Kendo UI. More on this in a moment.

Of course, we always record our webinars. Not everyone has the time to watch the entire thing, and webinar technology hasn't quite caught up to where we need it to be yet, meaning it's quite often that people have audio or video issues that prevent them from being able to watch the live event.

For that reason, you can catch last week's event now on YouTube in crystal clear HD. It's like a party for your eyeballs.

Big News About Kendo UI 2.0

Some of the biggest news from the webinar was about the new version of Kendo UI that we are building right now. Internally, we refer to it as "k2", but you can just call it "Kendo UI." It's going to be, wait for it, "Huuuuuuuuggge."

During the latter part of 2015, we noticed a dramatic shift in thinking regarding how to work with the DOM in a web application. For the first time, we saw a push to insert HTML into JavaScript, not the other way around.

This means that the traditional way of selecting and working with elements, the classical model of non-intrusive JavaScript, the common practice of attaching event listeners—all of this changes with the new models brought by React and Angular 2. Whether you agree with this or not, it's happening, and both of these frameworks are really marvelous feats of engineering.

That's why we're completing rebuilding Kendo UI from the ground up as a set of React and Angular 2 components.

But don't worry. The jQuery version of Kendo UI isn't going anywhere, and we've got a lot of features and new widgets planned for it. You only need to adopt React or Angular 2 if those frameworks are right for your team and your project.

Whether you choose jQuery, React or Angular 2, Kendo UI will be there to provide you with the most gorgeous UI for your most gorgeous application ideas.

More Coming Soon!

Soon. Very soon, you will see a new GitHub repo made public and you can track our progress as we recreate Kendo UI core as this new set of components.

We'll be firing up a new community very soon for "k2," and we'll want your ideas and feedback. Make sure you follow the official Kendo UI and Telerik Twitter accounts so you don't miss any details.

Prize Winners

Lastly, the reason you came to this blog post. We love to give away prizes, because we can. If you don't remember, we had three awesome giveaways this time: A 3D Printer, a set of Lego Mindstorms, and a Roku 4.

Mindstorms Winner


lego mindstorms

First off, we picked the best question asked during the Q&A to win the Lego Mindstorms EV3 kit. That prize goes to Jason Maronge. His question was on point. Here it is:

Q: Our company is just beginning to convert our Silverlight app to HTML. What we have decided to do is to continue the Angular 2 route with using kendo jquery widgets by creating them in the ngAfterViewInit method. Once you start releasing the new Angular 2 controls we will swap them out.

Does anyone at Telerik see anything wrong with this approach? Do you know of any issues we may run into?

A: Our suggestion would be to wait for the first previews of our Kendo UI Angular 2 components (see this blog for reference) and once they are available to start using them in your Angular 2 projects. Since they are going to be built as native Angular 2 components, they won't be compatible with the currently existing jQuery widgets, although the APIs can be similar.

Have in mind that present Kendo UI jQuery widgets and future Kendo UI Angular 2 components can co-exist in Angular 2 apps. Hence you should be able use them temporarily side-by-side and then gradually migrate to Kendo UI for Angular 2 once all replacement components are available.

Great question Jason!

3D Printer Winner

3d printer

We decided to give away a printer to the person with the best feature suggestion, and that was Geoffrey Rodgers. Actually, several people made this suggestion, he was just the first to do so.

Suggestion: Aurelia is not as popular as Angular 2 and React (yet) but is it at least still a focus for the Kendo UI team? It seems like a great framework to support due to its plugin support that other frameworks may eventually incorporate (hopefully).

A: First off, let me say that there are some people on our team that are huge fans of Aurelia (cough Cody cough).

Aurelia is a remarkable application framework. While we would love to build widgets for all of the great libraries out there, we can only focus on the ones that have a large developer groundswell. Right now, that is React, and Angular 2 because of Angular 1.

In the meantime, there is a great open source project for using Kendo UI widgets within Aurelia that we highly suggest you check out. Great stuff from some very talented developers out there.

Roku 4

Lastly, we're giving a Roku 4 to a random person. All you had to do to be eligible to win this prize was to register for the webinar. Our lucky winner is Ron Porteous.

Roku 4

If you were one of our lucky winners, we've got your email address and we'll be in touch soon.

It's Gonna Be Huge

This is a very exciting time for Kendo UI. We reboot our web product about every four ears, and 2016 is that year for Kendo UI.

Congratulations to all of our winners, and thank you for making Kendo UI the best UI framework in the world. It is nothing without the developers who use it to bring their ideas to life.

Telerik UI for WPF and Silverlight R1 2016 SP1 Are Out

$
0
0

The R1 2016 SP1 release for UI for WPF and UI for Silverlight are out and available for download, bringing new features and fixes.

Telerik UI for WPF and UI for Silverlight R1 2016 SP1 releases are now here and ready for you to download. The full release history can be found in the detailed lists for WPF and Silverlight. Below we highlight the most important additions:

Docking

  • Provided a way to access the MainWindow's (or any other Window's) resources in the generated ToolWindow instances
  • Added ToolWindowCreated, PaneGroupCreated and SplitContainerCreated events that are raised when the control's DefaultGeneratedItemsFactory creates elements at runtime
  • Added override for the DockingPanesFactory's CreatePaneForItem() that accepts the RadDocking instance

GridView

  • Optimized GridViewRow/Cell automation API—this change should improve general performance on touch-enabled devices, or other UI Automation environments

PanelBar

  • Added ExpanderStyle property of the RadPanelbarItem for controlling the Style of the Expander path

PDF Viewer

  • Improved memory usage when rendering big images
  • Decreased memory usage when rendering text and graphics

RibbonView

  • RibbonWindow buttons are not consistent with RadWindow in Windows8Touch theme

RichTextBox

  • RTF format provider: Improved compatibility with WordPad and RichTextBox when exporting transparent colors

Spreadsheet

  • Improved the logic for searching formulas in Insert Function dialog

TreeList

  • Improved vertical scrolling performance
  • Optimized GridViewRow/Cell automation API—this change should improve general performance on touch-enabled devices, or other UI Automation environments

Window

  • Added HostCreated event to RadWindow, which is raised after the WindowHost creation

You can download the bits for WPF and Silverlight and give them a spin. Do not forget about our WPF demos and Silverlight demos

If you're curious about what's coming next, be sure to take a look at our roadmap for R2. Last but not least, please feel free to share your comments on our Ideas & Feedback portal.

Improved Responsive Capabilities in UI for ASP.NET AJAX

$
0
0

The Telerik UI for ASP.NET AJAX R1 2016 SP1 release is live, and introduces important changes in the appearance of the ASP.NET AJAX controls. They are now more responsive and flexible for customization.

Font Removal From Almost All Skins

(font, font-size, font-family, font-weight, font-icon, font-style)

We've removed the built-in font settings of the controls and changed their metrics so they inherit their container/page font settings and look better on the screens of today's devices (bigger fonts, padding and so on). And that's not all—we've improved their elasticity and made them more consistent.

These improvements are part of an ongoing initiative to improve the appearance of all Telerik ASP.NET AJAX controls. If you ever experience any trouble with these changes, we'll gladly help you quickly solve them.

Here is a simple example showing how you can set the font size of the page, which will automatically be applied to the controls on it:

body {
    font-size: 14px;
    font-family: "Segoe UI", Arial, Sans-serif;
}

You can see our help article on fonts for more information. Soon we'll also publish a blog post focusing specifically on this new improvement with more details, screenshots and examples.

Other Improvements That Directly Benefit You

  • Stability—a lot of bugs have been fixed, and you can find them in the Release Notes
  • Device Detection Framework—the list of supported devices and browsers has been expanded and updated
  • RadSpreadsheet has been updated:RadSpreadsheet skins
    • The full set of skins is now available and supported
    • Client import from XSLS has been provided
  • The exportation of DOCX and RTF in RadEditor now supports HTML images with relative URLs
  • The "Primary buttons" functionality is now offered by RadFormDecorator

Upgrade Instructions and Helper Tools

You can also meet the new Telerik API Analyzer Tool. It could help you identify all problematic areas in the C# code which you might face during the upgrade process. You can check out this useful blog post for more information on how to upgrade to the latest version in a few easy steps.

Roadmap

If you're curious to learn what major stuff is planned for R2'16, take a look at our planned roadmap. You can also go back and check out our blog post on the topic, where we describe the changes in more detail.

Feedback

Your opinion is always valuable to us. Don't hesitate to share it in the comments below.

Boost Your App Databind Performance With RadClientDataSource

$
0
0

Have you ever dreamed of having the slick and flexible client-side performance in a traditional server-side data bound app? Now we make it a reality.

The R1 2016 release of the Telerik UI for ASP.NET AJAX suite adds an amazing improvement to the RadClientDataSource control.

Now you can hook it up directly to any server-side data source control and it will retrieve data and perform all necessary operations as if the control is using client-side databinding, significantly boosting performance and providing smooth user experience. And all this with just a few easy steps.

Read more below to find how to achieve this.

New Key Feature

The RadClientDataSource has been our main component serving as a provider for client-side capabilities to many of our controls, supporting binding to all kinds of web services. Now we further extend this feature by adding an option to extract data directly from a server-side data source control. No matter if you are using SqlDataSource, EntityDataSource or any other type—the RadClientDataSource can easily bind to any of them and retrieve data seamlessly.

It is a two way integration so performing an operation through the RadClientDataSource will also be immediately reflected on the server as well.


RadClientDataSource

The Setup

The configuration is pretty straightforward and easy. All settings of the new feature are conveniently placed in a new group called DataSourceControlSettings, which contains the following properties:

  • DataSourceID—sets or gets the ID of the server-side DataSource control from which the ClientDataSource will retrieve data
  • DataKeyNames—holds the comma-separated values of the field name used in CRUD operations
  • DataFields—holds comma-separated values of the data field names that would be retrieved from the datasource
  • AllowAutomaticUpdates, AllowAutomaticInserts, AllowAutomaticDeletes—serve to enable CRUD operations in the DataSource control
  • DataMember—specifies the name of the view of the DataSource that will be used when binding

Some of the already existing properties (such as EnableServerFiltering, EnableServerPaging, EnableServersorting) are also applicable in this case. Their function is the same as before—specify whether the particular operation should be performed on the client on entirely on the server.

<telerik:RadClientDataSourcerunat="server"
    ID="RadClientDataSource1"
    AllowPaging="true"
    EnableServerFiltering="true"
    EnableServerPaging="true"
    EnableServerSorting="true">
    <DataSource>
        <DataSourceControlSettings
            DataSourceID="SqlDataSource1"
            DataKeyNames="CategoryID"
            DataFields="CategoryID,CategoryName"
            AllowAutomaticDeletes="true"
            AllowAutomaticUpdates="true"
            AllowAutomaticInserts="true">
        </DataSourceControlSettings>
    </DataSource>
    <Schema>
        <ModelID="CategoryID">
           <telerik:ClientDataSourceModelFieldFieldName="CategoryID"DataType="Number"/>
           <telerik:ClientDataSourceModelFieldFieldName="CategoryName"DataType="String"/>
           <telerik:ClientDataSourceModelFieldFieldName="Description"DataType="String"/>
        </Model>
    </Schema>
</telerik:RadClientDataSource>

 

Behind the Scenes

The secret of the client-side performance capabilities lies within an internal callback request to the server, which returns only the necessary portion of data serialized as JSON back to the client. This allows the standard databinding mechanism of the RadClienDataSource to pick up from there and process the data as necessary, as if it was returned from a call to web service.

If you have enabled server-side operations the control will also send the necessary parameters for paging, filtering or sorting. This will be then passed to the server-side data source control to perform the query to the database. All this happening seamlessly while the user can continue to work with the application.

Unlock Further Optimizations

We believe this new key feature of RadClientDataSource can unlock even more options for optimizations in a classic server-side data bound application by utilizing capabilities only available to a client-side app until now. The simple and easy switch to RadClientDataSource will allow your users to feel the difference right away and enjoy working without unnecessary postbacks.

If this sounds exciting, wait to see what we are going to bring in the upcoming service pack. Along with things like an improved appearance and responsiveness, there'll be full support for CRUD batch operations: any data source, any app—fully client-side! Now, how cool is that?

Eager to try out the latest features? Our demos await you: ClientDataSource—Binding to DataSource Controls. Additional information can also be found in this help topic.

Let us know how you find the new feature of RadClientDataSource in the comments section below.

Visual and Dimension Improvements in UI for ASP.NET AJAX

$
0
0

Learn about the latest enhancements you can enjoy in the appearance and dimensions of the Telerik UI for ASP.NET AJAX controls.

Rich-featured functionality and stability are two essential ingredients when it comes to Telerik UI for ASP.NET AJAX controls development. But when it comes down to it, what attracts users to your application and keeps them coming back is the first impression—the love at first sight.

Visual elements, color scheme, dimension dependencies and more provide a consistent and expressive visual language that guide the user through the layout into the depths of your project. We give the star role to the user in terms of how we manage new technologies and data-driven infrastructures, and aim to create user-centered designed controls.

By using a consistent set of elements and effects, your users will naturally navigate to the areas you want them to, and will complete their goals faster. 

Visual Consistency

Your layout is a complete and synchronized micro-system, and you should carefully choose the interaction method you'll use. For example, one button could be bigger than the others or have a different color when used for a primary action. If it's not intentional, however, inconsistency will disturb and confuse the consumer.

The migration from Classic to Lightweight render mode of Telerik ASP.NET AJAX controls causes some slight visual differences. Classic controls use image sprites for borders with rounded corners, gradients, icons etc., while Lightweight controls take advantage of CSS.

SASS is used for Style Sheet authoring of ASP.NET AJAX themes. To avoid an endless set of colors and inconsistency in theme palettes, skin variables are very precisely reduced or reused with CSS manipulations. Although the improvements result in several visual modifications, the latest generated skins are easier to support and customize with CSS or using the Telerik Theme Builder for ASP.NET AJAX. If you prefer the Classic look, changes can easily be overridden with a CSS rule.

Dimension Improvements

With the introduction of the Lightweight render mode, the performance and flexibility of our ASP.NET AJAX controls increased. Inspired by the most popular frameworks and leading design principles, during the last few releases we followed modern trends and good UI practices, enlarging the dimensions of Telerik AJAX controls.

All dimensions are defined in the base CSS files of each control. Skin specific files provide the visual styles only as color, background-color and border-color. Therefore, in various skins all controls have equal measurements and differ only in colors and shades.

Since the R1 2016 SP1 release we have improved the metrics of AJAX form controls: RadButton, RadInput, RadComboBox and RadDropDownList, etc. The ASP.NET AJAX skin palette is divided into three main categories: Default or Classic skins, Bootstrap skin and the new Material skin. In each of the above there are established interrelated connections between width, height, font size (14px), line height (20px), paddings and borders. A dimension-orientated scheme based on line height and font size ratio is created—1.428571429 (20/14)—that keeps the main proportions of controls consistent with each other, used individually, combined in a complex data form or integrated in composite controls like RadToolbar. By changing just the font size, the layout of the controls can easily be adjusted to fulfill various needs.

The default width of form controls is set to 12em, which can easily be overridden by a CSS rule. The only exception is RadButton and RadFormDecorator Button—their min-width is defined as 64px, which improves the behavior of call-to-action buttons with short content like “OK” and “Save.”

Default Skins

Default skins are all our well-known classic skins, supported through the years: Black, Default, Silk, Glow, all Metro skins, all Office skins, etc. The default height of the controls it set to 30px for a base font size of 14px.

Default Skins

Bootstrap Skin

All metrics in Bootstrap skin are based on the Bootstrap framework requirements and specifications. Our main goal is to be consistent, not only in the UI for ASP.NET AJAX controls environment, but also synchronized with Bootstrap components, used together on one page, in one project. Default height of form controls is set to 34px, when the base font size is set to 14px.

Boostrap Skin

Material Skin

Material design challenged the ASP.NET AJAX team to create a skin identical to Google's visual language and principles. The final result is a skin based on typography, grid, space, scale and color scheme that adheres to Material design guidelines. All form controls are set to a 36px height for a base font size of 14px.

Material Skin

Font Icons

The use of font icons and SVG images has increased in popularity over the last few years. One of the greatest benefits of using font icons is the ability to scale them up and down with ease. However, if we would like to have crisp, sharp images, we need to deal with some technical limitations—especially in small sizes.

Although font icons consist of vector graphics, we should keep in mind that each icon is designed in a fixed pixel grid. A pixel grid is the minimum-scaled canvas in which our icon would look pixel-perfect. Every detail of the icon should be aligned to that grid system. Therefore, the final image-icon will have the best quality when its size equals the base pixel grid size or multiplies it.

If you'd like to use icons with a font size of 16px, 32px or 48px, you should use a font icon design in a base grid canvas scalable to 16x16. If you'd like to use an icon in 14px, 28px or 42px size, the base canvas should be 14x14, etc. So, when one uses a font with a pixel grid base of 16px and sets the font size to 17px, the browser is going to antialiase the semi-transparent pixels and render a blurred image. Have in mind that the bigger the font icon size is, the better quality the image will be.

pixel_grid

Lightweight render mode of Telerik AJAX Controls embedded a Telerik font icon for better optimized performance. It is designed in a 16px grid base, so for best image quality it should be used in a 16-scalable size. In the near future, it will be very easy to change the font size of all embedded icons with a CSS rule.

The only exception is Material skin. It uses a Material Icons font, depicted by Google to correspond to the Material design concept and approach. It is optimized for a 24px base, although Google recommends using it in 18px, 24px, 36px and 48px sizes. The font is included in Telerik.Web.UI assembly and is embedded on the page when the Material skin is in use. As Google updates the Material font icon, we are going to update it regularly as well.

What’s Next

Our main goal is to have all ASP.NET AJAX Controls follow unified measurement guidelines, and adhere to a space system that can easily be customized with CSS and is scalable with font-size settings. We have already started to improve navigation controls dimensions: RadMenu, RadNavigation, RadTabstrip and RadToolbar. Next stop are data management controls: RadGrid, RadTreeList, etc.

We want to hear your feedback—let us know what you think in the comments section below.

What to Expect From Microsoft Build—and Telerik

$
0
0

Wondering what to expect at Microsoft Build 2016? We share some updates and our predictions, and of course we'll be there too—we'll have many demos to show and parties to attend.

Microsoft /build is just a week away and we are still to see the agenda. The show promises nevertheless to be quite exciting, not only in terms of announcements, but in connecting with fellow developers.

Parties, Connections and Mingling

Build has always been great at connecting attendees over drinks, and this year is no different. We'll be attending all of these, but we will have two special events which deserve your attention—feel free to look us up—we'll be the cool guys with the Telerik t-shirts. Here is our party agenda:

Telerik Party—Free Drinks

March 29th, 7:30-10pm at Thirsty Bear Brewing Company
661 Howard Street, San Francisco, CA 94105 (map, add to calendar)

If you are heading to Build 2016, make sure to arrive a day early and join us for a few drinks, on us, just for being awesome. Several Telerik heroes will be there: @JohnBristowe, @Samidip, @NikiAtanasov, @EdCharbeneau and yours truly.

Telerik in the Mixology VII Attendee Party

March 31th, 7:30-11pm at Delarosa
37 Yerba Buena Ln, San Francisco, CA 94103 (map)

As is tradition, the Visual Studio Partner Program team will be organizing this year's Mixology party, and it will be a blast. The setup this year is different (but better) than what we've seen in the past and Telerik will be sponsoring one of the happenings during Mixology. Find us—look for the Kendoka—we just may have some cool swag to give to you!

Telerik Session at /build

Well, /build is a Microsoft show where mostly Microsoft "blue badges" present. We are proud to have been invited to participate in a few sessions—we'd love to see you. Look out for John Bristowe's (@jbristowe) session below:

NativeScript and Visual Studio Code: Together at Last
Yes, you heard it here, folks. You can now write NativeScript-based apps in Visual Studio Code—all through the power of Visual Studio Code's extensibility model. In this session, you'll discover how to build native mobile apps with NativeScript using Visual Studio Code. You'll also learn how the extensibility model works in Visual Studio Code and how you can write an extension yourself!

The Future of Xamarin

A month ago Microsoft acquired Xamarin and promised to share more details as to the Xamarin future during Build and Evolve. Today I'm ready to bet that:

  1. Microsoft will announce its intentions to merge the UWP and Xamarin codebases into a unified framework for targeting Windows 10 (desktop and mobile), Android, iOS, Xbox, IoT, etc. devices with a single C# codebase

  2. Xamarin tooling will become free and will be included in Visual Studio

If you are up for this bet, I'll be at the Telerik Party the day before (see above)—feel free to stop by and chat. Or look me up at the Telerik booth—we'll be happy to show you our UI for Xamarin suite and to discuss all announcements.

UWP, HoloLens, Xbox

The holographic computing age is here, yet we are still to see what HoloLens is capable of. It started shipping in early 2016 and I suspect that Microsoft has a great demo up its sleeve for /build. Technology-wise, I think we'll see an uber-impressive HoloLens app (game?!) built with UWP, running on Xbox and controlled via Cortana.

If you need UWP UI today, stop by the Telerik booth for a UI for UWP demo.

SQL Server Running on Linux

By now it should be obvious that Microsoft is keeping its promise in making its products and new innovations accessible to a broader set of users. Earlier this month Scott Guthrie announced Microsoft's plans to bring SQL Server to Linux. A private preview is out today, but probably we'll see one or two demos of SQL Server running on Linux during the keynote (likely bundled together with Visual Studio Code and .NET Core).

Office 365 Development With Kendo UI

Did you know that if you are part of the Office 365 Developer Program you get Kendo UI for free? Telerik is the official UI partner for Office 365 development and we have a cool demo to show you—just look our booth up and ask for it. We even plan on a few Channel9 videos on the topic shortly after /build.

UI for NativeScript

Last year we announced the preview of UI for NativeScript—a suite of rich and native UI components that add advanced features on top of the default UI components that are shipped with the NativeScript framework. We are expanding the suite with new components and new functionality and we are ready to show you what we are up to if you are at /build.

NativeScript for Visual Studio Code

The NativeScript extension for Visual Studio Code is a great way to accelerate your NativeScript development workflow. With IntelliSense, interactive debugging, conditional breakpoints and device emulation integration, the NativeScript extension for Visual Studio Code provides the most feature complete environment for NativeScript Development. Perhaps the best feature of all, it's free!

If you are into VS code, make sure to go to @JohnBristowe's session on "NativeScript and Visual Studio Code: Together at Last (see above).

.NET Developer News

We know something you don't! Yes, we know what .NET developers plan to do with UWP and what platform their next web app will be on. We will share the news during /build, so make sure to stop by the Telerik booth for the nitty gritty.

See you at /build!

This year's Build Conference promises to be an exciting one. We hope to see you there!

Telerik Kendo UI Q1 2016 is Here

$
0
0
Telerik® Kendo UI® Q1 2016 is all about enhancing productivity and optimizing time-to-market when building any type of app UIs with HTML and JavaScript. Given that a key objective for businesses of any size is to reduce development costs and go to market as fast as possible without sacrificing features and functionality, we focused on this very aspect in our product with the first major Kendo UI release in 2016.

In Q1 2016 you will find new app templates and productivity enhancements in Kendo UI, a breadth of new Spreadsheet features and the widget itself going from Beta to RTM. There's also new grid filtering capabilities, ASP.NET 5 and MVC6 RC1 support and much more. Furthermore, we are unveiling our existing and continuing work to support the next versions of Angular 2, as we've already been pioneers with our Angular 2 Alpha support that we announced in Q3'15.

Read on to learn about everything new in the first Kendo UI release in 2016.

Spreadsheet Going RTM

The new Spreadsheet widget, introduced as Beta in Q3’15 and instrumental for a variety of business applications, turns official with Q1 2016, adding a slew of new features to its arsenal. Some of the most notable are as follows:

  • Client-Side Excel Import (from .xlsx files)
  • Many new formula options and improved functions
  • Enhanced export, validation and user input capabilities + customizations
  • Client Export to PDF
  • Ability to disable cells or range
  • Localization Capabilities
  • Auto-Fill/Fill-Down (as in Excel)
  • Vastly expanded client API
and many more.

spreadsheet-rtm

export-import-excel-spreadsheet

This feature set makes the spreadsheet widget ready for prime time, and gives you the essential functionality needed to integrate spreadsheet UI and behaviors in line-of-business applications.

You can see the demos yourself here
.

New Kendo UI App Template (Dashboard) + VS Project Templates

In this release we are shipping a dashboard-like app template for Kendo UI, which helps you cut time by starting from a readily-available boilerplate for building dashboard interfaces. No need to code dataviz UIs from scratch, but rather start from this available app template and customize it in line with your needs.

kendoui-template-dashboard

Moreover, the entire set of Kendo UI App Templates available now is also integrated as Visual Studio Project Templates (including Angular template with grid + details). In this way developers using the Microsoft IDE can choose and customize these templates directly using the Visual Studio UI they are familiar with, thus saving development time and increasing productivity.

Kendo-VSProjectTemplates


Angular 2 State of Affairs + Dashboard App (AngularJS Version)

Kendo UI was among the first to support the Alpha of the next major version (v2) of the AngularJS framework. We are already working to support the Angular 2 Beta, announced by Google in the second half of December 2015. This will require some time as we've chosen to approach this in a radically new way, thus ensuring Kendo UI delivers Angular 2 support inherently, and make the Kendo UI widgets true Angular 2 components. Stay tuned for updates on our progress in the coming months, and in the meantime check this page and this blog post for more info.

On the other hand, we implemented our popular Northwind Dashboard sample app in Angular 1.x, which is the current officially supported Angular framework version. You can see the app here.

angular-dashboard

Grid and Calendar/DatePickers Features

With Q1 we are shipping Excel-like filtering capabilities (with search and checkboxes) as part of the grid column menu. These filtering options are quite intuitive to people who are familiar with MS Excel UI and would like to utilize their skills using web grids.

grid-excel-like-filtering

Additionally, the grid filtering capabilities are enhanced with options to filter by Null/NotNull or IsEmpty/IsNotEmpty values, thus making the filtering patterns you can apply even more flexible.

Moreover, the top requested and long anticipated feature to be able to disable dates in calendar/date pickers is now in place, thus making workaround implementations redundant and saving coding.

calendar-disabled-dates

Documentation Improvements

Staying true to our continuous commitment to improve the Kendo UI documentation, we allocated some time for extending the content and beautifying our online documentation in terms of UX and navigation. This process will advance in incremental steps, and you can already find the results of the first wave of our improvements right here.

ASP.NET MVC Wrappers

ASP.NET 5 RC1 support

To date we are the first major component vendor to support the latest RC1 version of ASP.NET vNext with our Telerik UI for ASP.NET MVC product, going beyond Windows and enabling cross-platform web development on Mac and Linux. Check out this blog and this page for details.

mvc-vnext

Looking forward, we'll work in parallel with MS and plan to announce official support for the RTM version of .NET 5 shortly after it comes out in the first quarter of 2016. We’ll also introduce a set of Tag Helpers, which are the recommended semantic way to define simple UI elements in MVC6. 

Spreadsheet MVC Wrapper Features

The Spreadsheet MVC server wrapper now supports import/export of filters utilizing the Telerik Document Processing Library. In this way you can save or load filters previously applied on the spreadsheet data by your end users.

Is There More?

This is by no means a complete listing of everything new available in Kendo UI's Q1 release. For detailed record about what's shipped in Q1, please refer to the official release log.

I would also like to draw your attention to the fact that Microsoft stopped support for IE browsers prior to IE11 as of January 12th 2016 (see announcement), while still supporting the Enterprise Mode of IE11 going forward indefinitely.

Note that we'll continue to support earlier versions of IE (IE8+) to give you time to migrate to IE11 or Microsoft Edge, and will conform the MS policy to support IE11 (including Enterprise Mode) and MS Edge in the future. If you have any comments or other point of view to share on this issue, please voice it in the comments below.

Release Webinar

Two Kendo UI Webinars presenting the product and what's new in Q1 (for existing and new users) will be held in February and March, respectively. Watch for the official announcement with the exact date and registration information in the coming weeks.

Quick Links

Ready to dive in and get your hands dirty? Follow the links to the demos, documentation and release notes for Kendo UI | UI for ASP.NET MVC | UI for JSP | UI for PHP.
Trial Downloads > Kendo UI | MVC | JSP | PHP.  

Got Feedback?

As a client-driven company, our main objective is to deliver products and tools that optimize the time for building apps and solutions from start to finish. We listen carefully to your feedback to identify areas in which we can improve and enhance our current offerings. I’ll be glad to hear your input and thoughts about this release in the comments section below, and feel free to post your suggestions for new functionality directly to our official feedback portal.

BlogBanner_KendoUI

Get your Apps Modernized for you with UI for ASP.NET AJAX

$
0
0

Everyone wants to work with nice looking web apps and sites, which offer modern and responsive design and capabilities. That’s why about three years ago, driven by this idea, we began a huge initiative to renovate the rendering of the Telerik® UI for ASP.NET AJAX controls by leveraging the modern trends and HTML5/CSS3 technologies to reduce their footprint and ease their customization.

With today’s Q1 2016 release this long journey is over and now you can benefit from the 100% lightweight controls. All you have to do is to set the RenderMode (inline or in the web.config) to “lightweight,” and the controls UI will be rendered with semantic HTML5 and CSS3.

Other nice additions to the release you can take advantage of include the long anticipated Material Design theme and the official launch of Spreadsheet.

Material Design Theme

The new skin inspired by Google’s Material Design guidelines will help you build modern looking web projects, or of course update the look and feel of the controls in your existing apps. It features depth lighting and shadow effects which will make your apps more vivid and interactive.

Material Design Theme

You can directly test the Material skin in the live demos by switching the current skin to Material via the skin chooser, as well as enable it in your projects by updating them to Q1 2016 and setting the Skin property to “Material.”

Spreadsheet (Official)

Among the other highlights, I want to stress the official launch of the spreadsheet. You can benefit from the improved UI, exporting capabilities to PDF and XSLX and enhanced API, along with a bunch of new features such as:

  • New Toolbar implementation
  • Filter and context menus
  • Validation and custom format dialogs
  • Client-side Export to PDF and XSLS
  • Vastly expanded client-side API
  • Ability to disable cells or a range
  • Localization capabilities
  • Auto-Fill/Fill-Down (as in Excel)
Spreadsheet is now official

 

New Label and Standalone Buttons to Aid Your Everyday Development

The long anticipated RadLabel control will allow you to substitute the regular ASP.NET labels in your web apps. The controls features seamless integration with the ASP.NET and Telerik WebForms components, along with a consistent look and feel with the built-in Telerik skins, and a rich server and client-side API for creating various captions for form editors.

You can also try the new standalone PushButton, LinkButon, ImageButton, ToggleButton and CheckBox buttons, which not only perform and look great, but are also fully accessible and easy to configure.

You can find more information about the newly introduced functionality in the release notes. To learn more, you can also register for the upcoming Telerik DevCraft Release Webinar here.

Register for the DevCraft Release Webinar

New Theme and Control plus Much More in UI for WPF Q1 2016

$
0
0

We are very excited to introduce the first official release for this year for Telerik® UI for WPF and UI for Silverlight components—Q1 2016.

This blog post will highlight the most important additions, but all details can be found in the full release notes for WPF and Silverlight.

New Controls

TimeSpanPicker for WPF

In Q1 2016 RadTimeSpanPicker for WPF comes in its official version (it was recently in beta). It is now ready to help you add the ability to pick timespan values in your desktop applications in a fast and elegant way for your users.

Telerik_UI_WPF_TimeSpanPicker

New Themes

Green Theme

The new theme exposes a flat design combined with a green accent. The Green theme brings along two variations—Dark and Light. The integrated corner radius can be adjusted by the user to guarantee a nice and smooth touch to the Telerik WPF controls.

Telerik_UI_WPF_GreenTheme

New Features

Touch Manager

We added a new public API to help you introduce custom touch gestures in your WPF and Silverlight applications.

Telerik-UI-WPF-Touch-Manager

GridView for WPF

Text Search functionality enables string matching over the provided data source. The filtering is available through an interface for matching rows and highlighting the exact occurrences. Complex search conditions and string exclusion are also available.

Telerik-UI-WPF-FullTextSearch

RichTextBox

The ability to repeat the table header row on every page is a very convenient feature for documents with large tables spanning multiple pages.

 Telerik-UI-WPF-RichTextBox

TileList

Multiple Selection in RadTileList supports selecting multiple tiles simultaneously, operating with the whole set at once.

Telerik-UI-WPF-Tile-List

ScheduleView

In the TimeLine view, you can now change the Start and End of the TimeRuler for each day.
Telerik-UI-WPF-ScheduleView-StartEndTime


Don't waste another minute—download the latest bits for WPF and Silverlight and give them a spin. If you want to see some of the new features in action, take a look at our updated WPF and Silverlight demos.

We hope you enjoy the latest updates. If you'd like to share your thoughts you can always reach us through our Forums or through our Ideas & Feedback portal. Don't forget to sign up for the webinar below for a great chance to learn more.

Telerik-DevCraft-Webinar-Q1-2016

Presenting the WPF TouchManager

$
0
0
TouchManager is a tool we've been using internally for a while. Now we're opening up this touch infrastructure up to the public so that you can use it too. This is a quick overview of the Telerik® UI for WPF and UI for Silverlight TouchManager.

Touch is such a huge part of our everyday life now. One can't even imagine an application not running well on a tablet. But in order for an application to be smooth in such an environment, it needs solid touch support. Translating touch events to mouse events and relying only on the previously existing mouse code is not enough. The application requires specific logic and the controls it uses need to be touch aware.

Our WPF controls have been touch aware for a long time now, but it recently occurred to us that our customers may also benefit if they could directly use the same touch infrastructure that we use. And so, I am happy to introduce the TouchManager!

Hello, Touch World!

Simply put, the TouchManager is a static class that makes it easy to attach event handlers to touch gestures such as Tap, Swipe, Pinch, etc. The API is very intuitive—if you want to start listening for Swipe and Pinch, you just need to use the AddSwipeEventHandler method and AddPinchEventHandler method respectively. You can place your code in the event handlers and let the TouchManager decide whether the user is swiping or pinching. When you handle a gesture, say Swipe, make sure to also handle the SwipeStarted and SwipeFinished events to avoid unexpected behavior with nested elements (more details here).

TouchManager.AddSwipeStartedEventHandler(element, element_SwipeStarted);
  TouchManager.AddSwipeEventHandler(element, element_Swipe);
  TouchManager.AddSwipeFinishedEventHandler(element, element_SwipeFinished);

  void element_SwipeStarted(object sender, TouchEventArgs args)
  {
    // initialize some resources

    args.Handled = true;
  }

  void element_Swipe(object sender, TouchEventArgs args)
  {
    // execute swipe

    args.Handled = true;
  }

  void element_SwipeFinished(object sender, TouchEventArgs args)
  {
    // release resources

    args.Handled = true;
  }

You can also attach handlers for the basic events—TouchEnter, TouchDown, TouchMove, TouchUp and TouchLeave. The TouchManager uses these to recognize certain gestures. There are some predefined gestures—tap, tap-hold, tap-hold-release, swipe, pinch, and drag. A part of the TouchManager, namely the GestureManager class, makes it possible for you to implement custom gestures, so if you need a two-finger-swipe gesture, you can easily implement it and plug it into your application.

The TouchManager is actually not a brand new thing. Many of our WPF controls already used it internally, but it is now that we decided to make it public—we realized that if we find it so useful, then you may also find it useful. We have introduced a couple of new properties which can help if you have a ScrollViewer and touch input does not work for elements inside it. The reason the elements won't react well to touch input is that the ScrollViewer captures the touch and handles it, making it the only element receiving touch events. Usually this locking of the touch is due to the PanningMode. If you have access to the ScrollViewer you can use the ScrollViewerSwipeMode property of the TouchManager and set it to Self. If you don't have a convenient way to target the ScrollViewer, you can use a combination of the TouchMode and ScrollViewerSwipeMode properties.

<ListBox.ItemTemplate>
 <DataTemplate>
  <telerik:RadCartesianCharttelerik:TouchManager.TouchMode="Locked"telerik:TouchManager.ScrollViewerSwipeMode="Parent"/>

You can check out a live QSF example that solely uses the TouchManager and you can read more about it in the online documentation. You can learn more about other new updates coming as part of our latest Q1 2016 release, and let us know what you think!

Announcing the Telerik DevCraft R1 2016 Release Webinar

$
0
0

It’s the first day at work after the nice and relaxing holidays. You are fresh and pumped to start the new year right by getting stuff done. But by mid-day, you quickly realize you are back exactly where you left off. The same stringent delivery deadlines and projects with UIs so antiquated that they give you the chills.

Time to chin up—because your beloved Telerik® DevCraft suite is here with the 2016 R1 release. To deliver your software development projects on time and to delight your users, you need awesome tooling. Modern, cutting-edge developer tooling should elevate your development experience and enable you to deliver solutions faster than what you would have envisioned even a few months back. That’s exactly what the latest DevCraft release promises. No matter what your app platform—mobile, web or desktop—this R1 release has something for you.

Come join Telerik Developer Advocates John BristoweEd Charbeneau and myself, Sam Basu on February 3rd for the DevCraft R1 2016 release webinar. We’ll unpack platform-specific functionality to elevate your app development, and provide a developer’s perspective of what’s new in Telerik DevCraft. And we realize you all live in various parts of the world with varying time zones—so we’ll repeat the webinar twice @ 11 AM & 6 PM EST!

Here’s a quick glimpse of what we will cover in the webinar:

Web UI:

  • Official release of spreadsheet components for Kendo UI, UI for ASP.NET AJAX and UI for ASP.NET MVC.
  • Advanced responsive behaviors in UI for ASP.NET AJAX. Make .NET WebForms apps run seamlessly on every mobile device.
  • More templates, sample apps and better documentation for the web UI suites.
  • Support for ASP.NET 5 and MVC6 RC1 enables you to build rich cross-platform ASP.NET apps which run on Linux and Mac.
  • Material Design-inspired theme and brand new Theme Builder for UI for ASP .NET AJAX. Helps you further modernize your application's front-end.

Mobile UI:

  • UI for UWP. The first official release of the UI for UWP suite is here to enhance your Universal Windows Platform apps. A beta of the Grid Control ships with this release.
  • UI for iOS. AutoCompleteTextView becomes official to enable easy search and selection from a list of data, while saving precious mobile screen real estate.
  • UI for Xamarin. Windows Universal (8.1) support for SideDrawer for Xamarin. Forms to enable the SideDrawer to run across all three popular platforms—iOS, Android and Windows Universal.

Desktop UI:

Reporting:

  • Report Sharing. Allows Report Server users to easily share reports with others, plus an improved scheduling logic and integration provision with existing Report Viewers.

Prizes

We really appreciate you taking the time to join the upcoming DevCraft R1 release webinar. But what’s a Telerik webinar without some cool prizes? You are in the running to win a prize just for attending the webinar. Extra cookie points for interactions! We love all your questions during the webinars—please keep them coming. 

Here's the prizes that are up for grabs:

  1. Surface 3: For the best question
  2. Apple Watch: Just for attending

Limited only by official Telerik sweepstakes rules.

Don't Miss the Latest DevCraft Webinar

As you can see, Telerik DevCraft R1 2016 is a packed release, enabling you to focus on feature functionality in your chosen development platform. We can’t wait to show you all the developer goodies that are baked in.

What are you waiting for? Register today and come join us for the DevCraft R1 Release webinar. It’s going to be a great time and we cannot wait to see you there!

Register for the DevCraft Release Webinar

UI for UWP is Officially Here, Bringing DataGrid Beta

$
0
0

As a trusted .NET vendor, we've long been preparing for Windows 10, and now the Telerik® UI for Universal Windows Platform has officially graduated from Beta. Read on to learn about how you can use these powerful features in your Windows 10 app development.

Windows 10 has already been here for about half an year and is showing a great adoption rate, breaking a record in the first month since its release. As a result, Windows 10 now has about 10% of the Operating Systems market share, which is quite good for an Operating System just half a year young. Windows 10 runs on a broad range of devices including phones, tablets, desktops and IoT (like Raspberry PI 2).

Quite expectedly, as a trusted .NET component vendor, since the dawn of Windows 10 we've been getting requests about introducing a suite of controls dedicated to Windows 10. Of course we were prepared for this, so soon after the Windows 10 release we published a CTP of UI for Universal Windows Platform—our suite of Windows 10 components. This was followed by a Beta version in mid-November. And here we are now—announcing the first official release of UI for Universal Windows Platform!

The UI for Universal Windows Platform suite contains nearly all the controls you're used to from our suite for Windows 8.1, UI for WU. Namely, more than 20 great feature-rich and robust controls, including:

  • Chart
    uwp-chart
  • ListView
    uwp-listview
  • Map
    uwp-map
  • SideDrawer
    uwp-sidedrawer

A new addition to UI for UWP as we debut the official release is a Beta of the DataGrid control, which has been optimized for the desktop and tablet form factor.

uwp-datagrid-beta

I am glad to inform you that the official release of the DataGrid will arrive as part of the Q2 2016 release due in the beginning of May. At that time we'll enhance the DataGrid for the phone form factor as well, making it a fully responsive control.

uwp-datagrid-roadmap

The UI for UWP comes in two versions—A Free Trial, and a Paid License:

Free Trial

Core product

With the Trial version you get a fully-functional copy of the product that occasionally displays a Trial message. You can start your Trial now and get the bits from here.

Support

With the Free Trial you get 30-day support in the form of forum threads or support tickets, where you can expect a reply from us in 72 hours from the moment you post your question.

Paid License

Core product

In the Paid version you can expect all you had in the Trial version, but it is free from the Trial message.

Support

Being a customer with a paid license you get access to our forums and support ticketing system, where using the latter will allow you to get a reply from us in 24 hours from the moment you ask your question.

Pricing

You can purchase UI for UWP for $599, or if you are interested in more products from the Telerik portfolio, you may opt to buy a larger DevCraft license that will give you access and support to more than 20 products (depending on the tier). For more information, please check the pricing page.

Source Code

As with the rest of our .NET products, the Paid license gives you access to the source code of the UI for UWP controls.

Demos

A demo application of developer-friendly examples of the code, which you can easily reuse in your applications, will be available soon.

Documentation

The features and API of UI for UWP follows those of UI for WU, so the documentation sets for these two products are stored within a single documentation site. You can explore those here.

UI for WU vs. UI for UWP—The Difference in a Nutshell

UI for Windows Universal is our suite dedicated to Windows 8.1 app development. Although the core of Windows 8.1 and Windows 10 is the same, the surface part is not, so it’s not generally suitable for apps that should run on Windows 10. UI for Universal Windows Platform is the suite for developing Windows 10 apps, and these apps can’t be run on Windows 8.1.

So, what are you waiting for? Go get a Trial and start making your UI for UWP apps now!

Happy coding!

Color Theme Generator is now available for WPF

$
0
0
We're excited to announce that Color Theme Generator for Telerik® UI for WPF is now included with the latest Q1 2016 release.

A while ago we introduced the Color Theme Generator for Silverlight, and since then we've received many requests to convert the application for use on WPF as well. Well, the wait is over—we are glad to announce that the Color Theme Generator application has been migrated to WPF. It's included in the official Q1 2016 release version of Telerik UI for WPF.

Color Theme Generator for WPF

You can find the Color Theme Generator here, or easily launch it from the WPF demos application home screen:
Color Theme Generator for WPF

The Color Theme Generator for WPF supports all of the current Telerik themes with dynamic resources, including the brand new Green theme. In the future we plan to keep it up to date by adding new themes to the application.

Color Theme Generator for WPF

We have included a few predefined palettes for each of the themes, making it easier to choose the right colors for your application.

Color Theme Generator for WPF

The source code of the application can be found in the downloads section of your Telerik account.

Color Theme Generator for WPF

We hope that the Color Theme Generator for WPF will help you to nicely style your application built with Telerik UI for WPF,and make the color selection process a lot easier. If you have ideas for any features you want to see in the application please let us know, either through our Feedback portal or posting a comment below. 

Happy styling :)


What to Expect in 2016 for Kendo UI With Angular 2 and More

$
0
0

Learn what to expect from Kendo UI in 2016 in terms of new development—features, integration with other JavaScript frameworks such as Angular v2 and React, and more.

As my colleague John Bristowe posted recently, Kendo UI and Angular have been a potent duo from quite some time now. We were among the pioneers to support the first version of the Angular framework starting back in 2013, and providing official supported integrations as part of our Kendo UI product from mid-2014 onward.

Angular has been progressively rising since then, with no indication that this is going to change in the foreseeable future. And it is one of the rare examples where an open source framework is so broadly adopted not only by SMBs, but by enterprises too. This can probably be justified by two main reasons:

  1. Angular provides answers to most, if not all, burning questions about client app development and semantically structured code for developers coming from the world of structured languages, such as C#, .NET or Java.

  2. Backed by Google. Provided that there’s a dedicated team of very experienced developers which fuels and drives the Angular train, this strengthens credibility and guarantees this is a supported growing framework which is here to stay, and won’t fade in oblivion as other JavaScript frameworks dominating in the past.

How Will Angular 2 Affect This Picture?

Angular2_logo

Angular 2 is a big step forward for the Angular framework, in terms of revamped and improved core architecture, observer pattern and data binding model, faster performance (up to 10x times in some cases), and concepts for (UI) components. The guys on the Angular team learned their lessons from Angular 1, and made changes accordingly for v2. All this comes with the price of major modifications and breaking changes compared to what we are familiar with in Angular 1.x.

There are also significant efforts from the Angular team focused on improving tooling, documentation and migration experience from Angular 1.x, the latter provisioned by the ng-upgrade and ng-forward Angular projects. 

Presently Angular 2 is in Beta, and has been since the second half of December 2015. There is speculation that the official release is expected to be in 2016, but so far there’s no official statement or evidence from Google about it.

Will Angular 2 be a hit? There are people who believe it will be, and there are others who think it may not be as successful as Angular 1 or other JavaScript frameworks. What is certain though is many developers are already looking into test-driving the new major version of Angular, and will most likely begin to adopt it in production around the end of 2016, or early 2017.

What’s Kendo UI Plan For Angular 2?

KendoUI-Angular

Kendo UI was one of the first major UI frameworks, if not the very first, to announce experimental support for the Angular 2 Preview back in September 2015. When the Angular 2 Beta came out in December of 2015, bringing a fundamental shift in the UI components paradigm, we realized that our experimental support for Angular 2 is no longer relevant, and will lead us to a dead end. That’s why we decided to abandon it and choose a radically new way to approach the Kendo UI integration with Angular 2.

Our ultimate goal is to rebuild the Kendo UI widgets and make them true UI components by the Angular 2 definition, with no jQuery dependency. This would basically result in a new subset of Kendo UI components, tailored to Angular 2, which can be integrated natively into Angular 2 applications.

As you might expect, the process of building Angular 2 UI components from the ground-up will require a considerable amount of time and engineering power to be done right.

  1. First, we’ll start with components essential for building forms and collecting user input, such as dropdowns and comboboxes, calendar, date and time pickers, buttons and so forth.

  2. Then we’ll continue with more complex components for building business UIs such as grid, charts, scheduler, spreadsheet, etc.

  3. Next we’ll invest in creating internal infrastructure for continuous delivery, leveraging the popular NPM channel for package management and distribution. This way we’ll be able to easily publish what’s completed in each of our dev iterations and make it available to you right away.

To make our plan even more transparent, I can disclose some preliminary milestones and ETAs for deliverables with you (have in mind that these are subject to change and by no means final):

May 2016 (1st Wave)

  • Dropdowns
  • Date and Time Pickers
  • Buttons
  • Other Form Widgets (TBD)
  • Tabstrip & Panelbar

September 2016 (2nd Wave)

  • Chart/DataViz Preview
  • Additional Form and Navigation Widgets

End of 2016 (3rd Wave)

  • Chart/DataViz Beta
  • Grid Preview
  • Upload
  • TreeView
  • Other Widgets (TBD)

2017 (4th Wave)

  • Rest of Remaining Kendo UI Widgets

Naturally, the development will be aligned with the current state of Angular 2 and upcoming versions of the framework in 2016, when at some point it is expected to reach RTM stage.

What About Other JavaScript Frameworks?

KendoUI-JS-libraries

We won’t limit our focus on the integration with Angular 2 only. In parallel with the effort for removing the jQuery dependency and putting the basis of our UI components factory, we are also  going to deliver UI components for ReactJS in 2016. The roster for this ReactJS suite will pretty much follow the timeline for Angular 2 specified above, so if we can combine both into one visualization, here’s how it will look like:

KUI2016_Timeline

KUI2016_Timeline_Legend
This undertaking will also open the door for inherent integrations with other JavaScript Frameworks in 2017 and beyond.

How About The Existing Kendo UI Based On jQuery?

Kendokajquery-logo

The existing jQuery-based Kendo UI widgets will continue to get our love (read: new additions) going into 2016. You can expect:

  • Many Major Additions for the Html Editor widget
  • New Features for the Grid, Chart and Spreadsheet
  • Support for Bootstrap 4 and Visual Enhancements
  • More App Templates and New Widgets
  • Support for ASP.NET Core 1.0 RTM in our ASP.NET MVC server wrappers + Tag Helpers

I've highlighted only the biggest goals in our 2016 plan, and there are many other features to be developed which I won’t unveil in this post. Stay tuned for our future roadmap blog posts for further details.

The Path Forward

KendoUI-Path-Forward-2016

A very exciting journey lies ahead of Kendo UI in 2016! We can’t wait to see how the most popular JavaScript and HTML UI library will evolve to conquer new worlds and the hearts of Angular and React developers around the globe. You’re welcome to join us in this journey and open new horizons in front of you for creating amazing experiences for the mobile web!

Thoughts about our mission in 2016? Voice them in the comments section below.

Kendo UI R1 2016 Webinar

$
0
0
It’s 2016, and the first Kendo UI release of the year is upon us. Learn more, ask questions and win prizes at the webinar on February 17 at 11:00 am ET.

The first Kendo UI release of the year is almost here. The free webinar will be on February 17 at 11:00 am ET. Listed below are just a few of the topics that will be covered in the webinar:

  • New Spreadsheet features
  • Updated documentation
  • The new “disable dates” feature for the Calendar and DataPicker widgets
  • Cross platform development and deployment of MVC apps
  • A look at MVC 6 TagHelpers
  • An update on the future of Kendo UI widgets

The webinar will be hosted by Burke Holland, and the topics will be discussed by T.J VanToll, Cody Lindley, Jen Looper, and Ed Charbeneau. Make sure you sign up to attend.

Why Attend the Kendo UI Webinar?

Typically we keep the excitement under wraps until the webinar, but this time we're not going to make you wait. We have some exciting news to share today. In 2016 we’ll start releasing new Kendo UI Angular 2 & React components built from the ground up with no jQuery dependency. This will be the next evolution of Kendo UI. We’ll fill in some more details during the webinar. So attend! Attending will allow you to pepper us with questions at the end.

If finding out about the evolution of Kendo UI and interacting with us isn’t enough to motivate attendance, consider that just by showing up (and living in the U.S.) you could end up winning one of the following prizes:

What you can do Before the Release/Webinar

If you are uninitiated in the ways of a Kendo UI release, allow me to explain what is available for consumption before the official release:

  • Consider watching the previous webinar just to make sure you are already caught up on Kendo UI changes and features.
  • Review the questions and answers from the previous webinar.
  • Read the R1 release blog post, so you have a general idea of what is new in the upcoming release.
  • Take the new Kendo UI code for a test drive in your own code context. If you are an active Kendo UI trial or commercial license holder, you can find the beta bits in your Telerik account for download. Or, if all you need is the minified code, you can pull the pre-release code from the official Kendo UI CDN.

Set a Reminder

Once you’ve signed up for the webinar, open your calendar and block out an hour on February 17th at 11:00 am ET for the webinar. If you do it right now, then you’ll more than likely get automated “jog my memory” reminders from your calendar application, freeing up some valuable brain storage. We hope you'll join us!

Choose Time Intervals with the new RadTimeSpanPicker for WPF

$
0
0

We’ve heard your demands for a time span picker and we’ve answered them. No more using two date time pickers to setup your time intervals. We are happy to introduce the brand new RadTimeSpanPicker.

Default Components

We provide five default time span part components so you can easily set up the time intervals you wish to pick: DayTimeSpanComponent, HourTimeSpanComponent, MinuteTimeSpanComponent, SecondTimeSpanComponent and MillisecondTimeSpanComponent.

Each default component has three properties that determine the values available for picking: Minimum, Maximum and Step. When these properties are set the component’s ItemsSource is populated with decimal values that start from the Minimum value and end with the Maximum value, each time incremented with the Step value.

For example, if we wish to be able to pick intervals of time by day, but no more than 20 days, we should just add a DayTimeSpanComponent to our RadTimeSpanPicker and set its Maximum property:

<telerik:RadTimeSpanPicker>
    <telerik:RadTimeSpanPicker.TimeSpanComponents>
        <telerik:DayTimeSpanComponentMaximum="20"/>
    </telerik:RadTimeSpanPicker.TimeSpanComponents>
</telerik:RadTimeSpanPicker>
DaysComponent

Below you can find a sample definition of a RadTimeSpanPicker:

<telerik:RadTimeSpanPicker  GenerateDefaultComponents="true" />

When we set the GenerateDefaultComponents = true we set up our RadTimeSpanPicker to include three components: one HourTimeSpanComponent, one MinuteTimeSpanComponent and one SecondTimeSpanComponent with their default values for Minimum, Maximum and Step.


DefaultComponents

The five default components make the setup of a regular RadTimeSpanPicker very easy and fast.

Custom StepTimeSpanComponent

However, there might be more custom scenarios that require custom time span components. We’ve provided a way to handle that too.

For example, let’s say we want to be able to pick week intervals. To achieve this we would need to create a custom StepTimeSpanComponentand override its GetTicksForItem() method that returns a TimeSpan as ticks value corresponding to the passed item from the ItemsSource:

publicclassWeekTimeSpanComponent : StepTimeSpanComponentBase
{
    protectedoverrideFreezable CreateInstanceCore()
    {
        returnnewWeekTimeSpanComponent();
    }
 
    publicoverridelongGetTicksFromItem(objectitem)
    {
        if(item != null)
        {
            var ticksForOneUnit = 7;
            decimalselectedItemDecimal;
            if(decimal.TryParse(item.ToString(), outselectedItemDecimal))
            {
                returnTimeSpan.FromDays((double)(ticksForOneUnit * selectedItemDecimal)).Ticks;
            }
        }
 
        return0;
    }
}

Then just add it as component for our RadTimeSpanPicker:

<telerik:RadTimeSpanPicker>
    <telerik:RadTimeSpanPicker.TimeSpanComponents>
        <local:WeekTimeSpanComponentHeader="Weeks"Minimum="1"Maximum="4"Step="1.5"/>
    </telerik:RadTimeSpanPicker.TimeSpanComponents>
</telerik:RadTimeSpanPicker>
WeekComponent

The default components as well as the custom WeekTimeSpanComponentrely on their Minimum, Maximum and Step properties to generate their ItemsSource

Custom TimeSpanComponentBase

However, there might be scenarios when we would like to set the ItemsSource of our custom component ourselves.

For example, if we wish to create a composite component that accepts TimeSpan values that can be any size of time interval: 1 hour, 5 days, 1 week, etc. We can achieve that by creating a custom TimeSpanComponentBase:

publicenumTimePart
{
    Hours,
    Days,
    Weeks
}
 
publicclassMyDataObject
{
    publicdoubleValue { get; set; }
 
    publicTimePart TimePart { get; set; }
 
    publicoverridestringToString()
    {
        returnthis.Value + " "+ this.TimePart.ToString();
    }
}
 
publicclassCompositeTimeSpanComponent : TimeSpanComponentBase
{
    publicoverridelongGetTicksFromItem(objectitem)
    {
        var dobj = (MyDataObject)item;
        if(dobj != null)
        {
            switch(dobj.TimePart)
            {
                caseTimePart.Weeks:
                    var ticksForOneUnit = 7;
                    returnTimeSpan.FromDays(ticksForOneUnit * dobj.Value).Ticks;
                caseTimePart.Days:
                    returnTimeSpan.FromDays(dobj.Value).Ticks;
                caseTimePart.Hours:
                default:
                    returnTimeSpan.FromHours(dobj.Value).Ticks;
            }
        }
 
        return0;
    }
 
    protectedoverrideSystem.Windows.Freezable CreateInstanceCore()
    {
        returnnewCompositeTimeSpanComponent();
    }
}
     
publicList<MyDataObject> CompositeItemsSource
{
    get
    {
        returnnewList<MyDataObject>()
        {
            newMyDataObject(){Value = 0.5, TimePart = TimePart.Weeks},
            newMyDataObject(){Value = 1, TimePart = TimePart.Weeks},
            newMyDataObject(){Value = 1.5, TimePart = TimePart.Weeks},
            newMyDataObject(){Value = 2, TimePart = TimePart.Weeks},
            newMyDataObject(){Value = 1, TimePart = TimePart.Days},
            newMyDataObject(){Value = 5, TimePart = TimePart.Days},
            newMyDataObject(){Value = 7, TimePart = TimePart.Days},
            newMyDataObject(){Value = 1, TimePart = TimePart.Hours},
            newMyDataObject(){Value = 8, TimePart = TimePart.Hours},
            newMyDataObject(){Value = 12, TimePart = TimePart.Hours}
        };
    }
}

Then just add it as component for our RadTimeSpanPicker:

<telerik:RadTimeSpanPicker>
    <telerik:RadTimeSpanPicker.TimeSpanComponents>
        <local:CompositeTimeSpanComponentItemsSource="{Binding CompositeItemsSource}"Header="Choose interval"/>
    </telerik:RadTimeSpanPicker.TimeSpanComponents>
</telerik:RadTimeSpanPicker>
CompositeComponent

For more details about RadTimeSpanPicker you can visit our online documentation and take a look at our demos.

Go ahead and try it out, create your custom components and let us know what you think about it.

Recap of the Telerik DevCraft R1 2016 Release Webinar

$
0
0

This post provides an overview of our recent webinar for the R1 2016 release of Telerik DevCraft. If you missed it, you can also watch the video right here.

Earlier this week, Ed Charbeneau and I hosted webinars that provided an overview of all the latest and greatest features we shipped in the R1 2016 release of Telerik DevCraft. From the new spreadsheet control in Kendo UI and UI for ASP.NET MVC to the official release of our UI controls for Univeral Windows Platform (UWP), we covered a massive amount of content that highlighted everything that is awesome in Telerik DevCraft. Other highlights included:

  • More templates, sample apps and better documentation for the web UI suites
  • Official release of AutoCompleteTextView for iOS
  • Windows Universal (8.1) support for SideDrawer for Xamarin.Forms
  • Desktop UI improvements including a new control and theme for WPF
  • Report sharing and improved scheduling logic in Report Server

Relive the Webinar

If you were unable to watch the webinar, don't worry. We posted the recording of the webinar up on YouTube for you to watch in its entirety and in high definition!

Prize Winners

Of course, it wouldn't be a webinar by Telerik without some cool prizes. This time around, we decided to give a prize to the attendee with the best question. We also picked a lucky attendee-at-random just to make things fun. Here are your winners:

Session 1: Robby Dyson (Microsoft Surface 3) and Scott Horrocks (Apple Watch)
Session 2: Brick Baldwin (Microsoft Surface 3) and Chris Barber (Apple Watch)

Congratulations to all our winners!

Questions and Answers

We received over 200 questions in total during the webinars. Unfortunately, we weren't able to answer all of them during the webinar. We're currently working on a blog post that will provide a rundown of the top questions that were asked during the webinar. We'll be publishing this blog post next week so stay tuned for that (UpdateHere it is!). In the meantime, take a moment to register for our next big webinar featuring Kendo UI on February 17!

Announcing the Telerik Kendo UI R2 2016 Roadmap

$
0
0
KUI_Roadmap_R2_2016

We discuss what to expect in the second major release of Telerik Kendo UI in 2016—previews of Angular 2 and React integrations, HTML Editor improvements, Bootstrap 4 + SASS and ASP.NET Core 1.0 RTM support, and more.

Given that the news about our plans for Telerik Kendo UI in 2016 is already out in the wild, I would like to provide you with an additional level of detail about what's coming in the second major release of Kendo UI for 2016. As usual, this entails not only new functionality up for the Kendo UI framework, but also for our Telerik UI for ASP.NET MVC, UI for JSP and UI for PHP products, all part of the Kendo UI Complete bundle.

How Do You Define a Roadmap?

As you may already know from past Kendo UI iterations and roadmap prioritization, the outcome from the following areas strongly influences the development direction of the product:

  • Industry research and analysis
  • Direct customer surveys and feedback (including our UserVoice portal) 
  • Forum posts and support requests
  • Input from Telerik leadership

With this in mind, here are our objectives and key deliverable for R2 2016, expected in the beginning of May.

Angular 2 and React Integrations (Previews)

Angular2-logoReact-logoKendoka

As I already elaborated on in an earlier blog posted in January, two major initiatives we are going to execute on this year are to deliver native Angular 2 and React integrations for Kendo UI. This would require removing the jQuery dependency and building Kendo UI components (on top of a common codebase) that align with the Angular 2 and React component concepts. It will also involve supporting a continuous delivery model via npm modules distribution for these integrations. Read more details in the blog linked above.

We see that these two frameworks are already getting great momentum and gradual adoption, and the future of the mobile web will definitely be influenced by the path they set forward.

The so-called 'first wave' of Kendo UI components for Angular 2 and React is expected to be released to the public around R2 2016 (May). Moreover, the npm distribution might also allow us to disclose very early pre-Alpha bits even a month or so earlier, so stay tuned for more info in the coming months!

Bootstrap 4 and SASS Support

Bootstrap-logo     Sass-logo

Another major piece of our R2'16 story will be the support for the next major version of the renowned Bootstrap framework (v4), and the introduction of SASS support for Kendo UI with a new Bootstrap 4 theme. With it we'll expose SASS variables as a theming API, and allow the translating of Bootstrap 4 SASS variables into Kendo UI widget configuration variables using SASS imports for this purpose.

As an end result, you'll be able to plug this mechanism seamlessly into your project when using the regular SASS styling workflow, and make the Kendo UI pieces blend with the style definitions of a Bootstrap 4 theme you chose for the project.

HTML Editor Features

With R2 our HTML Editor widget will receive some notable updates. It'll incorporate support for markdown (import and export), URL auto-detection and some other enhancements, which will make it even more flexible for your needs when editing HTML content.

VS Scaffolding Additions

The Visual Studio Scaffolder for Kendo UI widgets will be extended to support auto code generation for the TreeView. This will allow you to apply configuration settings and connect it to data by creating the respective controller-model relation and view from the Scaffolder UI.

Spreadsheet Enhancements

The Spreadsheet widget, officially released in R1 2016 and a cornerstone for building Excel-like interfaces for business web apps, will also receive updates and enhancements in the R2 timeframe. It'll become even more powerful and friendly to Excel-savvy users.

ASP.NET MVC Wrappers

ASP.NET Core 1.0 and MVC 6 Support

The RC2 and RTM releases of ASP.NET Core 1.0 (former ASP.NET 5 Core) and MVC 6 are coming in 2016, with no definite ETAs from Microsoft yet, as you can see from the public ASP.NET Core 1.0 Roadmap page. Regardless, our Telerik UI for ASP.NET MVC product already supports ASP.NET Core 1.0 RC1, and we'll extend this support to the upcoming RC2 and RTM updates.

Furthermore, a set of Tag Helpers for the ASP.NET MVC server wrappers of Kendo UI widgets (where applicable) are also within our scope towards R2'16. See how their syntax will look here.

New Visual Studio Dashboard Project Template

VS-Dashboard-Template

We'll also be expanding the set of predefined Visual Studio Project Templates for UI for ASP.NET MVC with a new Dashboard-like template, based on the Kendo UI App Template definition shipped in R1 2016. This template will become available with the R1 2016 SP1 release of the product, due in March.

VS Scaffolding Additions and More

With R2 our MVC Scaffolding utility will incorporate scaffolding capabilities for the TreeView MVC server wrapper. This will save you the hassle of manually generating boilerplate code for connecting a view (which hosts the treeview) to a controller and the corresponding model definition.

In addition, we'll introduce the option to assign a share data source among several MVC server wrappers, which is one of the most requested new features voted on our feedback portal.

How'll This Work for Me?

Wanna tell us how you are going to make use of these planned new additions for Kendo UI in your existing or future projects? Be the first to share in the comments section below. Also keep in mind that we operate in a dynamic environment, and our preliminary plans might undertake some changes going forward.

Got Feedback?

If you have suggestions or feature requests, visit our Feedback portal and submit them so they can be reviewed and voted on by the community, and prioritized for future development.

Viewing all 1954 articles
Browse latest View live