We are excited to announce that the ASP.NET Forums are moving to the new Microsoft Q&A experience. Learn more >

Gridview with Responsive Headers RSS

5 replies

Last post Aug 25, 2019 11:49 AM by yogyogi

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

masterdineen

Member

35 Points

375 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

samwu

Contributor

3370 Points

1409 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

IIS.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >

- Reply
masterdineen
Member

35 Points

375 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

35 Points

375 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

35 Points

375 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

1283 Points

956 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 ♠

‹ Previous Thread|Next Thread ›