我正在使用 Infragistics 7.1 版（NetAdvantage 2008 vol 3）。我对 UltraWebGrid 标题对齐有疑问。当显示网格时，列的标题在除 IE 之外的所有浏览器中从内容和页脚中失去对齐，我已经搜索了很多解决方案。我尝试的一些解决方案如下：
1) Setting UseFixedHeaders to False.
2) Adding HtmlTextWriter in Render Event.
3) Setting Percentages for width rather than pixels.
4) Setting percentages for headers along with columns.
5) Adding Scrollbar button to Header along with other contents.
我无法用其他巫术移除/替换基础设施网格。任何指导将不胜感激。
.aspx 文件：
<%@ Register Assembly="Infragistics2.WebUI.UltraWebGrid.ExcelExport.v7.1, Version=7.1.20071.40, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
Namespace="Infragistics.WebUI.UltraWebGrid.ExcelExport" TagPrefix="igtblexp" %>
<%@ Register Assembly="Infragistics2.WebUI.Misc.v7.1, Version=7.1.20071.40, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
Namespace="Infragistics.WebUI.Misc" TagPrefix="igmisc" %>
<%@ Register Assembly="Infragistics2.WebUI.UltraWebGrid.v7.1, Version=7.1.20071.40, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
Namespace="Infragistics.WebUI.UltraWebGrid" TagPrefix="igtbl" %>
<asp:Content ID="Content2" runat="Server" ContentPlaceHolderID="ContentPlaceHolder1">
<script language="javascript" type="text/javascript">
function SetVerticalScrollBar() {
var div = document.getElementById('ctl00xContentPlaceHolder1xgridReportMain_div');
var hasVerticalScrollbar = div.scrollHeight > div.clientHeight;
var div1 = document.getElementById('ctl00xContentPlaceHolder1xgridReportMain_hdiv');
// alert(hasVerticalScrollbar);
if (hasVerticalScrollbar) {
div1.style.overflowY = 'scroll';
} else {
div1.style.overflowY = 'hidden';
}
}
</script>
<igmisc:WebAsyncRefreshPanel ID="WebAsyncRefreshPanel1" runat="server" Height="100%"
InitializePanel="WebAsyncRefreshPanel1_InitializePanel" RefreshComplete="WebAsyncRefreshPanel1_RefreshComplete" Width="100%"
ToolTip="Filter Records" RefreshTargetIDs="lblTest">
<igtbl:UltraWebGrid ID="gridReportMain" runat="server" OnInitializeLayout="gridReportMain_InitializeLayout"
OnInitializeRow="gridReportMain_InitializeRow" OnPageIndexChanged="gridReportMain_PageIndexChanged"
OnSortColumn="gridReportMain_SortColumn" Style="left: 0px; top: 0px" OnItemCommand="gridReportMain_ItemCommand"
Height="380px" Width="1000px">
</igtbl:UltraWebGrid>
</igmisc:WebAsyncRefreshPanel>
Aspx.cs File
protected override void Render(HtmlTextWriter writer)
{
StringBuilder sb = new StringBuilder();
HtmlTextWriter tw = new HtmlTextWriter(new System.IO.StringWriter(sb));
//Render the page to the new HtmlTextWriter which actually writes to the stringbuilder
base.Render(tw);
//Get the rendered content
string sContent = sb.ToString();
// sContent=Util.SetCaptionWidth(sContent, gridReportMain);
sContent = Util.HandleColGroup(sContent, null);
//Now output it to the page, if you want
writer.Write(sContent);
// .... render using the provided writUtier
}
public void BindGrid()
{
gridReportMain.Columns.FromKey("col1").Width = Unit.Percentage(8);
gridReportMain.Columns.FromKey("col1").CellStyle.HorizontalAlign = HorizontalAlign.Center;
gridReportMain.Columns.FromKey("col2").Width = Unit.Percentage(17);
gridReportMain.Columns.FromKey("col2").CellStyle.HorizontalAlign = HorizontalAlign.Center;
gridReportMain.Columns.FromKey("col3").Width = Unit.Percentage(35);
gridReportMain.Columns.FromKey("col3").CellStyle.Wrap = true;
gridReportMain.Columns.FromKey("col3").CellStyle.HorizontalAlign = HorizontalAlign.Left;
gridReportMain.Columns.FromKey("col4").Width = Unit.Percentage(20);
gridReportMain.Columns.FromKey("col4").CellStyle.HorizontalAlign = HorizontalAlign.Center;
gridReportMain.Columns.FromKey("col5").CellStyle.Width = Unit.Percentage(20);
gridReportMain.Columns.FromKey("col5").CellStyle.HorizontalAlign = HorizontalAlign.Right;
}
//chrome浏览器渲染的HTML代码如下
<div id="ctl00_ContentPlaceHolder1_WebAsyncRefreshPanel1" style="width: 100%; height: 100%;">
<input type="hidden" id="ctl00_ContentPlaceHolder1_gridReportMain" name="ctl00xContentPlaceHolder1xgridReportMain" value="">
<table border="0" cellpadding="0" cellspacing="0" id="ctl00xContentPlaceHolder1xgridReportMain_main" style="overflow: hidden; table-layout: fixed; position: relative; width: 100%; height: 420px;" class="ig_a92c6fb9_0" onresize="igtbl_onResize('ctl00xContentPlaceHolder1xgridReportMain');" onmousemove="igtbl_tableMouseMove(event,'ctl00xContentPlaceHolder1xgridReportMain');" onmouseup="igtbl_tableMouseUp(event,'ctl00xContentPlaceHolder1xgridReportMain');">
<tbody>
<tr style="">
<td align="left" style="overflow: hidden; width: 100%;">
<div id="ctl00xContentPlaceHolder1xgridReportMain_hdiv" onscroll="igtbl_onStationaryMarginScroll(event, 'ctl00xContentPlaceHolder1xgridReportMain', 'ctl00xContentPlaceHolder1xgridReportMain_hdiv')" style="overflow: hidden; width: 100%; position: relative;">
<table border="0" cellpadding="0" cellspacing="0" style="position: relative; table-layout: fixed; height: 100%; left: 0px;" bandno="0" width="100%">
<colgroup>
<col width="3%">
<col width="8%">
<col width="17%">
<col width="35%">
<col width="20%">
<col width="">
</colgroup>
<thead class="ig_a92c6fb9_2 ig_a92c6fb9_4" onmousedown="igtbl_headerClickDown(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseup="igtbl_headerClickUp(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseout="igtbl_headerMouseOut(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmousemove="igtbl_headerMouseMove(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseover="igtbl_headerMouseOver(event,"ctl00xContentPlaceHolder1xgridReportMain");" oncontextmenu="igtbl_headerContextMenu(event,"ctl00xContentPlaceHolder1xgridReportMain");" ondblclick="igtbl_cellDblClick(event,"ctl00xContentPlaceHolder1xgridReportMain");">
<tr>
<th width="22px" height="21px">
<img src="/WebResource.axd?d=7pWSBIm8MJIGEb1Wa5NJl8vAQvyUcqnpFOduPjzVgdJugewSUhKHTQd6piYU4mvepwpZ0y9a-4ZQxtK6QCPcx7x1pdSR9sId6hyI6JggZaIW2Azd88swUnViW5RwSJFzBhHQxK_x-HAm2_7aBziVikxEEMyVFLgBQCk5MN44TpZWHnFoRlSrLaRv4OPBV-S3SAn5Jw2&t=634992170622404219" border="0" imgtype="blank" style="visibility: hidden;"></th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_c_0_0" columnno="0" height="21px">
<nobr>col1</nobr>
</th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_c_0_1" columnno="1" height="21px">
<nobr>Col2</nobr>
</th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_c_0_2" columnno="2" height="21px">
<nobr>col3</nobr>
</th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_c_0_3" columnno="3" height="21px">
<nobr>Col4</nobr>
</th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_c_0_4" columnno="4" height="21px">
<nobr>col5</nobr>
</th>
</tr>
</thead>
</table>
</div>
</td>
</tr>
<tr id="ctl00xContentPlaceHolder1xgridReportMain_mr" style="height: 100%;">
<td id="ctl00xContentPlaceHolder1xgridReportMain_mc" align="left" style="height: 100%; width: 100%; vertical-align: top;">
<div id="ctl00xContentPlaceHolder1xgridReportMain_div" style="overflow: hidden; overflow-y: auto; width: 100%; height: 100%;" onscroll="igtbl_onScroll(event,"ctl00xContentPlaceHolder1xgridReportMain");" tabindexpage="0" hidefocus="true">
<table id="G_ctl00xContentPlaceHolder1xgridReportMain" bandno="0" border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed; width: 100%; position: relative;" onselectstart="igtbl_selectStart(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmousedown="igtbl_cellClickDown(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseup="igtbl_cellClickUp(event,"ctl00xContentPlaceHolder1xgridReportMain");" oncontextmenu="igtbl_cellContextMenu(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmousemove="igtbl_cellMouseMove(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseover="igtbl_cellMouseOver(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseout="igtbl_cellMouseOut(event,"ctl00xContentPlaceHolder1xgridReportMain");" ondblclick="igtbl_cellDblClick(event,"ctl00xContentPlaceHolder1xgridReportMain");">
<colgroup>
<col width="3%">
<col width="8%">
<col width="17%">
<col width="35%">
<col width="20%">
<col width="">
</colgroup>
<thead class="ig_a92c6fb9_2 ig_a92c6fb9_4" style="height: 21px; display: none;" onmousedown="igtbl_headerClickDown(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseup="igtbl_headerClickUp(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseout="igtbl_headerMouseOut(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmousemove="igtbl_headerMouseMove(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseover="igtbl_headerMouseOver(event,"ctl00xContentPlaceHolder1xgridReportMain");" oncontextmenu="igtbl_headerContextMenu(event,"ctl00xContentPlaceHolder1xgridReportMain");">
<tr>
<th height="21px">
<img src="/WebResource.axd?d=7pWSBIm8MJIGEb1Wa5NJl8vAQvyUcqnpFOduPjzVgdJugewSUhKHTQd6piYU4mvepwpZ0y9a-4ZQxtK6QCPcx7x1pdSR9sId6hyI6JggZaIW2Azd88swUnViW5RwSJFzBhHQxK_x-HAm2_7aBziVikxEEMyVFLgBQCk5MN44TpZWHnFoRlSrLaRv4OPBV-S3SAn5Jw2&t=634992170622404219" border="0" imgtype="blank" style="visibility: hidden;"></th>
<th id="Th1" columnno="0" height="21px"> </th>
<th id="Th2" columnno="1" height="21px"> </th>
<th id="Th3" columnno="2" height="21px"> </th>
<th id="Th4" columnno="3" height="21px"> </th>
<th id="Th5" columnno="4" height="21px"> </th>
</tr>
</thead>
<tbody style="height: 100%" class="ig_a92c6fb9_2 ig_a92c6fb9_4">
<tr id="ctl00xContentPlaceHolder1xgridReportMain_r_0" style="height: 21px;" level="0">
<th id="ctl00xContentPlaceHolder1xgridReportMain_l_0" style="width: 22px; height: 21px;">
<img src="/WebResource.axd?d=7pWSBIm8MJIGEb1Wa5NJl8vAQvyUcqnpFOduPjzVgdJugewSUhKHTQd6piYU4mvepwpZ0y9a-4ZQxtK6QCPcx7x1pdSR9sId6hyI6JggZaIW2Azd88swUnViW5RwSJFzBhHQxK_x-HAm2_7aBziVikxEEMyVFLgBQCk5MN44TpZWHnFoRlSrLaRv4OPBV-S3SAn5Jw2&t=634992170622404219" border="0" imgtype="blank" style="visibility: hidden;"></th>
<td class="ig_a92c6fb9_15" level="0_0" id="ctl00xContentPlaceHolder1xgridReportMain_rc_0_0">
<nobr>1</nobr>
</td>
<td class="ig_a92c6fb9_16" level="0_1" id="ctl00xContentPlaceHolder1xgridReportMain_rc_0_1">
<nobr><div style="text-align:center">row1col2</div></nobr>
</td>
<td class="ig_a92c6fb9_17" level="0_2" id="ctl00xContentPlaceHolder1xgridReportMain_rc_0_2">
<div style="text-align: left">Row1Col3</div>
</td>
<td class="ig_a92c6fb9_18" level="0_3" id="ctl00xContentPlaceHolder1xgridReportMain_rc_0_3">
<nobr><div style="text-align:center">row1col4</div></nobr>
</td>
<td class="ig_a92c6fb9_19" level="0_4" id="ctl00xContentPlaceHolder1xgridReportMain_rc_0_4">
<nobr><div style="text-align:right">row1col5</div></nobr>
</td>
</tr>
</tbody>
<tfoot class="ig_a92c6fb9_2 ig_a92c6fb9_4 ig_a92c6fb9_5" style="height: 21px;" onmousedown="igtbl_headerClickDown(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseup="igtbl_headerClickUp(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseout="igtbl_headerMouseOut(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmousemove="igtbl_headerMouseMove(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseover="igtbl_headerMouseOver(event,"ctl00xContentPlaceHolder1xgridReportMain");" oncontextmenu="igtbl_headerContextMenu(event,"ctl00xContentPlaceHolder1xgridReportMain");">
<tr>
<th height="21px">
<img src="/WebResource.axd?d=7pWSBIm8MJIGEb1Wa5NJl8vAQvyUcqnpFOduPjzVgdJugewSUhKHTQd6piYU4mvepwpZ0y9a-4ZQxtK6QCPcx7x1pdSR9sId6hyI6JggZaIW2Azd88swUnViW5RwSJFzBhHQxK_x-HAm2_7aBziVikxEEMyVFLgBQCk5MN44TpZWHnFoRlSrLaRv4OPBV-S3SAn5Jw2&t=634992170622404219" border="0" imgtype="blank" style="visibility: hidden;"></th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_f_0_0" height="21px" key="col1"> </th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_f_0_1" height="21px" key="col2">
<nobr>Total</nobr>
</th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_f_0_2" height="21px" key="col3"> </th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_f_0_3" height="21px" key="SubmissionDate"> </th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_f_0_4" height="21px" key="TotalValueOfServices">
<nobr>10,302</nobr>
</th>
</tr>
</tfoot>
</table>
</div>
</td>
</tr>
<tr style="height: 1%">
<td id="ctl00$ContentPlaceHolder1$gridReportMain_pager" align="Right" class="ig_a92c6fb9_0 ig_a92c6fb9_1" style="border-top-width: 0px; height: 100%;" onclick="igtbl_onPagerClick('ctl00xContentPlaceHolder1xgridReportMain',event)"> </td>
</tr>
</tbody>
</table>
</div>