Responsive Radgrid for Desktop, Mobile and Tablet

[Ron]

I tried to create responsive radgrid on mobile but all solutions so far failed. I have combined several suggestions I found in forums and internet now into a new CSS which create a fully responsive grid on desktop, mobile and tablet.

See the attached files for some screenshots.

 

The CSS:

 

<style>
 
.RadGrid {
min-width: inherit;
}
 
        .RadGrid table {
            border-collapse: collapse;
            width: 100%;
        }
 
        .RadGrid th {
            background-color: #eee;
            font-weight: bold;
        }
 
        .RadGrid th,
        .RadGrid td {
            border: 0em none #333;
            line-height: 1.5;
            padding: 0.25em;
            text-align: left;
        }
 
 
html body .RadGrid .rgRow,
html body .RadGrid .rgAltRow,
html body .RadGrid .rgEditRow,
html body .RadGrid .rgFooter,
html body .RadGrid .rgHeader,
html body .RadGrid .rgGroupHeader
{
height: auto;
}

 
    /* Stack rows vertically on small screens */

@media only screen and (min-width: 40em) and (max-width: 60em) {

/* Hide column labels */
.RadGrid thead tr {
position: absolute;
top: -9999em;
left: -9999em;
}
 
.RadGrid tr {
border: 0.125em solid #333;
}

/* Leave a space between table rows and rows and pager */
.RadGrid tr + tr
{
margin-top: 0em;
}

.RadGrid .rgPager {
margin-top: 1em;
}
 
/* Get table cells to act like rows */
.RadGrid tr,
.RadGrid td {
display: block;
}
 
.RadGrid td {
border: none;
border-bottom: 0.125em none #333;
/* Leave a space for data labels */
padding-left: 50%;
}

            /* Add data labels */

.RadGrid .rgRow td:before,
.RadGrid .rgAltRow td:before {
content: attr(data-label);
float: left;
font-weight: bold;
}

.RadGrid .rgRow > td,
.RadGrid .rgAltRow > td {

display: block;
border-top: 1px solid ;
text-align: right;
padding: .25em .4375em
}

/* Show only the current page number*/
.RadGrid .rgWrap.rgNumPart a:not(.rgCurrentPage) {
display: none;
}
 
.RadGrid .rgWrap.rgAdvPart {
margin-top: 4px;
}

}

    /* Stack labels vertically on smaller screens */

@media only screen and (max-width: 40em) {

   /* Hide column labels */
.RadGrid thead tr {
position: absolute;
top: -9999em;
left: -9999em;
}
 
.RadGrid tr {
border: 0.125em none #333;
}

/* Leave a space between table rows and rows and pager */
.RadGrid tr + tr
{
margin-top: 0em;
}

.RadGrid .rgPager {
margin-top: 1em;
}
 
/* Get table cells to act like rows */
.RadGrid tr,
.RadGrid thead tr,
.RadGrid td {
display: block;
}
 
.RadGrid td {
border: none;
border-bottom: 0.125em none #333;
/* Leave a space for data labels */
padding-left: 50%;
padding: .25em .4375em;
}

/* Add data labels */
  .RadGrid td:before {
content: attr(data-label);
display: inline-block;
font-weight: bold;
line-height: 1.0;
width: 100%;
  }



/* Show only the current page number*/
.RadGrid .rgWrap.rgNumPart a:not(.rgCurrentPage) {
display: none;
}
 
.RadGrid .rgWrap.rgAdvPart {
margin-top: 4px;
}

html body .RadGrid .rgHeader,
html body .RadGrid .rgGroupHeader
{
height:150px;
}

  }

</style>

 

[Vessy]

Hi Ron,

The default layout of RadGrid can be hardly made responsive, thus we have created a separate Fluid design for the mobile rendering of the control:

https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/mobile-support/mobile-rendering/overview

You can review and test it here:

https://demos.telerik.com/aspnet-ajax/grid/examples/functionality/mobile-and-touch-support/adaptive-behavior/defaultcs.aspx

Regards,
Vessy
Progress Telerik