7. RadEditor Adaptive Rendering
• Same RadEditor, all new rendering
• Easy-to-touch bottom-placed toolbar with bigger
buttons
• Insert images, hyperlinks and tables as well as
contextual toolbar to format and edit their properties
• Interactive Full Screen mode
• Easily navigate through multiple tools, switching to
HTML mode, etc.
• Optimal experience for the mobile browser
• And a whole lot more…
16. The Future of Light-weight Rendering
•Q3 2015 (This fall)
•Light-weight rendering for all controls
•Optimized DLLs
Watch Telerik.com/blogs for details
23. Here’s What We Covered
•Adaptive Rendering
•Light-weight Rendering
•Client Export Manger
•HTML Chart Customization
•Theme Builder
24. Resources
• Demos | http://demos.telerik.com/aspnet-ajax/
• UI for ASP.NET AJAX | http://www.telerik.com/products/aspnet-ajax
• Blogs | http://www.telerik.com/blogs
• Community | http://developer.telerik.com/
Editor's Notes
Thanks for the introduction Michael
And welcome everyone
Today we’ll be exploring What’s new in Telerik UI for ASP.Net AJAX
Let’s get started with a quick overview, then we’ll get in to some demos.
The UI for ASP.NET AJAX has more than 80 controls
Developed over the course of 11 years
And we continue to add and release new features
3 times each year
All of controls you see here tagged in blue received updates in this release in this release
11 Year’s is a long time
and we may not have hover boards
But mobile computing has certainly changed
This is what mobile computing looked like in 2004 when we released the very first Telerik Control The RadEditor
In 2004, the RadEditor was not only the first Telerik Control
But also the first WYSIWYG web editor to market
and that’s why today we’re especially proud to announce
That RadEditor is the first WYSIWYG web editor on the market that offers an adaptive UI for smart phones.
The new adaptive RadEditor provides a mobile optimized user experience for small devices
and no detail was left behind.
The new render mode offers an easy-to-touch bottom-placed toolbar,
touch-friendly drop downs
and dialogs that always pop up and fit in the visible viewport of your smartphone.
Users familiar with Google Docs or Microsoft Word Mobile will feel at home using RadEditor on their mobile device.
Best of all,
This isn’t a separate control, it’s the same RadEditor you know and love
With the ability to identify and adapt to mobile.
Let’s take a look at the RadEditor in action.
For this demo, I’ll be sharing the screen of my android device, this is real hardware, not an emulator, or browser simulation.
To place the editor in edit mode, simply click the pencil icon in the upper left hand corner. This will launch a full screen editing experience.
The toolbar across the top of the editor has undo, redo, edit selection, find/replace, code view, and save actions.
I’m going to select the text “Smartphones” and click the edit selection action.
Notice the contextual toobar conveniently placed at the bottom of the screen, within thumbs reach.
This toolbar contains all of the actions I need to edit text, including: font-size, color, alignment and more.
Let’s make some changes to the selected text.
We’ll start by increasing the font size, 22px looks good.
With a quick tap, we can make this bold.
Let’s give it some color too, we’ll tap forecolor to bring up the color picker. I’ll set this to white.
Same thing with the background, how about a nice blue.
I think that looks about right, I’ll go ahead and save this by clicking the checkmark in the corner.
---
The editing capabilities in adaptive mode are even robust enough to create and edit hyper links, HTML tables and embed and manage images.
Let’s change a hyper link in the document to see just how powerful the contextual interface is.
When a link is selected in the document, the interface automatically chooses the proper editor this type of content.
With the link selected, we can apply a CSS class, edit the link properties or completely remove the link. Let’s tap remove link so we can see how a new link is created.
Tapping the … with the text selected brings up the insert menu, let’s select hyperlink manager and create a new link. Notice the fields are already prefilled, all I need to do is complete the url and save.
If you would like to try this on your own device after the webinar, visit demos.Telerik.com and navigate to the RadEditor demos and scan the QR code.
The RadEditor is just one of many controls in this release with new adaptive rendering.
The TreeList features improvements to help you build apps tailored to any device. The control not only delivers bigger touch zones on mobile devices, but also new views, buttons, context menus and support for gestures. These improvements make the control very easy to use, even on smartphones.
Now you can build image galleries end users will enjoy browsing, even with mobile browsers.
When they access the control on a mobile device, it will deliver a user interface optimized for small screens, as well as support for the most popular gestures like: spread, pinch, tap and swipe. The image gallery comes with three modes: Image, Image Slider and Thumbnails Area, including the convenient full-screen mode.
We’ve also updated our DataPager control.
The component is now optimized for touch devices and fully responsive. For your convenience, it exposes server-side attributes, enabling you to hide the page size field, trim the page numbers field and change the position of the DataPagerButton field.
Adaptive rendering is not limited to this release. We have been hard at work, constantly updating UI for ASP.NET AJAX. You can find more adaptive controls, plus many more responsive controls throughout the entire toolbox.
So, by now you’re probably wondering why I’m not showing code for these examples. Well, there really isn’t much code involved.
The UI for ASP.NET AJAX handles all of the device detection and rendering for you, all you have to do is enable adaptive rendering for the control
Or for the entire project, our controls will handle the rest.
You can do this in your web config file by setting the Render mode to Auto and you’re ready to go mobile.
Setting render mode to auto in your web config will also enable our next feature update.
Light weight rendering.
Light weight rendering enables reduced markup, easier customization, and modern - semantic rendering and more.
Light weight rendering now available for the TabStrip, Scheduler, ToolBar, RibbonBar, Notification, ProgressBar and InputManager.
In Q3 we aim to enable light weight rendering for all of our controls.
In addition, we will be releasing light weight optimized DLLs that are smaller and more efficient.
Keep an eye on our blogs for upcoming roadmaps and details.
In the last release we introduced the Client Export Manager.
This control adds WYSIWYG export capabilities to your application.
Client export manager supports multiple formats including image, svg and PDF.
When customers saw how powerful the client export manager was, you asked for more. And we listened.
That’s why Client export manager now supports Multi page PDF export.
Let’s jump in to visual studio and see how it works.
Ok, I have visual studio open and I’m going to run the page so we can see what the demo looks like.
Here we have our demo page.
It lists several pages of recipes and allows the user to export all of the recipes to PDF at the click of a button.
Let’s give it a try.
Notice that only the visible recipe was exported. This is because the normal functionally of the Client export manager is a WYSIWYG representation.
Let’s dive into the code and see how the page is wired up. Then we’ll modify the export manager so it gives the user a multip page export that includes all the recipes.
In the top of the markup, you can see we have our client export manager.
The client export manager is triggered when the client clicks export button.
Let’s look at the client side code to see how it is invoked.
The exportAllRecipes function is pretty straight forward.
First, we find the client export manager control. Then we use a CSS selector to identify the root level HTML element we wish to export.
innerMultiPage
If we scroll up we can see that innerMultiPage is a RadMultiPage view, this is where the markup for all of our recipes are defined.
Let’s modify the code so that the client export manager exports all of the recipes in the RadMultiPage.
Well start by adding a property to the client export manager
PageBreakSelector , here we’ll set a CSS selector that will identify a pagebreak
Let’s call it .pageBreak
Next, we need to add the pageBreak class to each element that contains a new page.
We can save and refresh the example now.
Clicking the export button now will give us a nicely formatted multipage pdf document.
Next, we’ll take a look at the new customizations update for the HTML Chart control.
If you need to customize the appearance of the chart, you’ll find the improvements of this release useful:
You can now control the width, height and orientation of the legend, and also fine-tune its position through the Align, OffsetX and OffsetY properties of the appearance tag
In addition, you now have the ability to implement custom visualization of legend items, axis titles, labels, markers and series by utilizing the Kendo Drawing API. Let’s look at a demo to see this new feature in action.
Let’s look a little deeper.
Here we have a javaScript function named telerikDemo.columnVisual
If we open the corresponding javascript file we should be able to find this function.
Notice that columnVisual, makes a call to createColumn, if we scroll up to createColumn we’ll find that this function is responsible for drawing the custom cylinders on the chart.
The next update is in the works but isn’t today.
Soon you can expect the release of our new Theme Builder tool.
The new theme builder that will give you the ability to create and edit skins for modern lightweight and mobile rendering.
Do you have a custom bootstrap theme that you want to use with UI for ASP.NET AJAX? Well soon, the new Theme Builder will analyze your theme and generate a custom colorized Telerik skin based on the one you provided.
Let’s review what we covered today.
There where multiple controls updated with mobile adaptive rendering including the revolutionary RadEditor that brings Microsoft Word like functionality to your next application.
There are 7 controls that can now take advantage of the new light weight rendering mode and we anticipate all of the controls to be ready with light weight rendering for the Q3 release this fall. Light weight rendering not only reduces control complexity, but makes customization much easier too.
We looked at the new multipage PDF export for the Client Export Manager. This feature was highly anticipated since the control’s release just a short time ago.
The HTML chart control received updates that allow for complete control of the visual output of the control. By leveraging the Kendo Drawing API chart customization is limitless, now you can satisfy even the toughest customer requests.
And finally, we saw a preview of the upcoming Theme Builder. Watch for theme news and updates in the coming month.
To get the most out of your Telerik subscription
Make sure you check out the following resources.
Our demos have been updated with the latest release. This means you can stop by demos.Telerik.com and explore all of the demos you saw earlier.
Keep updated on the latest Telerik news by visiting our blogs. You’ll find product roadmaps, whitepapers, announcements and more.
And don’t forget to visit our community resources at developer.Telerik.com.