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=" " 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: 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
Post a Comment