Hi paulray,
Add a CSS class property to GridView.
CssClass = "GridViewClass"
And then add this css in page.
<style type="text/css">
.GridViewClass th
{
text-align: center !important;
}
.GridViewClass td
{
text-align: center !important;
}
</style>
And to place the gridview center of the page place the gridview inside the center tag.
Check this example. Now please take its reference and correct your code.
Using the below article i have modified the html.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.GridViewClass th
{
text-align: center !important;
}
.GridViewClass td
{
text-align: center !important;
}
</style>
<script type="text/javascript">
var GridId = "<%=GridView1.ClientID %>";
var ScrollHeight = 300;
window.onload = function () {
var grid = document.getElementById(GridId);
var gridWidth = grid.offsetWidth;
var gridHeight = grid.offsetHeight;
var headerCellWidths = new Array();
for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
}
grid.parentNode.appendChild(document.createElement("div"));
var parentDiv = grid.parentNode;
var table = document.createElement("table");
for (i = 0; i < grid.attributes.length; i++) {
if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
}
}
table.style.cssText = grid.style.cssText;
table.style.width = gridWidth + "px";
table.appendChild(document.createElement("tbody"));
table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
var cells = table.getElementsByTagName("TH");
var gridRow = grid.getElementsByTagName("TR")[0];
for (var i = 0; i < cells.length; i++) {
var width;
if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
width = headerCellWidths[i];
}
else {
width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
}
cells[i].style.width = parseInt(width - 3) + "px";
gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
}
parentDiv.removeChild(grid);
var dummyHeader = document.createElement("div");
dummyHeader.appendChild(table);
parentDiv.appendChild(dummyHeader);
var scrollableDiv = document.createElement("div");
if (parseInt(gridHeight) > ScrollHeight) {
gridWidth = parseInt(gridWidth) + 17;
}
scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px";
scrollableDiv.appendChild(grid);
parentDiv.appendChild(scrollableDiv);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<center>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="GridViewClass">
<Columns>
<asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="Country" HeaderText="Country" />
</Columns>
</asp:GridView>
</center>
</form>
</body>
</html>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("~/App_Data/Customers.xml"));
GridView1.DataSource = ds;
GridView1.DataBind();
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
Dim ds As DataSet = New DataSet
ds.ReadXml(Server.MapPath("~/App_Data/Customers.xml"))
GridView1.DataSource = ds
GridView1.DataBind
End If
End Sub
