Click here to Skip to main content
15,908,264 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi friends,


i had tried verical scrol for a grid vew,But the vales on the page will change according to the dropdown select.so i cant have a static height because on one select there are only two records which has to be displayed and on another select there are 8-24 records to get displayed .

Can any one share the code with me ?

Thanks

i used the below script and called the funtion in cs page

HTML
ScriptManager.RegisterStartupScript(Page, this.GetType(), "Key", "<script>MakeStaticHeader('" + grdaccess.ClientID + "',180,800,40,true);</script>", false);



    function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) {
           var tbl = document.getElementById(gridId);
           if (tbl) {
               var DivHR = document.getElementById('DivHeaderRow');
               var DivMC = document.getElementById('DivMainContent1');
               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 = 'relative';
               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));
           }
       }






       function OnScrollDiv(Scrollablediv) {
           document.getElementById('DivHeaderRow').scrollLeft = Scrollablediv.scrollLeft;
           document.getElementById('DivFooterRow').scrollLeft = Scrollablediv.scrollLeft;
       }
Posted
Updated 5-Sep-12 22:58pm
v2

Keep your gridview inside a div or panel and make that div or panel scrollable.
 
Share this answer
 
Comments
Member 8155568 6-Sep-12 4:56am    
i did it with a div already


<div style="overflow:scroll;" önscroll="OnScrollDiv(this)" id="DivMainContent1">
Sunil Kumar Pandab 6-Sep-12 6:07am    
Try this one :-
<asp:Panel ID="Panel1" runat="server" ScrollBars="Vertical" Height="500px">
<asp:gridview id="GridView1" runat="server">

Hi,
put it in scrollable div like the code below

XML
<div style="height:400px; overflow:scroll">

<asp:gridview id="GridView1" runat="server">
    </asp:gridview>

</div>
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900