Responsive RadGrid

Thread is closed for posting
3 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 27 Feb 2015 Link to this post


    Telerik Product and Version

    2014 Q1 or above

    Supported Browsers and Platforms

    All browsers that support media queries

    Components/Widgets used (JS frameworks, etc.)


    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.




    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: 

    This will result in the following markup:

    <td data-title="Position"><span id="RadGrid1_ctl00_ctl04_numberLabel" style="display: inline-block; width: 30px;">#1</span></td>
    <td data-title="Name">Bill Gates</td>
    <td data-title="BirthDate">10/28/1955 12:00:00 AM</td>

    2) The second peace of the solution is to use this attribute to create the data headers:
    .RadGrid .rgRow td:before,
    .RadGrid .rgAltRow td:before {

    The transposition of the layout is accomplished by two CSS rules, through which you change the “display” property value to “block”:
    div.RadGrid .rgRow,
    div.RadGrid .rgAltRow {
        displayblock/*Change the rows display to block which is essential for their reposition*/
    div.RadGrid .rgRow > td,
    div.RadGrid .rgAltRow > td {
        displayblock/*Change the data cells display to block which is essential for their reposition*/

    The rest of the styles are cosmetic.


    For mobile devices, in order to get the maximum of the responsive behavior you should add the following meta-tag:
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1, maximum-scale=1.0, user-scalable=no" />

  2. 9583D9A5-8ACA-444F-8391-3376B85C74C3
    9583D9A5-8ACA-444F-8391-3376B85C74C3 avatar
    139 posts
    Member since:
    Feb 2011

    Posted 28 Jul 2015 Link to this post

    Very nice - but 2 problems:

    1. The screenshots are not attached properly to the article

    2. As soon as you wrap this RadGrid in an RadAjaxPanel - then do something that causes a postback - like Sorting - the grid will auto apply the @media CSS settings even though it should not!  

  3. 272EA702-B83F-49DA-9608-0FBC5A6ECAEB
    272EA702-B83F-49DA-9608-0FBC5A6ECAEB avatar
    4017 posts
    Member since:
    Oct 2016

    Posted 31 Jul 2015 Link to this post

    Hello Dan,

    See the suggestion provided in the other forum thread you ave opened for this issue and verify if it helps.

    Maria Ilieva
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.