Grid View With Two side scrolling with two side Fixed Header

Grid View With Two side scrolling with two Fixed Header

by pradipktiwari

HTML

<div id="GridViewWrapper">
<table cellspacing="0" id="Table1" style="width:100%;border-collapse:collapse;"> 
    <tr class="GridviewScrollHeader"> 
        <th colspan="4" style="text-align:center; background:#dde1dd;">Project Details</th> 
        
        <th colspan="2" style="text-align:center; background:#ddecde;">HTD</th> 
        
        <th colspan="2" style="text-align:center; background:#c9decb;">MTD</th> 
        
        <th colspan="4" style="text-align:center; background:#c9dff0;">SafetyStockLevel</th> 
        
        <th colspan="2" style="text-align:center; background:#DDECDE;">ReorderPoint</th> 
        
        <th colspan="2" style="text-align:center; background:#c9dff0;">StandardCost</th> 
        
        <th colspan="2" style="text-align:center; background:#DDECDE;">ListPrice</th> 
        
        <th colspan="2" style="text-align:center; background:#c9dff0;">Weight</th> 
        
        <th colspan="2" style="text-align:center; background:#DDECDE;">SellStartDate</th> 
    </tr> 
    <tr class="GridviewScrollHeader"> 
        <th>Sr.No.</th> 
        <th>Project Id</th> 
        <th>Project</th> 
        <th>Planned<br /> Hours</th> 
        
        <th>Billable<br /> hours</th> 
        <th>None<br /> Billable<br /> hours</th> 
        
        <th>Billable<br /> hours</th> 
        <th>Non<br /> Billable<br /> hours</th> 
        
        <th>SellStartDate</th> 
        <th>ProductNumber</th> 
        
        <th>SafetyStockLevel</th> 
        <th>ReorderPoint</th> 
        
        <th>StandardCost</th> 
        <th>ListPrice</th> 
        
        <th>Weight</th> 
        <th>SellStartDate</th> 
        
        <th>SafetyStockLevel</th> 
        <th>ReorderPoint</th> 
        
        <th>StandardCost</th> 
        <th>ListPrice</th> 
        
        <th>Weight</th> 
        <th>SellStartDate</th> 
    </tr>
    <tr class="GridviewScrollItem"> 
    	<td><div class="sectionHead"><div>SafetyStockLevel afetyStockLevel...

CSS

body, td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#444444;
}
.GridviewScrollItem a {color:#006BB9;}
.GridviewScrollHeader th, .GridviewScrollHeader td 
{ 
    padding: 5px; 
    font-weight: bold; 
    white-space: nowrap; 
    border-right: 1px solid #AAAAAA; 
    border-bottom: 1px solid #AAAAAA; 
    background-color: #EFEFEF; 
    text-align: left; 
    vertical-align: bottom; 
} 
.GridviewScrollItem td 
{ 
    padding: 5px; 
    white-space: nowrap; 
    border-right: 1px solid #fff; 
    border-bottom: 1px solid #fff; 
    background-color: #FFFFFF; 
} 
.GridviewScrollPager  
{ 
    border-top: 1px solid #AAAAAA; 
    background-color: #FFFFFF; 
} 
.GridviewScrollPager td 
{ 
    padding-top: 3px; 
    font-size: 14px; 
    padding-left: 5px; 
    padding-right: 5px; 
} 
.GridviewScrollPager a 
{ 
    color: #666666; 
}

.GridviewScrollPager span

{

    font-size: 16px;

    font-weight: bold;

}
.ui-draggable { cursor:pointer;}

.sectionHead { height:20px; position:relative;}
.sectionHead > div { position:absolute; width:auto; font-weight:bold; padding-top:3px;}
.rowTotal td { font-weight:bold; background:#EFEFEF;}

#GridViewWrapper { border:1px solid #ccc;}

JavaScript

(function (n) { jQuery.fn.extend({ gridviewScroll: function (t) { function kt(n, t) { er(n, t), or(n, t), sr(n, t) } function er(t, i) { t.find("input").each(function () { var r = n(this)[0].type, u; if (r == "checkbox" || r == "radio" || r == "text") { var t = n(this), f = t[0].id.replace("_Copy", ""), e = t[0].name.replace("_Copy", ""); t[0].name = e + "_" + i, t[0].id = f + "_" + i, u = n("#" + f); switch (r) { case "checkbox": case "radio": t.off("change"), t.change(function () { var t = n(this).is(":checked"); u.attr("checked", t) }); break; case "text": t.change(function () { var t = n(this).val(); u.val(t) }) } } }) } function or(t, i) { t.find("select").each(function () { var t = n(this), u = t[0].id.replace("_Copy", ""), f = t[0].name.replace("_Copy", ""), r; t[0].name = f + "_" + i, t[0].id = u + "_" + i, r = n("#" + u), t.off("change"), t.prop("selectedIndex", r[0].selectedIndex), t.change(function () { var n = this.selectedIndex; r.prop("selectedIndex", n) }) }) } function sr(t, i) { t.find("textarea").each(function () { var t = n(this), r = t[0].id.replace("_Copy", ""), f = t[0].name.replace("_Copy", ""), u; t[0].name = f + "_" + i, t[0].id = r + "_" + i, u = n("#" + r), t.off("change"), t.change(function () { var t = n(this).val(); u.val(t) }) }) } function hr() { var g = a.attr("id") + "Freeze", ot, o, st, nt, w, b, ht, d, ct, s, at, e, h, et, l, v, t; for (cr(), document.getElementById(g) ? ft = n("#" + g) : (ft = n(a[0].cloneNode(!1)), ft.attr("id", g), ft.css({ position: "absolute", width: "", height: "100%", top: 0, left: 0, zIndex: ir }), o = n(ut[0].cloneNode(!1)), ot = o.attr("id") + "Freeze", o.attr("id", ot), o.css({ width: "", height: "100%" }), ft[0].appendChild(o[0]), rt[0].appendChild(ft[0])), o = ft.children().eq(0) ; o[0].hasChildNodes() ;) o[0].removeChild(o[0].lastChild); for (st = document.createElement("TBODY"), o[0].appendChild(st), nt = ut.children().eq(0), w = k[0].length, e = 0; e < i.headerrowcount; e++) { for (h =...