How to add responsive behaviour to the asp:GridView

I want the asp gridview to show responsive behaviour like the html table does with the no-more-table css style as
seen here http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table.

Is there a way to achieve it.

I have tried one way before, which is to replace my gridview with the html table and apply no-more-table style from
code behind. But I don’t want to do this as I want to all the features offered by the asp:GridView.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I have written custom css to achieve this feature. To use my code follow the below steps,

Step1: Enclose your GridView inside a section with Id as no-more-gridView
as below

<section id="no-more-gridView">
    <asp:GridView..>
    .
    </asp:GridView>
</section>

Step2: Assign a data-title attribute to each of your cells from code behind (inside the RowDataBound function) like below,

e.Row.Cells[0].Attributes["data-title"] = "Col1Name";
e.Row.Cells[1].Attributes["data-title"] = "Col2Name";
e.Row.Cells[2].Attributes["data-title"] = "Col3Name";
.
.

Step3: Finally include my custom style given below. Use media query to apply the style at whatever screen size you wish it to come to effect and that should pretty much do the trick.

/*  Author     : Vinay
    Description: Responsive GridView
*/

    /* Force gridview to not be like gridview anymore */
    #no-more-gridView table, 
    #no-more-gridView thead, 
    #no-more-gridView tbody, 
    #no-more-gridView th, 
    #no-more-gridView td, 
    #no-more-gridView tr { 
        display: block; 
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-gridView .table_column_head > * { 
        display:none;
    }
    #no-more-gridView tr { all: revert;border: 2px solid #ccc;height:auto !important;}
    #no-more-gridView td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        white-space: normal;
        text-align:left;
        padding-bottom: 1em;
    }
    #no-more-gridView td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }
    /*
    Label the data
    */
    #no-more-gridView td:before { content: attr(data-title); }

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0