We just released the Q3 2014 Beta of Telerik UI for ASP.NET AJAX suite and everyone can now give it a spin. The trial version can be downloaded after login from the following location and tested in the demos.
Before you begin, let me highlight the most important additions to it. As one of the most popular controls, I’ll spare more time on the new Mobile rendering and capabilities of RadGrid.
Mobile Render Mode for RadGrid Optimized for Touch Devices
If your web apps already offer support for mobile devices or will support them in the future, you could benefit from the new adaptive render mode of RadGrid. It provides not only bigger touch zones for the mobile devices, but also new views, gestures, buttons and context menus, which makes the control very powerful and easy for use on the modern and popular iOS and Android devices.
Yet another great thing is that you can enable this functionality pretty easily by setting the RenderMode
property to Mobile
. To cover the rendering of both mobile and desktop devices, you could set the RenderMode
property to Auto
<telerik:RadGrid RenderMode=”Mobile” … />
What’s Offered by the Mobile Rendering of RadGrid?
The column sorting can be performed in two ways:
- The old school way of clicking on a row header
- Via the Column Settings pop-up that can be triggered by clicking on the Column Settings menu placed inside each of the column headers.
The filtering can be applied again in two ways:
- Clicking directly on the filter icon that launches the Filter pop-up
- Via the Column Settings menu and choosing the Filter option.
Note that only one of the two features can be simultaneously enabled.
The user can group the columns by either:
- Dragging a column header and dropping it over the especially designed group panel item as part of the table header. The default text in the groupPanelItem is: “Drag a column header and drop it here to group by that column”.
- Via the Column Settings menu and choosing the Group by option inside.
Visibility and Reordering of Columns
Both useful features can be managed through the especially provided context menu placed at the top right corner of the grid. When there are a lot of columns and the user wants to reduce their number on the client, he/she can click on the icon and uncheck the checkboxes placed on each row.
To rearrange the columns, the user should hold the icon inside the pop-up and drag it on the desired location.
To confirm the execution of the above commands the user should press the icon.
Other Useful Features:
- New pop-up, which incorporates the export to Word, CSV, Excel and PDF commands
- Inline editing
- Hierarchy grid
- Cell and row selection mechanism designed for mobile
- Column resizing designed for mobile
How to Test the Mobile Rendering?
If you do not have a mobile device at hand, you can easily switch your Google Chrome browser to Apple iPad, iPhone or some Android device through the provided emulation option. To do that press F12 (to open the dev toolbar) -> press Escape (Esc) to open the emulation menu -> choose the desired emulation mode (for example Apple iPad 3 / 4) -> and refresh the page to see the layout tailored for mobile devices.
Summary of Benefits
We have covered all popular features and functionality of RadGrid by providing UX and UI interface suitable not only for desktop, but also for the mobile devices. You can turn it on pretty faster by simply setting a single property - RenderMode=”Auto”. Of course, for more precise device detection, I suggest to use the RadDeviceDetectionFramework.
New Line of Business Controls in the Beta
After introducing you in the new mobile features of RadGrid, I will share some information about the other new controls in the Beta:
RadDataForm is data oriented control, which displays the values of a single record or collection of data items from a DataSource using user-defined templates. The control provides you with an option to preview, edit, delete and insert records through the available set of templates. The DataForm also provides set of commonly used predefined layouts and unlimited possibilities for creating custom layouts.
The popular lightweight control enables you to visualize the progress of an operation such as a download, file transfer, level of completion of a form or any other measurable process.
The control displays a hierarchical tree-structured data as a set of rectangles. Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches.
Helpful in scenarios where large forms that collect user input have to be broken up to smaller steps. It will be adaptive, and features desktop and mobile rendering and capabilities.
You can find the complete list of features and bug fixes in the release notes. All users are invited to take part and test the new controls and functionality. The valuable feedback and real bug reports will be gladly rewarded with Telerik points. You can use the Beta forum to send your reports.
Thank you all for your time and great feedback in advance!