javascript - Fix Header Row of ASP.NET GridView -


before getting in details, mention i've tried various solutions stackoverflow , net too. but, none suitable in scenario. so, provided detailed information.

in asp.net 2.0 web application, gridview controls used , columns of gridview generated @ runtime respect user's settings. so, in default.aspx gridview definition 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="&nbsp" 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 columns added @ runtime , below method creates columns depending upon user settings web.config:

private void createdefaultgridview(hashtable htpartschema)     {         string stempheader, stempalignment, stempwidth, stempvisible;         try         {             //get partlist settings section 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 present in part schema                     if (htpartschema.containskey(key.toupper()) == true)                     {                         //create new databound column                                                 boundfield gridcol = new boundfield();                         //assign datafield bind data table column                         gridcol.datafield = key;                         //get value 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 column in gridview                             objlist.columns.add(gridcol);                              //cond: check 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 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 bounded gridview few events , css applied @ runtime in datarowbound event of gridview mentioned below:

protected void objlist_rowdatabound(object sender, gridviewroweventargs e)     {         try         {             int idatarowscounter = 0;             if (e.row.rowtype == datacontrolrowtype.datarow)             {                 //get datatable                  datatable dtlist = (datatable)session["listtable" + viewstate["viewerid"]];                  //get position of 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 row in case needed in javascript                 e.row.attributes.add("rowposition", strpostion);                 //on row checkbox check change of 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 below: enter image description here respective css 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 wanted fix header row of gridview. solution can in javascript or jquery. suggestions appreciated.

try this,

aspx page:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>         <script type="text/javascript" src="http://ajax.googleapis.com/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>();         (int = 1; < 40; i++)         {             details objdetails = new details();             objdetails.userid = i;             objdetails.firstname = "test" + i;             gt.add(objdetails);         }         return gt;     } 

for reference use : http://gridviewscroll.aspcity.idv.tw/


Comments