Click here to Skip to main content
15,849,129 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Please suggest any workaround to freez the last 4 rows of my Grid View.

I have successfully freezed the header row and left 2 columns. And as per the requirement I need to freez the last 4 row also.
Posted
Updated 6-Dec-12 19:48pm
v3
Comments
[no name] 4-Dec-12 5:31am    
Post your code for that..
pm0627 4-Dec-12 6:47am    
Html --------
<div style="overflow:scroll; width:99%;height:250px" id="divDataGrid"> <asp:GridView ID="GridViewBalances" runat="server" AutoGenerateColumns="false" Width="100%" Height="120%" CssClass="scroll" onrowdatabound="GridViewBalances_RowDataBound"> </div>
CSS ------
.locked { font-size: 14px; font-weight: bold; text-align: center; background-color: White; color:Black ; border-right: 1px solid silver; position:relative; cursor: default; /*IE5+ only*/ /*left: expression(document.getElementById("div-datagrid").scrollLeft-2);*/ /*left:expression((this.parentElement.parentElement.parentElement.parentElement.scrollLeft-2)+'px');*/ left: expression(document.getElementById("divDataGrid").scrollLeft-2); } .frozenHeader { font-size: 14px; font-weight: bold; text-align: center; background-color: White; color:Black ; border-right: 1px solid black; position:relative; cursor: default; top: expression(document.getElementById("divDataGrid").scrollTop-2); z-index : 10; }
Code Behind ------------- RowDatabound event e.Row.Cells[0].CssClass = "locked"; e.Row.Cells[1].CssClass = "locked"; e.Row.Cells[2].CssClass = "locked"; e.Row.Cells[3].CssClass = "locked"; e.Row.Cells[4].CssClass = "locked";
CodingLover 4-Dec-12 6:17am    
Freeze means you want to make them read only?
pm0627 4-Dec-12 6:48am    
Freez means I want them not to scroll along with vertical scroll sam e as header.
pm0627 5-Dec-12 5:11am    
Any solution ?

I am finally able to freez/Lock Header, Last few rows and first column of the gridview.
I will be posting the code soon.
 
Share this answer
 
Here is the code
--------------------
Code Behind
==============
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.Add("C1");
dt.Columns.Add("C2");
dt.Columns.Add("C3");
dt.Columns.Add("C4");
dt.Columns.Add("C5");
dt.Columns.Add("C6");
dt.Columns.Add("C7");
dt.Columns.Add("C8");
dt.Columns.Add("C9");
dt.Columns.Add("C10");
DataRow drRow;
for (int i = 0; i < 10; i++)
{
drRow = dt.NewRow();
drRow[0] = "C10000000" + i;
drRow[1] = "C20000000" + i;
drRow[2] = "C30000000" + i;
drRow[3] = "C40000000" + i;
drRow[4] = "C50000000" + i;
drRow[5] = "C60000000" + i;
drRow[6] = "C70000000" + i;
drRow[7] = "C80000000" + i;
drRow[8] = "C90000000" + i;
drRow[9] = "C100000000" + i;

dt.Rows.Add(drRow);

}

GridView1.DataSource = dt;
GridView1.DataBind();
GridView1.Rows[9].Cells[0].ID = "footerCell";
GridView1.Rows[9].Attributes.Add("class", "frozenFooter");

}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
e.Row.Cells[0].CssClass = "frozenCell";

}
ASPX Page with CSS
======================
XML
<head runat="server">
    <title>Untitled Page</title>

    <script src="Javascript/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script src="Javascript/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
    <style type="text/css">


    .frozenFooter
    {
        font-weight:bold;
        background-color: Green;
        color: Black;
        position: relative;
        bottom:expression(getScrollBottom(this.parentNode.parentNode.parentNode.parentNode));
    }

    .frozenCell  {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    background-color: Gray;
    color:Black ;
    border-right: 1px solid silver;
    position:relative;
    cursor: default;
    /*IE5+ only*/
    /*left: expression(document.getElementById("div-datagrid").scrollLeft-2);*/
    /*left:expression((this.parentElement.parentElement.parentElement.parentElement.scrollLeft-2)+'px');*/

    left: expression(document.getElementById("pnlContainer").scrollLeft-2);
    }
    .lockedForLastRow  {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    background-color: Gray;
    color:Black ;
    border-right: 1px solid silver;
    position:relative;
    cursor: default;
    /*IE5+ only*/
    /*left: expression(document.getElementById("div-datagrid").scrollLeft-2);*/
    /*left:expression((this.parentElement.parentElement.parentElement.parentElement.scrollLeft-2)+'px');*/

    left: expression(document.getElementById("pnlContainer").scrollLeft-2);
    }
    .frozenHeader
    {
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        background-color: Green;
        color:Black ;
        border-right: 1px solid black;
        position:relative;
        cursor: default;
        top: expression(document.getElementById("pnlContainer").scrollTop-2);
        z-index : 10;
    }

    </style>
    <script language="javascript" type="text/javascript">

    $(document).ready(function() {
//alert("");
//debugger;
//       $("#GridView1__ctl11_footerCell").attr('bottom', '0px');
//        $("#GridView1__ctl11_footerCell").removeAttr('left');


    });
        function getScrollBottom(p_oElem)
        {

         return p_oElem.scrollHeight - p_oElem.scrollTop - p_oElem.clientHeight;
        }
</script>
</head>
<body>
    <form id="form1" runat="server">

    <asp:Panel runat="server" ID="pnlContainer" ScrollBars="Both" Height="150px" Width="250px">

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
            Width="96%"  ShowFooter="false" onrowdatabound="GridView1_RowDataBound">
        <Columns>
            <asp:TemplateField HeaderText="C1">
                <ItemTemplate>
                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("C1") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    C1 Footer Here
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="C2">
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("C2") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    C2 Footer Here
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="C3">
                <ItemTemplate>
                    <asp:Label ID="Label3" runat="server" Text='<%# Bind("C3") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    C3 Footer Here
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="C4">
                <ItemTemplate>
                    <asp:Label ID="Label4" runat="server" Text='<%# Bind("C4") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    C4 Footer Here
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="C5">
                <ItemTemplate>
                    <asp:Label ID="Label5" runat="server" Text='<%# Bind("C5") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    C5 Footer Here
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="C6">
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("C6") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    C6 Footer Here
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="C7">
                <ItemTemplate>
                    <asp:Label ID="Label7" runat="server" Text='<%# Bind("C7") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    C7 Footer Here
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="C8">
                <ItemTemplate>
                    <asp:Label ID="Label8" runat="server" Text='<%# Bind("C8") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    C8 Footer Here
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="C9">
                <ItemTemplate>
                    <asp:Label ID="Label9" runat="server" Text='<%# Bind("C9") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    C9 Footer Here
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="C10">
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("C10") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    C10 Footer Here
                </FooterTemplate>
            </asp:TemplateField>
        </Columns>
<HeaderStyle CssClass="frozenHeader" />


        </asp:GridView>

    </asp:Panel>
    </form>
</body>
 
Share this answer
 
Comments
pm0627 7-Dec-12 1:17am    
Only there is one problem which I am facing currently is when we scroll vertically in the anywhere except the last position of the vertical bar, first cell of the freeze footer does not get locked. Other than this cell all the left columns are freeze in all the scenario

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