locked
Gridview with Responsive Headers RRS feed

  • Question

  • User2037455357 posted

    Hello there

    could someone help with the following please

    I have a gridview with Fixed headers and have aligned them up using margins etc...

    But I want to make them responsive when viewing on different screens.

    See current styles & gridview code below.  all I want to do is make the gridview and headers responsive on difference screens.

     .Name_header {
    
                    font-weight:bold;
                    ;
                    /*margin-left:120px;*/
                    margin-top:-30px;
                    width:200px;
                    background-color:White;
                    text-align:left;
                    Height:-100px;   
             }
    
              .ID_header {
    
                    font-weight:bold;
                    ;
                    margin-top:-30px;
                    margin-left:187px;
                    width:200px;
                    background-color:White;
                    text-align:left;
                    Height:30px;   
             }
    
              .Forename_header {
    
                    font-weight:bold;
                    ;
                    margin-top:-30px;
                    margin-left:365px;
                    width:200px;
                    background-color:White;
                    text-align:left;
                    Height:30px;   
             }
    
              .Surname_header {
    
                    font-weight:bold;
                    ;
                    margin-top:-30px;
                    margin-left:545px;
                    width:200px;
                    background-color:White;
                    text-align:left;
                    Height:30px;   
             }
    
              .Number_1_header {
    
                    font-weight:bold;
                    ;
                    margin-top:-30px;
                    margin-left:728px;
                    width:200px;
                    background-color:White;
                    text-align:left;
                    Height:30px;   
             }
    
    
              .Number_2_header {
    
                    font-weight:bold;
                    ;
                    margin-top:-30px;
                    margin-left:912px;
                    width:200px;
                    background-color:White;
                    text-align:left;
                    Height:30px;   
             }
    
    
              .Date_header {
    
                    font-weight:bold;
                    ;
                    margin-top:-30px;
                    margin-left:1098px;
                    width:200px;
                    background-color:White;
                    text-align:left;
                    Height:30px;   
             }
    
    
    
    <div style ="height:500px; width:auto; overflow:auto; align-content:center">
    
             <asp:GridView ID="CreateOrSearch_RiskAssessments_GridView" GridLines="None" Style="margin-left:auto; border-style:none; border:none;  margin-right:auto" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" AlternatingRowStyle-BackColor = "#C2D69B" ShowHeader ="true">
                 <Columns>
                     
                     <asp:HyperLinkField DataTextField="Name" DataNavigateUrlFields="ID" ItemStyle-Width="200px" HeaderText="Name"
                    DataNavigateUrlFormatString="Risk Assessment AllQs.aspx?CreateSearch_RiskId={0}" SortExpression="Name">
                         <HeaderStyle CssClass="Name_header"  HorizontalAlign="Center" Font-Names="Tahoma"></HeaderStyle>
                     </asp:HyperLinkField>
    
                     <asp:BoundField DataField="ID" ItemStyle-Width="200px" HeaderText="ID" SortExpression="ID" ReadOnly="True">
                         <HeaderStyle CssClass="ID_header" HorizontalAlign="Center" Font-Names="Tahoma"></HeaderStyle>
                     </asp:BoundField>
                     <asp:BoundField DataField="Forname" ItemStyle-Width="200px" HeaderText="Forname" SortExpression="Forname">
                         <HeaderStyle CssClass="Forename_header" HorizontalAlign="Center" Font-Names="Tahoma"></HeaderStyle>
                     </asp:BoundField>
                     <asp:BoundField DataField="Surname" ItemStyle-Width="200px" HeaderText="Surname" SortExpression="Surname">
                         <HeaderStyle CssClass="Surname_header" HorizontalAlign="Center" Font-Names="Tahoma"></HeaderStyle>
                     </asp:BoundField>
                     <asp:BoundField DataField="Number_1" ItemStyle-Width="200px" HeaderText="Number_1" SortExpression="Number_1">
                         <HeaderStyle CssClass="Number_1_header" HorizontalAlign="Center"  Font-Names="Tahoma"></HeaderStyle>
                     </asp:BoundField>
                     
                     <asp:BoundField DataField="Bvd_Number" ItemStyle-Width="200px" HeaderText="Number_2" SortExpression="Number_2">
                         <HeaderStyle CssClass="Number_2_header" HorizontalAlign="Center" Font-Names="Tahoma"></HeaderStyle>
                     </asp:BoundField>
                     <asp:BoundField DataField="Date" ItemStyle-Width="200px" HeaderText="Date" ReadOnly="True" SortExpression="Date">
                         <HeaderStyle CssClass="Date_header" HorizontalAlign="Center" Font-Names="Tahoma"></HeaderStyle>
                     </asp:BoundField>
    
                 </Columns>
                 
             </asp:GridView>
    
    
    
             <asp:SqlDataSource runat="server" ID="AppDB" ConnectionString='<%$ ConnectionStrings:DataBaseConnectionString %>' SelectCommand="SELECT * FROM [SQL_Table]"></asp:SqlDataSource>
    
    
                 </div>

    Regards Rob

    Thursday, August 22, 2019 9:51 PM

All replies

  • User288213138 posted

    Hi masterdineen,

    I suggest that you don't use CSS directly to make GridView responsive, because it's complicated and troublesomeb.

    you can try to use Foottable plugin.

    The code:

    <script src="../Scripts/jquery-3.3.1.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css" rel="stylesheet" type="text/css" />
       
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('[id*=CreateOrSearch_RiskAssessments_GridView]').footable();
            });
        </script>
    
    <form id="form1" runat="server">
            
            <asp:GridView ID="CreateOrSearch_RiskAssessments_GridView" CssClass="footable" runat="server" AutoGenerateColumns="false"
                Style="width: 500px">
                <Columns>
                    <asp:BoundField DataField="Name" HeaderText="Name" />
                    <asp:BoundField DataField="Id" HeaderText="Id" />
                    <asp:BoundField DataField="Forname" HeaderText="Forname" />
                    <asp:BoundField DataField="Surname" HeaderText="Surname" />
                    <asp:BoundField DataField="Number_1" HeaderText="Number_1" />
                    <asp:BoundField DataField="Bvd_Number" HeaderText="Bvd_Number" />
                    <asp:BoundField DataField="Date" HeaderText="Date" />
                </Columns>
            </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:CaseTestConnectionString %>" SelectCommand="SELECT * FROM [Test45]"></asp:SqlDataSource>       
        </form>
    
     protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {                
                    CreateOrSearch_RiskAssessments_GridView.DataSource = SqlDataSource1;
                    CreateOrSearch_RiskAssessments_GridView.DataBind();
                    CreateOrSearch_RiskAssessments_GridView.HeaderRow.Cells[0].Attributes["data-class"] = "expand";
                    CreateOrSearch_RiskAssessments_GridView.HeaderRow.Cells[2].Attributes["data-hide"] = "phone";
                    CreateOrSearch_RiskAssessments_GridView.HeaderRow.Cells[3].Attributes["data-hide"] = "phone";
                    CreateOrSearch_RiskAssessments_GridView.HeaderRow.Cells[4].Attributes["data-hide"] = "phone";
                    CreateOrSearch_RiskAssessments_GridView.HeaderRow.Cells[5].Attributes["data-hide"] = "phone";
                    CreateOrSearch_RiskAssessments_GridView.HeaderRow.Cells[6].Attributes["data-hide"] = "phone";       
                    CreateOrSearch_RiskAssessments_GridView.HeaderRow.TableSection = TableRowSection.TableHeader;
                }
            }

    The result:

    Best regards,

    Sam

    Friday, August 23, 2019 3:06 AM
  • User2037455357 posted

    Thank you very much

    I shall give that a go later.

    Regards Rob

    Friday, August 23, 2019 12:51 PM
  • User2037455357 posted

    Hello Sam

    What about column width within the Gridview to automatically adjust with the content.?

    Friday, August 23, 2019 3:49 PM
  • User2037455357 posted

    Hi Sam

    I am using HorizontalAlign ="Justify" which is making my headers line up nicely.

    But how do to get the headers to be fixed when scrolling up and down.

    Regards

    Rob

    Saturday, August 24, 2019 10:49 AM
  • User-2054057000 posted

    Hello Sam

    What about column width within the Gridview to automatically adjust with the content.?

    Column width should be specified in % manner. So it's width will be based on (your defined percent of) the size of it's parent element. Now all you have to do it write css media queries based on screen size. In these media queries you specify the size of the parent element.

    The media queries code should be something like:

    .childColumn1{
        width: 20%;
    }
    .childColumn2{
        width: 30%;
    }
    .childColumn3{
        width: 40%;
    }
    .childColumn4{
        width: 10%;
    }
    
    // css media queries start here
    @media only screen and (min-width : 320px) and (max-width : 480px) {
        .parentElement {
            width: 320px;
        }
     
    //other styles for the screen size 320px to 480px
    }
     
    @media only screen and (min-width : 481px) and (max-width : 540px) {
        .parentElement {
            width: 481px;
        }
     
    //other styles for the screen size 481px to 540px
    }
     
    @media only screen and (min-width : 541px) and (max-width : 767px) {
        .parentElement {
            width: 541px;
    }
     
    //other styles for the screen size 541px to 767px
    }
     
    @media only screen and (min-width : 768px) and (max-width : 959px) {
        .parentElement{
            width: 541px;
        }
     
    //other styles for the screen size 768px to 959px
    }

    Recommend you to read - https://www.yogihosting.com/css-media-queries-for-responsive-web-design/

    I personally think that implementing responsiveness on the GridView you using CSS media queries is the simplest task.

    Sunday, August 25, 2019 11:49 AM