Telerik Product and Version
|
2014 Q1 or above |
|
Supported Browsers and Platforms
|
All browsers that support media queries |
|
Components/Widgets used (JS frameworks, etc.)
|
- |
PROJECT DESCRIPTION
This code library will show you how to make the classic
RadGrid to behave better on mobile devices, without changing its rendering particularly for them. In short, the trick is to “
switch” the presentation from horizontal orientation to vertical one. This way you will manage to show more data fields at once and make scrolling on mobile devices much easier.
Examples:
To present the data as shown in the screenshot above you should follow the steps below:
1) Since you can’t change the rendering (i.e. the aim is to have only responsive but not adaptive behavior) you will need a custom attribute in the data cell itself to hold the text of the data field name (the header). You have to use this custom attribute later in a pseudo :before element to display the header and the data at the same time in one table cell. Note that you should hide the regular RadGrid header in the same time, because you will use “vertical header” instead. To achieve this you need to attach the attribute in question on
ItemDataBound server event as follows:
*
where “Position”, “Name”, “BirthDate”,.., etc. are the UniqueNames of the columns which, by default, coincide with the data field name. “data-title” is an arbitrary name for the custom attribute, which is absolutely valid in HTML5. More information on “data-“ attribute you can find here:http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#custom-data-attribute
This will result in the following markup:
2) The second peace of the solution is to use this attribute to create the data headers:
The transposition of the layout is accomplished by two CSS rules, through which you change the “display” property value to “block”:
The rest of the styles are cosmetic.
Note
For mobile devices, in order to get the maximum of the responsive behavior you should add the following meta-tag: