Telerik blogs

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.

Adaptive-Mobile-Grid


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?

Sorting

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.

Filtering

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.

Grouping

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:

DataForm

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.


ProgressBar

ProgressBar

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.

TreeMap

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.

Wizard

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. 


Beta Testing

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!


Rumen-Jekov
About the Author

Rumen Jekov

Rumen Jekov (@Rumen_Jekov) started his career at Telerik’s ASP.NET team in 2004 as a tech support engineer and passed through the position of a team lead to a product manager. He has answered more than 51,500 tickets helping customers to achieve their goals. Presently, he is a product owner of Telerik UI for ASP.NET AJAX and a manager of the AJAX crew at Progress. Off work, he enjoys traveling across the globe, watching movies and tech shows, reading books and listening to podcasts.

Related Posts

Comments

Comments are disabled in preview mode.