admin管理员组文章数量:1418661
Before getting in details, I would like to mention I've tried various solutions from stackoverflow and net too. But, none suitable in my scenario. So, I provided detailed information.
In an ASP.NET 2.0 Web Application, a gridview controls is used and columns of that gridview are generated at runtime with respect to user's settings. So, in Default.aspx the gridview definition is as below:
<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>
The gridview columns are added at runtime and below method creates the columns depending upon user settings from 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);
}
}
And when rows are bounded with GridView few events and css are also applied at runtime in DataRowBound Event of GridView as mentioned below:
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);
}
}
Its presentation is something like below: Respective css is as below:
.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;
}
What I wanted to do is to fix the header row of that gridview. Solution can be in javascript or jQuery. Suggestions are appreciated.
Before getting in details, I would like to mention I've tried various solutions from stackoverflow and net too. But, none suitable in my scenario. So, I provided detailed information.
In an ASP.NET 2.0 Web Application, a gridview controls is used and columns of that gridview are generated at runtime with respect to user's settings. So, in Default.aspx the gridview definition is as below:
<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>
The gridview columns are added at runtime and below method creates the columns depending upon user settings from 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);
}
}
And when rows are bounded with GridView few events and css are also applied at runtime in DataRowBound Event of GridView as mentioned below:
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);
}
}
Its presentation is something like below: Respective css is as below:
.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;
}
What I wanted to do is to fix the header row of that gridview. Solution can be in javascript or jQuery. Suggestions are appreciated.
Share Improve this question asked Jul 15, 2013 at 5:24 Itz.IrshadItz.Irshad 1,0245 gold badges23 silver badges44 bronze badges2 Answers
Reset to default 2Try this,
ASPX page:
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="gridviewScroll.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
gridviewScroll();
});
function gridviewScroll() {
gridView1 = $('#gridtest').gridviewScroll({
width: 600,
height: 300,
railcolor: "#F0F0F0",
barcolor: "#CDCDCD",
barhovercolor: "#606060",
bgcolor: "#F0F0F0",
freezesize: 1,
arrowsize: 30,
headerrowcount: 1,
railsize: 16,
barsize: 8
});
}
</script>
<div style="width: 100%; height: 400px; overflow: scroll">
<asp:GridView ID="gridtest" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="UserID" HeaderText="ID" SortExpression="UserID" ReadOnly="true" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
</Columns>
</asp:GridView>
</div>
CS page:
protected void Page_Load(object sender, EventArgs e)
{
gridtest.DataSource = getUserDetails();
gridtest.DataBind();
}
public class details
{
public int UserID { get; set; }
public string FirstName {get;set;}
}
public List<details> getUserDetails()
{
List<details> gt = new List<details>();
for (int i = 1; i < 40; i++)
{
details objDetails = new details();
objDetails.UserID = i;
objDetails.FirstName = "test" + i;
gt.Add(objDetails);
}
return gt;
}
For reference use this : http://gridviewscroll.aspcity.idv.tw/
Your best bet would be to create two GridViews. One purely for the header. Second, for the body wrapped in a scrollable div just below the first one. Position the second gridview with a negative top margin to hide its header. This way you will use the header of the first girdview and scroll the second one.
Alternatively, you can use a plugin like this one: http://www.fixedheadertable.
This plugin also uses the same logic as I described above.
本文标签： javascriptFix Header Row of ASPNET GridViewStack Overflow
版权声明：本文标题：javascript - Fix Header Row of ASP.NET GridView - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745291252a2651809.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论