Как добавить отзывчивое поведение к asp: GridView

Question

Я хочу, чтобы asp gridview отображал отзывчивое поведение, подобное таблице html, с типом CSS без лишнего стола, как здесь http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table.

Есть ли способ его достижения.

Я пробовал в одну сторону раньше, что должно заменить мое gridview на таблицу html и применить стиль не более таблицы от кода позади. Но я не хочу этого делать, поскольку я хочу, чтобы все функции, предлагаемые asp:GridView.

Answer 1

Я написал пользовательский css для достижения этой функции. Для того, чтобы использовать мой код, выполните следующие действия,

Step1: Заключите ваш GridView внутри секции с Id, как не-более-GridView ниже

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

Step2: Назначение данных титула атрибутов для каждого из ваших клеток из кода позади (внутри функции RowDataBound), как показано ниже,

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: Наконец, включите мой пользовательский стиль, указанный ниже. Используйте media query, чтобы применить стиль к любому размеру экрана, который вы хотите, чтобы он появился, и это должно в значительной степени сделать трюк.

/* 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); }