Good day all,
I have a gridview in my webpage where in I designed it to have a header that is fixed. Based from this article http://www.aspsnippets.com/Articles/GridView-with-Fixed-Static-Header-on-scroll-in-ASPNet.aspx , I was able to successfully achieve the desired output. However, there are some issues or conflict that I have noticed in terms of formatting, hoping to get some expert advice to fix them
see Image
As you can see in the encircled area, the alignment of the header in its columns are misaligned. I did stretched the gridview to fit to the whole div by setting a 100% value in its width propert. When I remove that, the columns are aligned but the whole gridview is not fit to the designated div part. like this
here are the codes
1. For the JQUERY plugin
function MakeScrollable(a, b) {
var c = a.offsetWidth;
var d = a.offsetHeight;
var e = new Array;
for (var f = 0; f < a.getElementsByTagName("TH").length; f++) {
e[f] = a.getElementsByTagName("TH")[f].offsetWidth
}
a.parentNode.appendChild(document.createElement("div"));
var g = a.parentNode;
var h = document.createElement("table");
for (f = 0; f < a.attributes.length; f++) {
if (a.attributes[f].specified && a.attributes[f].name != "id") {
h.setAttribute(a.attributes[f].name, a.attributes[f].value)
}
}
h.style.cssText = a.style.cssText;
h.style.width = c + "px";
h.appendChild(document.createElement("tbody"));
h.getElementsByTagName("tbody")[0].appendChild(a.getElementsByTagName("TR")[0]);
var i = h.getElementsByTagName("TH");
var j = a.getElementsByTagName("TR")[0];
for (var f = 0; f < i.length; f++) {
var k;
if (e[f] > j.getElementsByTagName("TD")[f].offsetWidth) {
k = e[f]
} else {
k = j.getElementsByTagName("TD")[f].offsetWidth
}
i[f].style.width = parseInt(k - 3) + "px";
j.getElementsByTagName("TD")[f].style.width = parseInt(k - 3) + "px"
}
g.removeChild(a);
var l = document.createElement("div");
l.appendChild(h);
g.appendChild(l);
if (b.Width > 0) {
c = b.Width
}
var m = document.createElement("div");
if (parseInt(d) > b.ScrollHeight) {
c = parseInt(c) + 17
}
m.style.cssText = "overflow:auto;height:" + b.ScrollHeight + "px;width:" + c + "px";
m.appendChild(a);
g.appendChild(m)
} (function (a) {
a.fn.Scrollable = function (b) {
var c = {
ScrollHeight: 300,
Width: 0,
IsInUpdatePanel: false
};
var b = a.extend(c, b);
return this.each(function () {
var c = a(this).get(0);
var d = c.id;
MakeScrollable(c, b);
if (b.IsInUpdatePanel) {
var e = Sys.WebForms.PageRequestManager.getInstance();
if (e != null) {
e.add_endRequest(function (c, e) {
MakeScrollable(a("#" + d).get(0), b)
})
}
}
})
}
})(jQuery);
2. mark-up html
<div class="GridviewPanelBody">
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#DEDFDE"
BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black"
GridLines="Vertical" Font-Size="Smaller" EmptyDataText="No Records Found" width="100%"
ShowHeaderWhenEmpty="True" AutoGenerateColumns="false" >
<emptydatarowstyle backcolor="white" forecolor="black"/> <emptydatatemplate> No Data Found.</emptydatatemplate>
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField HeaderText="Location" DataField="locationd" />
<asp:BoundField HeaderText="Retail Partner" DataField="name" />
<asp:BoundField HeaderText="FL Area" DataField="sqm" />
<asp:BoundField HeaderText="Previous Month" DataField="PreviousMonth" DataFormatString="{0:#,##0.00;(#,##0.00);0}" />
<asp:BoundField HeaderText="Current Month" DataField="CurrentMonth" DataFormatString="{0:#,##0.00;(#,##0.00);0}" />
<asp:BoundField HeaderText="Last Year Month" DataField="LastYearMonth" DataFormatString="{0:#,##0.00;(#,##0.00);0}" />
<asp:BoundField HeaderText="Sales/SQM" DataField="SALES/SQM" DataFormatString="{0:#,##0.00;(#,##0.00);0}"/>
<asp:BoundField HeaderText="Inc/Dec%" DataField="INC/DEC%" DataFormatString="{0:#,##0.00;}" />
</Columns>
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" Height="25px"/>
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FBFBF2" />
<SortedAscendingHeaderStyle BackColor="#848384" />
<SortedDescendingCellStyle BackColor="#EAEAD3" />
<SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>
</div>
