javascript - fixing position of gridview header while scrolling -
i want fix gridview header position @ time of vertical scroll columns headings must seen. have tried multiple solutions not single has worked me. follwing code popular fixing header of gridview in asp.net please sort out problem why not working
csscode
<style type="text/css"> .wrapperdiv { width:560px;height:290px;border: 1px solid black; } .wrapperdiv th { /* needed ie */ position: relative; } .wrapperdiv tr { /* needed ie */ height:0px; } </style> javascript code
<script type="text/ecmascript"> var headerheight = 8; freezegridviewheaderforieandff('gridview2', 'wrapperdiv'); function freezegridviewheaderforieandff(gridviewid, wrapperdivcssclass) { debugger; var grid = document.getelementbyid(gridviewid); if (grid) { if (grid.style && grid.style.visibility) grid.style.visibility = 'hidden'; if (grid.parentnode) { //find wrapper div output gridview var div = grid.parentnode; if (div.tagname == "div1") { div.classname = wrapperdivcssclass; div.style.overflow = "auto"; } } var grid = preparefixedheader(grid); var tbody = grid.getelementsbytagname('tbody')[0]; //needed firefox tbody.style.height = (div1.offsetheight - headerheight) + 'px'; tbody.style.overflowx = "hidden"; tbody.overflow = 'auto'; tbody.overflowx = 'hidden'; grid.style.visibility = 'visible'; } } function preparefixedheader(grid) { //find dom tbody element , , var tags = grid.getelementsbytagname('tbody'); if (tags != 'undefined') { var tbody = tags[0]; var trs = tbody.getelementsbytagname('tr'); if (trs != 'undefined') { headerheight += trs[0].offsetheight; //remove first tr tag var headtr = tbody.removechild(trs[0]); //create new element called thead var head = document.createelement('thead'); head.appendchild(headtr); //add thead element instead of tr css styles //can applied in both ie , firefox grid.insertbefore(head, grid.firstchild); } } return grid; } </script> gridview asp code
<div id="div1"style="overflow-x:hidden;overflow-y:auto;height:400px"> <table> <asp:gridview id="gridview2" style="table-layout:fixed;" width="1000px" autogeneratecolumns ="false" allowsorting="true" runat="server" cellpadding="4" forecolor="#333333" gridlines="none"> <alternatingrowstyle backcolor="white" /> <columns> <asp:templatefield headertext="assembly" headerstyle-font-size="small" > <itemtemplate > <asp:label id="label23" font-size="small" tooltip ="click see assembly page" runat="server" text='<%# bind("asbcd") %>' > </asp:label> </itemtemplate> <headerstyle borderstyle="outset" /> <itemstyle borderstyle="outset" horizontalalign ="center" /> </asp:templatefield> <asp:templatefield headertext="assemblyname" headerstyle-font-size="small" > <itemtemplate> <asp:label id="label24" font-size="small" tooltip ="click see assembly page" runat="server" text='<%# bind("asbnm") %>' > </asp:label> </itemtemplate> <headerstyle borderstyle="outset" /> <itemstyle borderstyle="outset" horizontalalign="left" /> </asp:templatefield> <asp:boundfield headertext="source" itemstyle-font-size="small" headerstyle-font-size="small" headerstyle-cssclass="fixedheadercell" > <headerstyle borderstyle="outset" /> <itemstyle borderstyle="outset" horizontalalign ="left"/> </asp:boundfield> <asp:boundfield headertext="operators" datafield="operators" itemstyle-font-size="small" headerstyle-font-size="small" headerstyle-cssclass="fixedheadercell" > <headerstyle borderstyle="outset" /> <itemstyle borderstyle="outset" horizontalalign ="left"/> </asp:boundfield> <asp:boundfield headertext="hours" datafield="days" itemstyle-font-size="small" headerstyle-font-size="small" headerstyle-cssclass="fixedheadercell" > <headerstyle borderstyle="outset" /> <itemstyle borderstyle="outset" horizontalalign ="right"/> </asp:boundfield> <asp:boundfield datafield="planneddt" headertext="start date" itemstyle-font-size="small" headerstyle-font-size="small" headerstyle-cssclass="fixedheadercell" dataformatstring="{0:dd-mmm-yyyy}" htmlencode="false" > <headerstyle borderstyle="outset" /> <itemstyle borderstyle="outset" horizontalalign ="right" /> </asp:boundfield> <asp:boundfield datafield="plancedenddt" headertext="end date" itemstyle-font-size="small" headerstyle-font-size="small" headerstyle-cssclass="fixedheadercell" dataformatstring="{0:dd-mmm-yyyy}" htmlencode="false" > <headerstyle borderstyle="outset" /> <itemstyle borderstyle="outset" horizontalalign ="right"/> </asp:boundfield> <asp:boundfield datafield="operator" headertext="operator" itemstyle-font-size="small" headerstyle-font-size="small" headerstyle-cssclass="fixedheadercell" > <headerstyle borderstyle="outset" /> <itemstyle borderstyle="outset" horizontalalign ="left"/> </asp:boundfield> <asp:boundfield datafield="actualdays" headertext="hours" itemstyle-font-size="small" headerstyle-font-size="small" headerstyle-cssclass="fixedheadercell" > <headerstyle borderstyle="outset" /> <itemstyle borderstyle="outset" horizontalalign ="right" /> </asp:boundfield> <asp:boundfield datafield="actualstartdt" headertext="start date " itemstyle-font-size="small" headerstyle-font-size="small" headerstyle-cssclass="fixedheadercell" dataformatstring="{0:dd-mmm-yyyy}" htmlencode="false" > <headerstyle borderstyle="outset" /> <itemstyle borderstyle="outset" horizontalalign ="right" /> </asp:boundfield> <asp:boundfield datafield="actualenddt" headertext="end date" itemstyle-font-size="small" headerstyle-font-size="small" headerstyle-cssclass="fixedheadercell " dataformatstring="{0:dd-mmm-yyyy}" htmlencode="false" > <headerstyle borderstyle="outset" /> <itemstyle borderstyle="outset" horizontalalign ="right" /> </asp:boundfield> <asp:boundfield datafield="issuepending" headertext="shortfall" itemstyle-font-size="small" headerstyle-font-size="small" headerstyle-cssclass="fixedheadercell " > <headerstyle borderstyle="outset" /> <itemstyle borderstyle="outset" horizontalalign ="right" /> </asp:boundfield> <asp:boundfield datafield="rack" headertext="rack" itemstyle-font-size="small" headerstyle-font-size="small" headerstyle-cssclass="fixedheadercell" > <headerstyle borderstyle="outset" /> <itemstyle borderstyle="outset" horizontalalign ="right" /> </asp:boundfield> <asp:boundfield datafield="remark" headertext="remark" itemstyle-font-size="small" headerstyle-font-size="small" headerstyle-cssclass="fixedheadercell" > <headerstyle borderstyle="outset" /> <itemstyle borderstyle="outset" horizontalalign ="right" /> </asp:boundfield> </columns> </asp:gridview> </table> </div>
you can try separate header content , put header outside scrollable content.
<div>some page content </div> //your heading goes here <div style="max-height: 400px; overflow: auto;"> //your gridview goes here </div> <div>some page content </div> like this
<div style="float: left; width: 100%;"> <table id="table1" runat="server" cellpadding="1" border="1" style="background-color: #ffffff; border-collapse: collapse; border-color: #999999; border-style: none; border-width: 1px; width: 100%;"> <tr style="background-color: #e5e5fe"> <th style="width: 15%;"> order </th> <th style="width: 15%;"> column title </th> <th style="width: 15%;"> datatype </th> </tr> </table> </div> <div style="max-height: 200px; overflow: auto; float: left; width: 100%;"> <asp:gridview id="gridview2" style="table-layout: fixed;" width="100%" autogeneratecolumns="false" allowsorting="true" runat="server" cellpadding="4" forecolor="#333333" gridlines="both" showheader="false"> <alternatingrowstyle backcolor="white" /> <columns> <asp:templatefield > <itemtemplate> <asp:label id="lbl" runat="server" text='teste'> </asp:label> </itemtemplate> <itemstyle width="15%" /> </asp:templatefield> <asp:templatefield > <itemtemplate> <asp:label id="lbl" runat="server" text='teste'> </asp:label> </itemtemplate> <itemstyle width="15%" /> </asp:templatefield> <asp:templatefield > <itemtemplate> <asp:label id="lbl" runat="server" text='teste'> </asp:label> </itemtemplate> <itemstyle width="15%" /> </asp:templatefield> </columns> </asp:gridview> </div>
Comments
Post a Comment