How do I use my Fixed Header JS codes on 2 gridviews?

Question

3.00/5 (1 vote)

See more:

, +

Hi,

I have a set of JavaScript codes that helps me to make my grid view header static while scrolling. I am able to apply it on 1 grid view and it works well. My current problem is that I would like to implement it to 2 grid views instead of one. I tried duplicating the same JS Codes and by just changing the ids but its doesnt work. Please advice on how I can apply on my second grid view with the same codes.
The codes below is for 1st grid view but not the 2nd grid view:

JS

JavaScript

function MakeStaticHeader1(gridId, height, width, headerHeight, isFooter) {
 var tbl = document.getElementById(gridId);
 if (tbl) {
 var DivHR = document.getElementById('DivHeaderRow1');
 var DivMC = document.getElementById('DivMainContent1');
 var DivFR = document.getElementById('DivFooterRow1');

 //*** 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));
 }
}
function OnScrollDiv1(Scrollablediv) {
  document.getElementById('DivHeaderRow1').scrollLeft = Scrollablediv.scrollLeft;
document.getElementById('DivFooterRow1').scrollLeft = Scrollablediv.scrollLeft;
}

function MakeStaticHeader2(gridId, height, width, headerHeight, isFooter) {
 var tbl = document.getElementById(gridId);
 if (tbl) {
 var DivHR = document.getElementById('DivHeaderRow2');
 var DivMC = document.getElementById('DivMainContent2');
 var DivFR = document.getElementById('DivFooterRow2');

 //*** 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));
 }
}
function OnScrollDiv2(Scrollablediv) {
  document.getElementById('DivHeaderRow2').scrollLeft = Scrollablediv.scrollLeft;
document.getElementById('DivFooterRow2').scrollLeft = Scrollablediv.scrollLeft;
}

HTML/ASP

ASP.NET

<div id="DivRoot1" align="left">
    <div style="overflow: hidden;" id="DivHeaderRow1">
    </div>

    <div style="overflow:scroll;" >
        
   
<asp:GridView  runat="server"  ID="gridview1" Width="100%" AutoGenerateColumns="False"ShowFooter="True">
         <Columns>
                //...................
         </Columns>
       </asp:GridView>

      
    </div>

    <div id="DivFooterRow1" style="overflow:hidden">
    </div>
</div>

<div id="DivRoot2" align="left">
    <div style="overflow: hidden;" id="DivHeaderRow2">
    </div>

    <div style="overflow:scroll;" >
        
   
<asp:GridView  runat="server"  ID="gridview2" Width="100%" AutoGenerateColumns="False"ShowFooter="True">
         <Columns>
                //...................
         </Columns>
       </asp:GridView>

      
    </div>

    <div id="DivFooterRow2" style="overflow:hidden">
    </div>
</div>

ASPX.CS

C#

ScriptManager.RegisterStartupScript(Page, this.GetType(), "Key", "<script>MakeStaticHeader1('" + Gridview1.ClientID + "', 400, 950 , 40 ,true); </script>", false);
ScriptManager.RegisterStartupScript(Page, this.GetType(), "Key", "<script>MakeStaticHeader2('" + Gridview2.ClientID + "', 400, 950 , 40 ,true); </script>", false);

Posted 3-Oct-15 1:38am

waynetan123

Updated 4-Oct-15 16:40pm

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Manas_Kumar · Accepted Answer · 2015-10-03T03:17:00

Solution 1

In order achieve please follow below steps:

In aspx page you need to create unique elements like DivHeaderRow1 so that it won't affect other elements. Here I created two sections for two grids:

XML

<div id="DivRoot" align="left">
    <div style="overflow: hidden;" id="DivHeaderRow1">
    </div>
    <div id="DivFooterRow1" style="overflow:hidden">
    </div>
</div>
<div id="DivRoot" align="left">
    <div style="overflow2: hidden;" id="DivHeaderRow">
    </div>
    <div id="DivFooterRow2" style="overflow:hidden">
    </div>
</div>

In Javascript you need to add extra param as serialNo to uniquely identify your elements. here is the code. You need to change everywhere where you are using id for grid.

JavaScript

function MakeStaticHeader(gridId, height, width, headerHeight, isFooter, serialNo) {
	var tbl = document.getElementById(gridId);
	if (tbl) {
		var DivHR = document.getElementById('DivHeaderRow'+serialNo);
		var DivMC = document.getElementById('DivMainContent'+serialNo);
		var DivFR = document.getElementById('DivFooterRow'+serialNo);
	}
}

In Code-behind you need pass serialNo value as "1", "2" for two grids. In below code it is passing "1" for first grid and you need to pass "2" for second grid.

C#

ScriptManager.RegisterStartupScript(Page, this.GetType(), "Key", "<script>MakeStaticHeader('" + GrdDisplay.ClientID + "', 400, 950 , 40 ,true, 1); </script>", false);

Posted 3-Oct-15 3:17am

Manas_Kumar

Updated 3-Oct-15 3:18am

v2

Comments

waynetan123 4-Oct-15 20:48pm

Hi Manas_Kumar, How about this part on

function OnScrollDiv(Scrollablediv) {
document.getElementById('DivHeaderRow').scrollLeft = Scrollablediv.scrollLeft;
document.getElementById('DivFooterRow').scrollLeft = Scrollablediv.scrollLeft;
}
please advice thanks

[no name] 4-Oct-15 21:23pm

Yes, you need to change that one also.. I just provided part of your code.. You need to follow answer and implement the same anywhere you are using grid. Thanks...

waynetan123 4-Oct-15 21:25pm

so I have to include another script manager? because it will have to read the serial no input. please advice because I tried doing

function OnScrollDiv1(Scrollablediv) {

document.getElementById('DivHeaderRow1').scrollLeft = Scrollablediv.scrollLeft;
document.getElementById('DivFooterRow1').scrollLeft = Scrollablediv.scrollLeft;

}
function OnScrollDiv2(Scrollablediv) {

document.getElementById('DivHeaderRow2').scrollLeft = Scrollablediv.scrollLeft;
document.getElementById('DivFooterRow2').scrollLeft = Scrollablediv.scrollLeft;
}
But the pages doesn't load. always loading

The other way I tried is
function OnScrollDiv1(Scrollablediv) {

document.getElementById('DivHeaderRow1').scrollLeft = Scrollablediv.scrollLeft;
document.getElementById('DivFooterRow1').scrollLeft = Scrollablediv.scrollLeft;

document.getElementById('DivHeaderRow2').scrollLeft = Scrollablediv.scrollLeft;
document.getElementById('DivFooterRow2').scrollLeft = Scrollablediv.scrollLeft;

}

[no name] 4-Oct-15 21:48pm

To catch the issue, press F12 and go to console tab. See the error in red mark text what is the issue.

waynetan123 4-Oct-15 22:42pm

Hi please take a look at my updated codes. I have tried duplicating but its only works for the 1st grid view. the 2nd grid view is not working as it is not taking in the JS Function. thanks

waynetan123 4-Oct-15 22:51pm

even trying your method the problem is the same during debug which gridview2 did not take in the function whereas gridview1 did. please advice

waynetan123 4-Oct-15 22:53pm

problem solved thanks

[no name] 5-Oct-15 0:53am

welcome :)