Using gridview with scroll bars
Question
-
User-1767698477 posted
I am trying a different set of code on this example. With this example the header lines up exactly with the columns. However this example places the scroll bars at 100% of the width of the screen. I am having problems getting the header to exactly match the gridview in my other example.
How do I get the scrollbars to not be stretched all the way across the screen? Also the gridview should have a height that I set, and the horizontal scrollbar should be farther down on the page. Also, the example has a static footer at the bottom, (purple). Why isn't there a footer in the gridview below?
Also, how do I add more spacing in the header cells? If this is done, the gridview spacing has to be updated as well. I'm using Cellpadding=2 in the gridview but this is not having any affect. The header is cramped together.
here is the link to the post with the example:
https://www.dotnetbull.com/2011/11/scrollable-gridview-with-fixed-headers.html
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default12.aspx.vb" Inherits="Default12" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script type="text/javascript"> function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) { var tbl = document.getElementById(gridId); if (tbl) { var DivHR = document.getElementById('DivHeaderRow'); var DivMC = document.getElementById('DivMainContent'); var DivFR = document.getElementById('DivFooterRow'); //*** Set divheaderRow Properties **** DivHR.style.height = headerHeight + 'px'; DivHR.style.width = (parseInt(width) - 16) + 'px'; DivHR.style.position = 'relative'; DivHR.style.top = '0px'; DivHR.style.zIndex = '10'; DivHR.style.verticalAlign = 'top'; //*** Set divMainContent Properties **** DivMC.style.width = width + 'px'; DivMC.style.height = height + 'px'; DivMC.style.position = 'relative'; DivMC.style.top = -headerHeight + 'px'; DivMC.style.zIndex = '1'; //*** Set divFooterRow Properties **** DivFR.style.width = (parseInt(width) - 16) + 'px'; DivFR.style.position = 'relative'; DivFR.style.top = -headerHeight + 'px'; DivFR.style.verticalAlign = 'top'; DivFR.style.paddingtop = '2px'; if (isFooter) { var tblfr = tbl.cloneNode(true); tblfr.removeChild(tblfr.getElementsByTagName('tbody')[0]); var tblBody = document.createElement('tbody'); tblfr.style.width = '100%'; tblfr.cellSpacing = "0"; tblfr.border = "0px"; tblfr.rules = "none"; //*****In the case of Footer Row ******* tblBody.appendChild(tbl.rows[tbl.rows.length - 1]); tblfr.appendChild(tblBody); DivFR.appendChild(tblfr); } //****Copy Header in divHeaderRow**** DivHR.appendChild(tbl.cloneNode(true)); } } function OnScrollDiv(Scrollablediv) { document.getElementById('DivHeaderRow').scrollLeft = Scrollablediv.scrollLeft; document.getElementById('DivFooterRow').scrollLeft = Scrollablediv.scrollLeft; } </script> <title></title> </head> <body> <form id="form1" runat="server"> <br /> <div id="DivRoot" align="center"> <div style="overflow: hidden;" id="DivHeaderRow"> </div> <div style="overflow: scroll; align-content: center" onscroll="OnScrollDiv(this)" id="DivMainContent"> <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataKeyNames="PropertyID" DataSourceID="SqlDataSource1" CellPadding="2" RowStyle-HorizontalAlign="Center"> <Columns> <asp:TemplateField ItemStyle-Width="25px" HeaderText=""> <ItemTemplate> <asp:ImageButton ID="editbtnre" ImageUrl="~/templates/images/small-pencil.jpg" runat="server" Width="19" Height="19" CommandArgument='<%# Eval("PropertyID") %>' /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField ItemStyle-Width="25px" HeaderText=""> <ItemTemplate> <asp:ImageButton ID="deletebtnre" ImageUrl="~/templates/images/delete-icon.png" runat="server" Width="18" Height="18" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="propertystreet" HeaderText="Property Address" SortExpression="propertystreet" /> <asp:BoundField DataField="propertyvalue" HeaderText="Property Value" SortExpression="propertyvalue" /> <asp:BoundField DataField="propertydispo" HeaderText="Status" SortExpression="propertydispo" /> <asp:BoundField DataField="propertytiho" HeaderText="Ins/Tax/Assoc" SortExpression="propertytiho" /> <asp:BoundField DataField="propertyrentalinc" HeaderText="Rental Income" SortExpression="propertyrentalinc" /> <asp:TemplateField ItemStyle-Width="125px" HeaderText=""> <ItemTemplate> <asp:Label ID="lblnetrent" runat="server" Text=""></asp:Label> </ItemTemplate> <HeaderTemplate> <asp:Label ID="lblnetrent" runat="server" Text="Net Rent"></asp:Label> </HeaderTemplate> </asp:TemplateField> <asp:TemplateField ItemStyle-Width="125px" HeaderText="Subject Property"> <ItemTemplate> <asp:CheckBox ID="cbpropertysubject" runat="server" Checked='<%# Bind("propertysubject") %>' Enabled="false" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> <div id="DivFooterRow" style="overflow: hidden"> </div> </div> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MortgageAppsConnectionString %>" SelectCommand="SELECT * FROM [Realestate] WHERE ([ApplicantID] = @ApplicantID)"> <SelectParameters> <asp:SessionParameter Name="ApplicantID" SessionField="applicantid" Type="Int32" /> </SelectParameters> </asp:SqlDataSource> </form> </body> </html> Imports System.Configuration Imports System.Data Imports System.Data.SqlClient Imports System.Drawing Imports System.Web.UI Imports System.Web.UI.WebControls Imports DataSet1TableAdapters Partial Class Default12 Inherits System.Web.UI.Page Protected Sub btnBindGrid_Click(ByVal sender As Object, ByVal e As EventArgs) 'gridShow.DataSource = ds 'gridShow.DataBind() ScriptManager.RegisterStartupScript(Page, Me.[GetType](), "Key", "<script>MakeStaticHeader('" & GridView2.ClientID & "', 500, 1000 , 40 ,true); </script>", False) End Sub End Class
