我使用的是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.
我无法删除/替换infragistics网格与其他一些巫术。任何指导都将受到高度赞赏。
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>