Quantcast
Channel: Web Forms
Viewing all articles
Browse latest Browse all 23244

GridView fixed header with scrollable data

$
0
0

Previously i'm developing application to fix header and footer using javascript function. But now my requirement is i don't want footer row footer row also include in header itself. Now i need to fix header alone. I want to scroll data between top to bottom. Can any one modify my code appropriate to my requirement. If i use this code in textboxes it's showing some "," on each load.

Javascript code

<script language="javascript" type="text/javascript">
function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) {
var tbl = document.getElementById(gridId);
if (tbl) {
var DivHR = document.getElementById('DivHeaderRow');
var DivMC = document.getElementById('DivMainContent');
var DivFR = document.getElementById('DivFooterRow');

//*** Set divheaderRow Properties ****
DivHR.style.height = headerHeight + 'px';
DivHR.style.width = (parseInt(width) - 16) + 'px';
DivHR.style.position = 'relative';
DivHR.style.top = '0px';
DivHR.style.zIndex = '10';
DivHR.style.verticalAlign = 'top';

//*** Set divMainContent Properties ****
DivMC.style.width = width + 'px';
DivMC.style.height = height + 'px';
DivMC.style.position = 'relative';
DivMC.style.top = -headerHeight + 'px';
DivMC.style.zIndex = '1';

//*** Set divFooterRow Properties ****
DivFR.style.width = (parseInt(width) - 16) + 'px';
DivFR.style.position = 'relative';
DivFR.style.top = -headerHeight + 'px';
DivFR.style.verticalAlign = 'top';
DivFR.style.paddingtop = '2px';

if (isFooter) {
var tblfr = tbl.cloneNode(true);
tblfr.removeChild(tblfr.getElementsByTagName('tbody')[0]);
var tblBody = document.createElement('tbody');
tblfr.style.width = '100%';
tblfr.cellSpacing = "0";
tblfr.border = "0px";
tblfr.rules = "none";
//*****In the case of Footer Row *******
tblBody.appendChild(tbl.rows[tbl.rows.length - 1]);
tblfr.appendChild(tblBody);
DivFR.appendChild(tblfr);
}
//****Copy Header in divHeaderRow****
DivHR.appendChild(tbl.cloneNode(true));
}
}</script>

in page i wrote div tags and place grid inside div tag.

<div id="DivRoot" align="left"><div style="overflow: hidden;" id="DivHeaderRow"></div><div style="overflow:scroll;" onscroll="OnScrollDiv(this)" id="DivMainContent">
   // grid here</div><div id="DivFooterRow" style="overflow:hidden"></div>

Can any one give me some better solution out of this..

If you want more informaiton about my previous thread please refer below link

http://forums.asp.net/t/1919610.aspx/1?Scrollable+GridView+with+fixed+grid+header+and+footer+



 


Viewing all articles
Browse latest Browse all 23244

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>