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:
<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.
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.
ScriptManager.RegisterStartupScript(Page, this.GetType(), "Key", "<script>MakeStaticHeader('" + GrdDisplay.ClientID + "', 400, 950 , 40 ,true, 1); </script>", false);