Click here to Skip to main content
15,844,498 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
By using following code i am able to fix scrollable header but unable to fix first row and first 2 columns.

Please help
ASP.NET
<head runat="server">
    <title>GridViewWithFixedHeader</title>
    <style type="text/css">
        body 
        {
            background-color: #333;
        }
        
        .GridViewStyle
        {    
            font-family:Verdana;
            font-size:11px;
            background-color: White; 
        }
        
        .GridViewHeaderStyle
        {
            font-family:Verdana;
            font-size:15px;
	        color:White;
	        background: black url(Image/header3.jpg) repeat-x;
        }
    </style>

    <script language="javascript" type="text/javascript">
        var scroll = {
            Y: '#<%= hfScrollPosition.ClientID %>'
        };
        $(document).ready(function() {
            alert("dd");
            $("#DataDiv").scrollTop($(scroll.Y).val());
        });
    
    
    function CreateGridHeader(DataDiv, GridView1, HeaderDiv) 
    { 
        var DataDivObj = document.getElementById(DataDiv);
        var DataGridObj = document.getElementById(GridView1);
        var HeaderDivObj = document.getElementById(HeaderDiv);
        
        //********* Creating new table which contains the header row ***********
        var HeadertableObj = HeaderDivObj.appendChild(document.createElement('table'));
        
        DataDivObj.style.paddingTop = '0px';
        var DataDivWidth = DataDivObj.clientWidth;
        DataDivObj.style.width = '5000px';
        
        //********** Setting the style of Header Div as per the Data Div ************
        HeaderDivObj.className = DataDivObj.className;
        HeaderDivObj.style.cssText = DataDivObj.style.cssText;
        //**** Making the Header Div scrollable. *****
        HeaderDivObj.style.overflow = 'auto'; 
        //*** Hiding the horizontal scroll bar of Header Div ****
        HeaderDivObj.style.overflowX = 'hidden';
        //**** Hiding the vertical scroll bar of Header Div **** 
        HeaderDivObj.style.overflowY = 'hidden'; 
        HeaderDivObj.style.height = DataGridObj.rows[0].clientHeight + 'px';
        //**** Removing any border between Header Div and Data Div ****
        HeaderDivObj.style.borderBottomWidth = '0px'; 
        
        //********** Setting the style of Header Table as per the GridView ************
        HeadertableObj.className = DataGridObj.className;
        //**** Setting the Headertable css text as per the GridView css text 
        HeadertableObj.style.cssText = DataGridObj.style.cssText; 
        HeadertableObj.border = '1px';
	    HeadertableObj.rules = 'all';
        HeadertableObj.cellPadding = DataGridObj.cellPadding;
	    HeadertableObj.cellSpacing = DataGridObj.cellSpacing;
        
        //********** Creating the new header row **********
        var Row = HeadertableObj.insertRow(0); 
        Row.className = DataGridObj.rows[0].className;
        Row.style.cssText = DataGridObj.rows[0].style.cssText;
        Row.style.fontWeight = 'bold';

 

        //******** This loop will create each header cell *********
        for(var iCntr =0; iCntr < DataGridObj.rows[0].cells.length; iCntr++)
        {
            var spanTag = Row.appendChild(document.createElement('td'));
            spanTag.innerHTML = DataGridObj.rows[0].cells[iCntr].innerHTML;
            var width = 0;
            //****** Setting the width of Header Cell **********
            if(spanTag.clientWidth > DataGridObj.rows[1].cells[iCntr].clientWidth)
            {
                width = spanTag.clientWidth;
            }
            else
            {
                width = DataGridObj.rows[1].cells[iCntr].clientWidth;
            }
            if(iCntr<=DataGridObj.rows[0].cells.length-2)
            {
                spanTag.style.width = width + 'px';
            }
            else
            {
                spanTag.style.width = width + 20 + 'px';
            }
            DataGridObj.rows[1].cells[iCntr].style.width = width + 'px';
        }

         
        
        var tableWidth = DataGridObj.clientWidth;
        //********* Hidding the original header of GridView *******
        DataGridObj.rows[0].style.display = 'none';
        //********* Setting the same width of all the componets **********
        HeaderDivObj.style.width = DataDivWidth + 'px';
        DataDivObj.style.width = DataDivWidth + 'px';    
        DataGridObj.style.width = tableWidth + 'px';
        HeadertableObj.style.width = tableWidth + 20 + 'px';
        return false;
    }

    function CreateMasterHeader(DataDiv, GridView1, HeaderDiv1) {
        var DataDivObj = document.getElementById(DataDiv);
        var DataGridObj = document.getElementById(GridView1);
        var HeaderDivObj = document.getElementById(HeaderDiv1);

        //********* Creating new table which contains the header row ***********
        var HeadertableObj = HeaderDivObj.appendChild(document.createElement('table'));

        DataDivObj.style.paddingTop = '0px';
        var DataDivWidth = DataDivObj.clientWidth;
        DataDivObj.style.width = '5000px';

        //********** Setting the style of Header Div as per the Data Div ************
        HeaderDivObj.className = DataDivObj.className;
        HeaderDivObj.style.cssText = DataDivObj.style.cssText;
        //**** Making the Header Div scrollable. *****
        HeaderDivObj.style.overflow = 'auto';
        //*** Hiding the horizontal scroll bar of Header Div ****
        HeaderDivObj.style.overflowX = 'hidden';
        //**** Hiding the vertical scroll bar of Header Div **** 
        HeaderDivObj.style.overflowY = 'hidden';
        HeaderDivObj.style.height = DataGridObj.rows[0].clientHeight + 'px';
        //**** Removing any border between Header Div and Data Div ****
        HeaderDivObj.style.borderBottomWidth = '0px';

        //********** Setting the style of Header Table as per the GridView ************
        HeadertableObj.className = DataGridObj.className;
        //**** Setting the Headertable css text as per the GridView css text 
        HeadertableObj.style.cssText = DataGridObj.style.cssText;
        HeadertableObj.border = '1px';
        HeadertableObj.rules = 'all';
        HeadertableObj.cellPadding = DataGridObj.cellPadding;
        HeadertableObj.cellSpacing = DataGridObj.cellSpacing;

        //********** Creating the new header row **********
        var Row1 = HeadertableObj.insertRow(1);
        Row1.className = DataGridObj.rows[1].className;
        Row1.style.cssText = DataGridObj.rows[1].style.cssText;
        Row1.style.fontWeight = 'bold';



        //******** This loop will create each header cell *********
        for (var iCntr = 0; iCntr < DataGridObj.rows[2].cells.length; iCntr++) {
            var spanTag1 = Row1.appendChild(document.createElement('td'));
            spanTag1.innerHTML = DataGridObj.rows[1].cells[iCntr].innerHTML;
            var width = 0;
            //****** Setting the width of Header Cell **********
            if (spanTag1.clientWidth > DataGridObj.rows[2].cells[iCntr].clientWidth) {
                width = spanTag1.clientWidth;
            }
            else {
                width = DataGridObj.rows[2].cells[iCntr].clientWidth;
            }
            if (iCntr <= DataGridObj.rows[2].cells.length - 2) {
                spanTag1.style.width = width + 'px';
            }
            else {
                spanTag1.style.width = width + 20 + 'px';
            }
            DataGridObj.rows[2].cells[iCntr].style.width = width + 'px';
        }



        var tableWidth = DataGridObj.clientWidth;
        //********* Hidding the original header of GridView *******
        DataGridObj.rows[1].style.display = 'none';
        //********* Setting the same width of all the componets **********
        HeaderDivObj.style.width = DataDivWidth + 'px';
        DataDivObj.style.width = DataDivWidth + 'px';
        DataGridObj.style.width = tableWidth + 'px';
        HeadertableObj.style.width = tableWidth + 20 + 'px';
        return false;
    }  

    function Onscrollfnction() {
       
        var div = document.getElementById('DataDiv');
        var div2 = document.getElementById('HeaderDiv');
        var div3 = document.getElementById('HeaderDiv1'); 
        //****** Scrolling HeaderDiv along with DataDiv ******
        div2.scrollLeft = div.scrollLeft;
        //div3.scrollLeft = div.scrollLeft;
        return false;
        
         
    }
    
    </script>


XML
<form id="form1" runat="server">
        <div>
            <%--Div contains the new header of the GridView--%>
             <div id="HeaderDiv">
            
             <%--<div id="MasterDiv">
            </div>--%>
            <%--Wrapper Div which will scroll the GridView--%>
            <div id="DataDiv" style="overflow: auto; border: 1px solid olive; width: 100%; height: 300px;" onscroll="Onscrollfnction();$(scroll.Y).val(this.scrollTop);">
                <asp:GridView ID="GridView1" runat="server"
                    AutoGenerateColumns="true" CellPadding="3"  Style="white-space: nowrap"    CssClass="GridViewStyle">
                    <HeaderStyle  CssClass="GridViewHeaderStyle" />
                    <Columns>
                    <asp:TemplateField>
                    <ItemTemplate>
                    <asp:CheckBox ID="chk" runat="server" />

                    </ItemTemplate>

                    </asp:TemplateField>
                    </Columns>
                </asp:GridView>
                <asp:HiddenField ID="hfScrollPosition" runat="server" Value="0" />
            </div>
</form>
</body>
<html>
Posted
Updated 12-Dec-12 8:56am
v2
Comments
[no name] 12-Dec-12 13:56pm    
Can you plz explain more about your question? What exactly you want to do?

A grid view does not let you freeze columns or rows AFAIK. the only way to do that, is to render those rows and columns and then inside that, render a scrolling control to do your scrollable section. You'd need to create a data source that just generates your scrolling section and create the rest around it.
 
Share this answer
 
Comments
amlish 12-Dec-12 20:22pm    
ok thank you.. but in my above example it works perfect for heading and other rows, i need a twik to freez first column like header.
Christian Graus 12-Dec-12 20:24pm    
IT's a bit of an unreadable mess, but the fact remains, for it to work you need to move where your div applies so that some rows do not use the div. Your data comes one row at a time, so I expect fiddling the CSS for a row is somewhat easier than doing it for a column.
amlish 12-Dec-12 20:46pm    
thank you..can you please provide me example.
Christian Graus 12-Dec-12 20:54pm    
I'm sorry, I think your code is unreadable and unreasonably complex. I think you should do what I said to do, not pursue what you're doing.
amlish 12-Dec-12 21:01pm    
ok fine will left this method but can you please provide me code or hint of your suggetion. so that i can try it out.
Hi,

maybe you can try my solution, i worte a jquery plug-in can be fixed header and freeze column.

GridViewScroll with jQuery
 
Share this answer
 
Comments
amlish 13-Dec-12 13:04pm    
thank you very much..

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