Need to freez first row and first 2 columns

Question

0.00/5 (No votes)

See more:

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 12-Dec-12 7:19am

amlish

Updated 12-Dec-12 7:56am

ZurdoDev

v2

Add a Solution

Comments

[no name] 12-Dec-12 13:56pm

Can you plz explain more about your question? What exactly you want to do?

2 solutions

Solution 1

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.

Posted 12-Dec-12 13:47pm

Christian Graus

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.

Christian Graus 12-Dec-12 21:06pm

I'm sorry. Your code is too messy for me to take time out of doing my job, to do yours. I AM trying to help, I assume you understand this code. So, the mechanism by which you change the CSS to move the div that is sliding to not include the headers, needs to also change it so it does not includes the columns you want to remove.

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)

Likol Lee · Accepted Answer · 2012-12-12T16:24:00

Solution 2

Hi,

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

GridViewScroll with jQuery

Posted 12-Dec-12 16:24pm

Likol Lee

Comments

amlish 13-Dec-12 13:04pm

thank you very much..