Gridview with Responsive Headers

Reply

masterdineen

Member

32 Points

319 Posts

Gridview with Responsive Headers

Aug 22, 2019 09:51 PM|masterdineen|LINK

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;
                position:fixed;
                /*margin-left:120px;*/
                margin-top:-30px;
                width:200px;
                background-color:White;
                text-align:left;
                Height:-100px;   
         }

          .ID_header {

                font-weight:bold;
                position:fixed;
                margin-top:-30px;
                margin-left:187px;
                width:200px;
                background-color:White;
                text-align:left;
                Height:30px;   
         }

          .Forename_header {

                font-weight:bold;
                position:fixed;
                margin-top:-30px;
                margin-left:365px;
                width:200px;
                background-color:White;
                text-align:left;
                Height:30px;   
         }

          .Surname_header {

                font-weight:bold;
                position:fixed;
                margin-top:-30px;
                margin-left:545px;
                width:200px;
                background-color:White;
                text-align:left;
                Height:30px;   
         }

          .Number_1_header {

                font-weight:bold;
                position:fixed;
                margin-top:-30px;
                margin-left:728px;
                width:200px;
                background-color:White;
                text-align:left;
                Height:30px;   
         }


          .Number_2_header {

                font-weight:bold;
                position:fixed;
                margin-top:-30px;
                margin-left:912px;
                width:200px;
                background-color:White;
                text-align:left;
                Height:30px;   
         }


          .Date_header {

                font-weight:bold;
                position:fixed;
                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

Reply

samwu

Participant

1860 Points

707 Posts

Re: Gridview with Responsive Headers

Aug 23, 2019 03:06 AM|samwu|LINK

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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Reply

masterdineen

Member

32 Points

319 Posts

Re: Gridview with Responsive Headers

Aug 23, 2019 12:51 PM|masterdineen|LINK

Thank you very much

I shall give that a go later.

Regards Rob

Reply

masterdineen

Member

32 Points

319 Posts

Re: Gridview with Responsive Headers

Aug 23, 2019 03:49 PM|masterdineen|LINK

Hello Sam

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

Reply

masterdineen

Member

32 Points

319 Posts

Re: Gridview with Responsive Headers

Aug 24, 2019 10:49 AM|masterdineen|LINK

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

Reply

yogyogi

Participant

1060 Points

732 Posts

Re: Gridview with Responsive Headers

Aug 25, 2019 11:49 AM|yogyogi|LINK

masterdineen

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.

Helping you always. Don't forget to click "Mark as Answer" on the post that helped you.
♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠

Gridview with Responsive HeadersRSS

5 replies

Shortcuts

Related Links

Gridview with Responsive Headers

Re: Gridview with Responsive Headers

Re: Gridview with Responsive Headers

Re: Gridview with Responsive Headers

Re: Gridview with Responsive Headers

Re: Gridview with Responsive Headers

masterdineen