User Id :    Password :      New Member   Forgot Password  
 
How to make GridView Individual Cells Selectable
Description In some situations we need to make GridView each cell of the GridView selectable to fetch the cell i   No. of Views     13176
  Rating     3
Author Sumit Gupta   Posted On     06 Mar 2011
Tags ASP.NET,C#    

Sample Code   Download Code

Steps to make cells selectable:-

  1. Firstly create a GridView and bind it with some data source.
  2. Add ButtonField with some Command Name say "CellClick" to the GridView columns.
    <asp:buttonfield commandname="CellClick" visible="false"></asp:buttonfield>
    
  3. Now we need to handle GridView OnRowDataBound event to modify each cell in each GridView row as it is bound, where we can add attributes to each GridView cell to handle Onclick or OnDouble click event by adding client script which is used by the SingleClick button for postback and assign it to each cell.
        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
             if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    LinkButton _singleClickButton = (LinkButton)e.Row.Cells[0].Controls[0];
                    string _jsSingle = ClientScript.GetPostBackClientHyperlink(_singleClickButton, "");
                    // Add events to each editable cell
                    for (int columnIndex = 0; columnIndex < e.Row.Cells.Count; columnIndex++)
                    {
                        // Add the column index as the event argument parameter
                        string js = _jsSingle.Insert(_jsSingle.Length - 2, columnIndex.ToString());
                        // Add this javascript to the onclick Attribute of the cell
                        e.Row.Cells[columnIndex].Attributes["onclick"] = js;
                        // Add a cursor style to the cells
                        e.Row.Cells[columnIndex].Attributes["style"] += "cursor:pointer;cursor:hand;";
                    }
                }
            
        }
    Now each row of the GridView is clickable and we can get the details of the user selected cell in GridView OnRowCommand event.
  4. Now we need to handle GridView’s OnRowCommand event to get the selected cell details as below. Within the RowCommand event, the command argument and the event argument are retrieved. This gives us the row and column index of the selected cell.
    
        protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            if (e.CommandName.ToString() == "CellClick")
            {
                foreach (GridViewRow r in GridView1.Rows)
                {
                    if (r.RowType == DataControlRowType.DataRow)
                    {
                        for (int columnIndex = 0; columnIndex < r.Cells.Count; columnIndex++)
                        {
                            r.Cells[columnIndex].Attributes["style"] += "background-color:White;";
                        }
                    }
                }
                int selectedRowIndex = Convert.ToInt32(e.CommandArgument.ToString());
                int selectedColumnIndex = Convert.ToInt32(Request.Form["__EVENTARGUMENT"].ToString());
                GridView1.Rows[selectedRowIndex].Cells[selectedColumnIndex].Attributes["style"] += "background-color:Red;";
                lblSelectedColumn.Text = selectedColumnIndex.ToString();
                lblSelectedRow.Text = selectedRowIndex.ToString();
                lblSelectedColumnTitle.Text = GridView1.Columns[selectedColumnIndex].HeaderText;
                lblSelectedColumnValue.Text = GridView1.Rows[selectedRowIndex].Cells[selectedColumnIndex].Text;
            }
        }
    
    
    To overcome Event Validation errors we need to handle Pages Render method. Otherwise we will get the Invalid postback or callback argument (Event validation is enabled using in configuration or <%@Page EnableEventValidation="true" %> in a page.  For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them.  If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.) error.
  5. So add the following code on to the page to register each gridview cell for event validation.
    
        protected override void Render(HtmlTextWriter writer)
        {
            foreach (GridViewRow r in GridView1.Rows)
            {
                if (r.RowType == DataControlRowType.DataRow)
                {
                    for (int columnIndex = 0; columnIndex < r.Cells.Count; columnIndex++)
                    {
                        Page.ClientScript.RegisterForEventValidation(r.UniqueID + "$ctl00", columnIndex.ToString());
                    }
                }
            }
            base.Render(writer);
        }
    
    
  6. That's all now run your project and you will find that each cell is selectable and you are able to get the selected value.

About Author

About Author I am Sumit Gupta working in 3 Pillar Global Pvt. Ltd as Module Lead. I have 7+ year of experience in .Net technologies. I love to explore new technologies and write technical article. Sumit Gupta
No Photo
 
Country India
Company 3 Pillar Global Pvt. Ltd.
Home Page http://www.facebook.com/sumitgupta1225

Rate this article

Rating options from poor, fair, good, very good to excelent.  
 

Comments

   
Write your comment here.
Comment
Verification Code