C# .NET - please urgent vertical scroll for grid view with fixed header and footer

Asked By sireesha sireesha on 20-Feb-13 02:44 AM
could you tell me why i am getting this error... i have added one css style to my grid view to scroll vertically with fixed header 
the code as follows
<style type="text/css">
.fixedHeader
{
font-weight:bold;
position:absolute;
background-color: #006699;
color: #ffffff;
height: 25px;
top: expression(Sys.UI.DomElement.getBounds(document.getElementById("panelContainer")).y-25);
}
</style>
<asp:Panel ID="panelContainer" runat="server" Height="500px" Width="617px"  ScrollBars="Vertical">
<asp:GridView ID="gvScrollableExample" runat="server">
<HeaderStyle CssClass="fixedHeader " />
</asp:GridView></asp:Panel> 

 but it displaying the error message as: expression(Sys.UI.DomElement.getBounds(document.getElementById("panelContainer")).y-25); is not a valid value for the top property.

Danasegarane Arunachalam replied to sireesha sireesha on 20-Feb-13 03:14 AM
Have you tried this one?

http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-in-ASP.Net.aspx
sireesha sireesha replied to Danasegarane Arunachalam on 21-Feb-13 01:53 AM
thanks..
i used this code but the problem is while mentioning the width to div its getting problem with the other tables (every time we need to mention width to all tables) so i need horizontal and vertical scroll bars with fixed width. 
can u please hepl me

thanks
sireesha.
Danasegarane Arunachalam replied to sireesha sireesha on 21-Feb-13 01:56 AM
Can  you post a sample ?
sireesha sireesha replied to Danasegarane Arunachalam on 21-Feb-13 02:19 AM
This is the div i use above the grid view and below the panel.. and kept showHeader property as false in gridview.

<div style="height: 30px; Width:617px; background-color: Blue; color: White; overflow:auto;"> 
                <div style="float: left; line-height: 30px; width:345px; font-weight:bold;"> Title1</div> 
                <div style="float: left; line-height: 30px; font-weight:bold;"> Title2</div> 
   </div>


  
Danasegarane Arunachalam replied to sireesha sireesha on 21-Feb-13 02:22 AM
I will be helpful , If you show me a sample project
sireesha sireesha replied to Danasegarane Arunachalam on 21-Feb-13 03:28 AM
#ascx page:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Departments.ascx.cs"
    Inherits="NPWebparts.Departments" %>
<table>
    <tr>
        <td>
            <asp:Label ID="lblErrorMessage" runat="server" CssClass="ErrorMessage" ForeColor="Red"></asp:Label>
        </td>
    </tr>
    <tr>
        <td align="center">
            Department:&nbsp;<asp:TextBox ID="txtDept" runat="server"></asp:TextBox>&nbsp;&nbsp;<asp:Button
                ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" />
        </td>
    </tr>
    <tr>
        <td>
            <asp:Panel ID="divGrid" runat="server" ScrollBars="vertical" Height="500px" Width="100%">


            <div style="height:30px; Width:617px; background-color: Blue; color: White;"> 
                <div style="float: left; line-height: 30px; width:345px; font-weight:bold;"> 
                    Sub Division</div> 
                <div style="float: left; line-height: 30px; font-weight:bold;"> 
                    Department</div> 


        
    
                <asp:GridView ID="grdDepartments" runat="server" AutoGenerateColumns="False" CellPadding="4"
                    Height="90px" ShowFooter="True" Width="331px" OnRowCommand="grdDepartments_RowCommand"
                    DataKeyNames="DeptID,SubDivisionID" OnRowDataBound="grdDepartments_RowDataBound"
                    OnRowCancelingEdit="grdDepartments_RowCancelingEdit" OnRowEditing="grdDepartments_RowEditing"
                    OnRowUpdating="grdDepartments_RowUpdating" OnRowDeleting="grdDepartments_RowDeleting"
                    ForeColor="#333333" GridLines="None" OnSelectedIndexChanged="grdDepartments_SelectedIndexChanged"
                    OnPageIndexChanging="grdDepartments_PageIndexChanging" ShowHeader="false" >
                    <RowStyle BackColor="#EFF3FB" CssClass="TableAltColor2" />


                    <Columns>
                        <asp:BoundField DataField="DeptID" HeaderText="DeptID" Visible="False" />
                        <asp:TemplateField HeaderText="Sub Division">
                            <EditItemTemplate>
                                <asp:DropDownList ID="ddlEditSubDivision" runat="server" Width="300px" Height="22px">
                                </asp:DropDownList>
                            </EditItemTemplate>
                            <FooterTemplate>
                                <asp:DropDownList ID="ddlNewSubDivision" runat="server" Width="300px" Height="22px">
                                </asp:DropDownList>
                            </FooterTemplate>
                            <ItemTemplate>
                                <asp:Label ID="Label1" runat="server" Text='<%# Bind("SubDivisionDesc") %>'></asp:Label>
                            </ItemTemplate>
                            <FooterStyle HorizontalAlign="Left" VerticalAlign="Top" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Department">
                            <EditItemTemplate>
                                <asp:TextBox ID="txtEditDepartment" Width="300px" runat="server" MaxLength="50" Text='<%# Bind("DeptDesc") %>'></asp:TextBox>
                            </EditItemTemplate>
                            <FooterTemplate>
                                <asp:TextBox ID="txtNewDepartment" runat="server" Width="300px" MaxLength="50"></asp:TextBox>
                            </FooterTemplate>
                            <ItemTemplate>
                                <asp:Label ID="lblDepartment" runat="server" Text='<%# Bind("DeptDesc") %>'></asp:Label>
                            </ItemTemplate>
                            <ItemStyle />
                            <FooterStyle HorizontalAlign="Left" VerticalAlign="Top" />
                        </asp:TemplateField>
                        <asp:TemplateField ShowHeader="False">
                            <EditItemTemplate>
                                <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update"
                                    Text="Update"></asp:LinkButton>
                                &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel"
                                    Text="Cancel"></asp:LinkButton>
                            </EditItemTemplate>
                            <FooterTemplate>
                                <asp:Button ID="btnAddNew" runat="server" BorderStyle="None" CommandName="AddNew"
                                    CssClass="AddNew" Text="Add New" BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                            </FooterTemplate>
                            <ItemTemplate>
                                <asp:LinkButton ID="LinkButton3" runat="server" CausesValidation="False" CommandName="Edit"
                                    Text="Edit"></asp:LinkButton>
                            </ItemTemplate>
                            <FooterStyle HorizontalAlign="Left" VerticalAlign="Top" />
                        </asp:TemplateField>
                        <asp:TemplateField ShowHeader="False">
                            <ItemTemplate>
                                <asp:LinkButton ID="btnDelete" runat="server" CausesValidation="False" CommandName="Delete"
                                    Text="Delete"></asp:LinkButton>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <FooterStyle BackColor="#507CD1" ForeColor="White" Font-Bold="True" />
                    <PagerStyle ForeColor="White" HorizontalAlign="Center" BackColor="#2461BF" />
                    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" CssClass="TableHeader" />
                    <EditRowStyle BackColor="#EFF3FB" />
                    <AlternatingRowStyle BackColor="White" CssClass="TableAltColor2" />
                </asp:GridView>
                </div>
            </asp:Panel>
        </td>
    </tr>
</table>

#ascx.cs 
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;


namespace NPWebparts
{
    public partial class Departments : System.Web.UI.UserControl
    {
        private static string CONN_STRING = ConfigurationSettings.AppSettings["ConnectionString"].ToString();
        GetBEL objbel = new GetBEL();


        protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                if (!IsPostBack)
                {
                    FillDepartmentsInGrid();
                }
            }
            catch (Exception ex)
            {
                lblErrorMessage.Text = "Error in loading the data.";
            }
        }


        private void FillDepartmentsInGrid()
        {
            string sqlSelect = "";
            if (ViewState["Department"] == null)
            {
                objbel.DeptDesc = null;
            }
            else
            {
                objbel.DeptDesc = ViewState["Department"].ToString();
            }
            DataTable dtDepartments;            
            dtDepartments = GetDAL.GetDepartment(objbel); 




            if (dtDepartments.Rows.Count > 0)
            {
                grdDepartments.DataSource = dtDepartments;
                grdDepartments.DataBind();
            }
            else
            {
                dtDepartments.Rows.Add(dtDepartments.NewRow());
                grdDepartments.DataSource = dtDepartments;
                grdDepartments.DataBind();


                int TotalColumns = grdDepartments.Rows[0].Cells.Count;
                grdDepartments.Rows[0].Cells.Clear();
                grdDepartments.Rows[0].Cells.Add(new TableCell());
                grdDepartments.Rows[0].Cells[0].ColumnSpan = TotalColumns;
                grdDepartments.Rows[0].Cells[0].Text = "";
                grdDepartments.Rows[0].Visible = false;
            }
        }


        protected void grdDepartments_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            try 
            {
            if (e.CommandName.Equals("AddNew"))
            {
                TextBox txtNewDepartment = (TextBox)grdDepartments.FooterRow.FindControl("txtNewDepartment");
                DropDownList txtNewSubDivision = (DropDownList)grdDepartments.FooterRow.FindControl("ddlNewSubDivision");
                string formatstring = txtNewDepartment.Text.Replace("'", "''").Trim();
                int skillDomain = Convert.ToInt16(txtNewSubDivision.SelectedItem.Value);
                //string sqlInsert = "INSERT INTO Departments(SubDivisionID,DeptDesc) VALUES(" + skillDomain + ",'" + formatstring + "')";


                //string sqlSelect = "SELECT Count(*) FROM Departments Where DeptDesc ='" + formatstring + "'";


                if (formatstring.Trim() == "")
                {
                    lblErrorMessage.Text = "Enter the Department.";
                    return;


                }
                objbel.DeptDesc = formatstring;
                objbel.SubDivisionId = skillDomain;
                int returnVal = GetDAL.GetInsertDepartmentCheck(objbel);


                if (returnVal != 0)
                {
                    lblErrorMessage.Text = "Department already exists";
                    return;
                }




                GetDAL.GetInsertDepartment(objbel);
                txtDept.Text = "";
                FillDepartmentsInGrid();
                lblErrorMessage.Text = "Record added successfully.";
            }
            }
            catch (Exception ex)
            {
                lblErrorMessage.Text = "Error in adding the record.";
            }
        }


        protected void grdDepartments_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            try
            {
                DataTable ds;
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    DropDownList ddlEditSubDivision = (DropDownList)e.Row.FindControl("ddlEditSubDivision");
                    if (ddlEditSubDivision != null)
                    {
                        ds = GetDAL.GetSubDivision();
                        ddlEditSubDivision.DataSource = ds;
                        ddlEditSubDivision.DataValueField = ds.Columns[0].ToString();
                        ddlEditSubDivision.DataTextField = ds.Columns[1].ToString();
                        ddlEditSubDivision.DataBind();
                    }
                }
                if (e.Row.RowType == DataControlRowType.Footer)
                {


                    DropDownList ddlNewSubDivision = (DropDownList)e.Row.FindControl("ddlNewSubDivision");
                    if (ddlNewSubDivision != null)
                    {
                        ds = GetDAL.GetSubDivision();
                        ddlNewSubDivision.DataSource = ds;
                        ddlNewSubDivision.DataValueField = ds.Columns[0].ToString();
                        ddlNewSubDivision.DataTextField = ds.Columns[1].ToString();
                        ddlNewSubDivision.DataBind();
                    }
                }


                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    LinkButton lnkButton = (LinkButton)e.Row.FindControl("btnDelete");
                    lnkButton.Attributes.Add("onclick", "javascript:return " +
                    "confirm('Are you sure you want to delete this Department?')");
                }
            }
            catch (Exception ex)
            {
                lblErrorMessage.Text = "Error in binding the data.";
            }
        }


        protected void grdDepartments_RowEditing(object sender, GridViewEditEventArgs e)
        {
            try
            {
                grdDepartments.EditIndex = e.NewEditIndex;
                FillDepartmentsInGrid();
                DropDownList ddlEditSubDivision = (DropDownList)grdDepartments.Rows[e.NewEditIndex].FindControl("ddlEditSubDivision");
                ddlEditSubDivision.SelectedValue = grdDepartments.DataKeys[e.NewEditIndex]["SubDivisionID"].ToString();
            }
            catch (Exception ex)
            {
                lblErrorMessage.Text = "Error in editing the record." + ex.Message;
            }
        }


        protected void grdDepartments_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
        {
            try 
            {
            grdDepartments.EditIndex = -1;
            FillDepartmentsInGrid();
            }
            catch (Exception ex)
            {
                lblErrorMessage.Text = "Error in caceling edit record.";
            }
        }


        protected void grdDepartments_RowUpdating(object sender, GridViewUpdateEventArgs e)
        {
            try 
            {
                string DeptID = grdDepartments.DataKeys[e.RowIndex].Values[0].ToString();
                TextBox txtEditDepartment = (TextBox)grdDepartments.Rows[e.RowIndex].FindControl("txtEditDepartment");
                DropDownList ddlEditSubDivision = (DropDownList)grdDepartments.Rows[e.RowIndex].FindControl("ddlEditSubDivision");
                string sDept = txtEditDepartment.Text.Trim().Replace("'", "''");
                
                if (sDept == "")
                {
                    lblErrorMessage.Text = "Enter the Department.";
                    return;


                }
                objbel.DeptDesc = sDept;
                objbel.Id = Convert.ToInt32(DeptID);
                objbel.SubDivisionId = Convert.ToInt32(ddlEditSubDivision.SelectedItem.Value);
                int returnVal = GetDAL.GetUpdateDepartmentCheck(objbel);
                if (returnVal != 0)
                {
                    lblErrorMessage.Text = " Department already exists";
                    return;


                }


                GetDAL.GetUpdateDepartment(objbel);
                grdDepartments.EditIndex = -1;
                txtDept.Text = "";
                FillDepartmentsInGrid();
                lblErrorMessage.Text = "Record updated successfully.";
            }
            catch (Exception ex)
            {
                lblErrorMessage.Text = "Error in updating the record.";
            }
        }


        protected void grdDepartments_RowDeleting(object sender, GridViewDeleteEventArgs e)
        {
            try 
            {
                string DeptID = grdDepartments.DataKeys[e.RowIndex].Values[0].ToString();


                objbel.Id = Convert.ToInt32(DeptID);
                GetDAL.GetDeleteDepartment(objbel);


                grdDepartments.EditIndex = -1;
                txtDept.Text = "";
                FillDepartmentsInGrid();
                lblErrorMessage.Text = "Record deleted successfully.";
            }
            
            catch (System.Data.SqlClient.SqlException ex)
            {


                lblErrorMessage.Text = "Please unassign this Department from all associated Users before deleting it.";
            }
            catch (Exception ex)
            {
                lblErrorMessage.Text = "Error in deleting the record.";
            }


        }


        protected void grdDepartments_SelectedIndexChanged(object sender, EventArgs e)
        {


        }


        protected void grdDepartments_PageIndexChanging(object sender, GridViewPageEventArgs e)
        {
            try
            {
                lblErrorMessage.Text = "";
                grdDepartments.PageIndex = e.NewPageIndex;
                FillDepartmentsInGrid();
            }
            catch (Exception ex)
            {


                lblErrorMessage.Text = "Error in paging the records." + ex.Message;
            }
        }


        protected void btnSearch_Click(object sender, EventArgs e)
        {
            try
            {
                ViewState["Department"] = txtDept.Text.Trim().Replace("'", "''");
                FillDepartmentsInGrid();
            }
            catch (Exception ex)
            {
                lblErrorMessage.Text = "Error in btnSearch_Click." + ex.Message;
            }


        }
    }
}