I am using the current trial version of the grid version 2.0.2 and the cell and Header are not align properly. Am I doing something wrong?
My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style>body {font: 12px Tahoma}</style>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="runtime/styles/xp/aw.css" rel="stylesheet" type="text/css">
<script src="runtime/lib/aw.js"></script>
<!-- grid format
#myGrid .aw-column-0 {width: 80px;}
#myGrid .aw-column-1 {width: 200px;}
#myGrid .aw-column-2 {text-align: right;}
#myGrid .aw-column-3 {text-align: right;}
#myGrid .aw-column-4 {text-align: right;}
-->
<style>
#myGrid {height: 400px; width: 600px;}
#myGrid .aw-row-selector {text-align: center}
#myGrid .aw-column-0 {width: 80px;}
#myGrid .aw-column-1 {width: 80px;}
#myGrid .aw-column-2 {width: 80px;}
#myGrid .aw-column-3 {width: 80px;}
#myGrid .aw-column-4 {width: 80px;}
#myGrid .aw-column-5 {width: 80px;}
#myGrid .aw-column-6 {width: 80px;}
#myGrid .aw-column-7 {width: 80px;}
#myGrid .aw-column-8 {width: 80px;}
#myGrid .aw-column-9 {width: 80px;}
#myGrid .aw-column-10 {width: 80px;}
#myGrid .aw-column-11 {width: 80px;}
#myGrid .aw-column-12 {width: 80px;}
#myGrid .aw-column-13 {width: 80px;}
#myGrid .aw-column-14 {width: 80px;}
#myGrid .aw-column-15 {width: 80px;}
#myGrid .aw-column-16 {width: 80px;}
#myGrid .aw-column-17 {width: 80px;}
#myGrid .aw-column-18 {width: 80px;}
#myGrid .aw-column-19 {width: 80px;}
#myGrid .aw-column-20 {width: 80px;}
#myGrid .aw-column-21 {width: 80px;}
#myGrid .aw-column-22 {width: 80px;}
#myGrid .aw-column-23 {width: 80px;}
#myGrid .aw-column-24 {width: 80px;}
#myGrid .aw-column-25 {width: 80px;}
#myGrid .aw-column-26 {width: 80px;}
#myGrid .aw-column-27 {width: 80px;}
#myGrid .aw-column-28 {width: 80px;}
#myGrid .aw-column-29 {width: 80px;}
#myGrid .aw-column-30 {width: 80px;}
#myGrid .aw-grid-cell {border-right: 1px solid threedlightshadow;}
#myGrid .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
<!-- grid data -->
<script>
// create grid control
var grid = new AW.UI.Grid;
grid.setId("myGrid");
function test(){
PageMethods.GetTSData(OnGetTSDataComplete);
}
//retObj.Header:string array,retObj.Detail:multidimensional array
function OnGetTSDataComplete(retObj){
loadgrid(retObj.Header,retObj.Detail)
}
function loadgrid(Header,Detail){
// set grid text
grid.setHeaderText(Header);
grid.setCellText(Detail);
// set number of columns/rows
grid.setColumnCount(Header.length);
grid.setRowCount(Detail.length);
// replace the placeholder tag with the grid html
grid.refresh();
}
</script>
</head>
<body onload="test()">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="true">
</asp:ScriptManager>
<input id="Button1" type="button" value="refresh" onclick="test(2)" /><br>
<span id="myGrid"></span>
</form>
</body>
</html>
If the page contains standards-compliant doctype the browser switches into the box model where the CSS width/height is applied to the element content and the padding+border is added on top of that ('content-box' model). When you are adding border to the grid cells you should reduce the padding in order to keep the total size the same. The default left/right padding is 4px, so when adding 1px right border you should set the right padding to 3px -
#myGrid .aw-grid-cell {
border-right: 1px solid threedlightshadow;
padding-right: 3px;
}
This topic is archived.