Net Myth Net Myth - 18 days ago 9
ASP.NET (C#) Question

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.

Answer

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); }
Comments