詳細に入る前に、stackoverflow と net からもさまざまなソリューションを試したことに言及したいと思います。しかし、私のシナリオには適していません。というわけで、詳細情報を提供しました。
ASP.NET 2.0 Web アプリケーションでは、グリッドビュー コントロールが使用され、そのグリッドビューの列がユーザーの設定に関して実行時に生成されます。したがって、Default.aspx では、グリッドビューの定義は次のようになります。
<div id="DivListB" runat="server" onscroll="SaveScrollValue(); SetListFloatingHeader()" visible="True">
<asp:GridView ID="ObjList" runat="server" OnLoad="ReloadGrid" CssClass="ObjList" AutoGenerateColumns="false" OnRowDataBound="ObjList_RowDataBound" AutoGenerateSelectButton="false" OnSelectedIndexChanged="ObjList_SelectedIndexChanged" OnRowCreated="ObjList_RowCreated">
<Columns>
<asp:TemplateField HeaderText=" " ItemStyle-Width="46px" ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>
<asp:CheckBox AutoPostBack="true" ID="chkAll" runat="server" OnCheckedChanged="HeaderChk_Changed" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox AutoPostBack="true" ID="chkRow" runat="server" Checked='<%# DataBinder.Eval(Container.DataItem, "Selection")%>' OnCheckedChanged="ChkRow_OnCheckChange" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
gridview 列は実行時に追加され、以下のメソッドは web.config からのユーザー設定に応じて列を作成します。
private void CreateDefaultGridView(Hashtable htPartSchema)
{
string sTempHeader, sTempAlignment, sTempWidth, sTempVisible;
try
{
//get partlist settings section from web.config
NameValueCollection plConfigKeys = (NameValueCollection)ConfigurationManager.GetSection("CONFIG_SETTINGS/PL_SETTINGS");
//cond: check partlist config keys exist
if (plConfigKeys != null && plConfigKeys.Count > 0)
{
//loop: every key present in configruation
foreach (string key in plConfigKeys)
{
//cond: config key is present in part schema
if (htPartSchema.ContainsKey(key.ToUpper()) == true)
{
//create new databound column
BoundField gridCol = new BoundField();
//assign datafield to bind with data table column
gridCol.DataField = key;
//get value from config key
string sKeyValue = plConfigKeys[key].ToString();
try
{
string[] sTempArray = sKeyValue.Split(new string[] { "|" }, StringSplitOptions.RemoveEmptyEntries);
sTempHeader = sTempArray[0];
sTempAlignment = sTempArray[1];
sTempWidth = sTempArray[2];
sTempVisible = sTempArray[3];
PLDefaultColumnHeaderAlignments.Add(sTempHeader, sTempAlignment);
PLDefaultColumHeaderWidths.Add(sTempHeader, sTempWidth);
}
catch
{
sTempHeader = string.Empty;
sTempAlignment = string.Empty;
sTempWidth = string.Empty;
sTempVisible = "false";
}
if (sTempVisible.ToLower().Equals("true"))
{
//assign display header text
gridCol.HeaderText = sTempHeader;
//add the column in the gridview
ObjList.Columns.Add(gridCol);
//cond: to check the specified alignment
if (sTempAlignment.ToUpper() == "L")
{
gridCol.ItemStyle.HorizontalAlign = HorizontalAlign.Left;
gridCol.HeaderStyle.HorizontalAlign = HorizontalAlign.Left;
}
else if (sTempAlignment.ToUpper() == "R")
{
gridCol.ItemStyle.HorizontalAlign = HorizontalAlign.Right;
gridCol.HeaderStyle.HorizontalAlign = HorizontalAlign.Right;
}
else if (sTempAlignment.ToUpper() == "C")
{
gridCol.ItemStyle.HorizontalAlign = HorizontalAlign.Center;
gridCol.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
}
if (string.IsNullOrEmpty(sTempWidth) == false)
{
gridCol.ControlStyle.Width = Unit.Pixel(int.Parse(sTempWidth));
gridCol.HeaderStyle.Width = int.Parse(sTempWidth);
gridCol.HeaderStyle.Wrap = false;
gridCol.ItemStyle.Wrap = false;
gridCol.ItemStyle.Width = Unit.Pixel(int.Parse(sTempWidth));
//set column width
double dTempColWidth = 120; //default value
double.TryParse(sTempWidth, out dTempColWidth);
//change width of grid view according to column sizes
ObjList.Width = new Unit((ObjList.Width.Value + dTempColWidth), UnitType.Pixel);
}
}
gridCol.ItemStyle.Wrap = false;
}
}
}
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
}
また、行が GridView にバインドされている場合、以下に示すように、実行時に GridView の DataRowBound イベントでいくつかのイベントと css も適用されます。
protected void ObjList_RowDataBound(object sender, GridViewRowEventArgs e)
{
try
{
int iDataRowsCounter = 0;
if (e.Row.RowType == DataControlRowType.DataRow)
{
//get datatable from
DataTable dtList = (DataTable)Session["ListTable" + ViewState["ViewerId"]];
//get position of the respective row
string strPostion = dtList.Rows[e.Row.RowIndex]["Position"].ToString();
string strLinkNum = dtList.Rows[e.Row.RowIndex]["LinkNumber"].ToString();
//get row check box
CheckBox cbRow = ((CheckBox)e.Row.FindControl("chkRow"));
string pnum = dtList.Rows[e.Row.RowIndex]["PartNumber"].ToString();
if (a_PartNumber != null && pnum == a_PartNumber)
{
HighlightPic.Value = HighlightPic.Value + "||" + e.Row.RowIndex.ToString();
e.Row.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#3D98FF");
e.Row.Style.Add(HtmlTextWriterStyle.Color, "#FFFFFF");
}
//mouse hover effects on gridview (CSS)
e.Row.Attributes.Add("onmouseover", "this.className='ObjListHighlight'");
e.Row.Attributes.Add("onmouseout", "this.className='ObjListNormal'");
//keep position of the row in case needed in javascript
e.Row.Attributes.Add("RowPosition", strPostion);
//on row checkbox check change of a single row
cbRow.Attributes.Add("onclick", "OnRowCheckChange(this, 'ObjList')");
//on full row click highlight picture
e.Row.Attributes.Add("onclick", "HighlightPicture('" + strPostion + "'," + e.Row.RowIndex + ", false)");
//on row double click
e.Row.Attributes.Add("ondblclick", "OnRowDblClick(" + e.Row.RowIndex + ",'ObjList')");
}
else if (e.Row.RowType == DataControlRowType.Header)
{
//find header checkbox control
CheckBox cbHeader = ((CheckBox)e.Row.FindControl("chkAll"));
e.Row.Attributes.Add("class", "item_HeaderRow");
e.Row.Cells[0].Attributes.Add("class", "item_HeaderCell");
//add header change event on checkbox click
cbHeader.Attributes.Add("onclick", "OnHeaderCheckChange(this,'ObjList')");
}
}
catch
{
throw new Exception(ex.Message);
}
}
そのプレゼンテーションは以下のようなものです:
それぞれの css は以下のとおりです:
.ObjList
{
height: auto;
}
.ObjListHighlight
{
background-color: #CAE4FF;
cursor: pointer;
}
.ObjListNormal
{
background-color: White;
cursor: pointer;
}
.ObjList tr.row
{
cursor: pointer;
color: #1B3A7A;
background-color: #FFFFFF;
}
.ObjList tr.row:hover
{
background-color: #CAE4FF;
}
.ObjList tr.row_selected
{
cursor: default;
color: #FFFFFF;
background-color: #3D98FF;
}
私がやりたかったのは、そのグリッドビューのヘッダー行を修正することです。ソリューションは、javascript または jQuery で作成できます。提案を歓迎します。