locked
Gridview inside an iframe- Set fixed headers RRS feed

  • Question

  • User1310055179 posted

    Hi,

    How can I set fixed headers for a GridView inside an iframe?

    I would like the headers always be visible when scrolling down using iframe scrolling.

    The GridView data changes depending on the selected dropdown list value.

    Default.aspx:

    <iframe id="QurRep" scrolling="auto" style="width:99%min-height:-webkit-fill-availableheight:auto;" runat="server" ></iframe>
    

    iframe source: 

    TabularReport.aspx
    

     TabularReport.aspx:

    <asp:GridView ID="GridView1" runat="server"    
                OnSorting="GridView_Sorting" HeaderStyle-HorizontalAlign="Center" OnPageIndexChanging="PageIndexChanging"
                  OnRowCreated="GridView1_RowCreated" OnRowDataBound="GridView1_RowDataBound" >
                <Columns>
                    <asp:TemplateField> 
                        <ItemTemplate>  
                             
                        </ItemTemplate> 
                    </asp:TemplateField>
                    
                    <asp:TemplateField> 
                        <ItemTemplate>  
                            <asp:CheckBox ID="CheckBox_Items" runat="server" />
                        </ItemTemplate> 
                    </asp:TemplateField>
                    
                </Columns> 
            </asp:GridView>

    Thanks

    Sunday, February 10, 2019 2:19 PM

All replies

  • User839733648 posted

    Hi qsoft_developer,

    According to your description and code, I suggest that you could hide the header in the gridview.

    And then add a fixed header in your gridview.

    I've made a sample on my side and maybe you could refer to.

    Iframe.aspx

        <form id="form1" runat="server">
            <div>
                <iframe id="QurRep" src="TabularReport.aspx" scrolling="auto" style="width: 99%; height: 200px;" runat="server"></iframe>
            </div>
        </form>

    TabularReport.aspx:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
            #tblHeader {
                ;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div style="height: 20px; width: 600px; margin: 0; padding: 0">
                <table border="1" style="border-collapse: collapse; background-color:yellow" id="tblHeader">
                    <tr>
                        <td style="width: 150px; text-align: center">Eid</td>
                        <td style="width: 150px; text-align: center">Ename</td>
                        <td style="width: 150px; text-align: center">age</td>
                        <td style="width: 150px; text-align: center">sex</td>
                    </tr>
                </table>
            </div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" ShowHeader="false">
                <Columns>
                    <asp:BoundField ItemStyle-Width="150px" DataField="Eid" HeaderText="Eid" SortExpression="Eid" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="Ename" HeaderText="Ename" SortExpression="Ename" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="age" HeaderText="age" SortExpression="age" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="sex" HeaderText="sex" SortExpression="sex" />
                </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:EmployeeManagementConnectionString %>" SelectCommand="SELECT * FROM [tb_info]"></asp:SqlDataSource>
        </form>
    </body>
    </html>
    

    result:

    Best Regards,

    Jenifer

    Monday, February 11, 2019 6:51 AM
  • User1310055179 posted

    Thanks for your reply.

    Will this solution work for uneven cells width?

    In addition, I don't know if it makes a difference but the entire table content can be changed by the user, Including the headers.

    Tuesday, February 12, 2019 9:11 AM
  • User839733648 posted

    Hi qsoft_developer,

    I really understand what you mean.

    I first try to fix the header without adding extra customized header, but that effect is bad like below.

    You could see that there will be two scrollable bars when using iframe.

    So my above suggestion is a workaround which could achieve your requirement better.

    The header may be created by the actual gridview displayed. And the style may be freely defined.

    Best Regards,

    Jenifer

    Wednesday, February 13, 2019 2:10 AM