You are not Logged in
Would you like to Login or Register

Today is: 04 July 2009
Check this months hot topics

Select a row in an asp:GridView without using a Select Command

ASP.Net's GridViews can be quite useful, but beware of binding them to huge datasets as this has an overhead on the ViewState.

Often you'll want to display a number of columns on each line and row space becomes an issue. What's worse is you then have to create a SELECT command button to be able to access that line's data.

<asp:CommandField ShowInsertButton="true" />

Use the following code on the event OnRowDataBound to eliminate the need for the SELECT command field and save yourself some valuable space.

Here is the HTML to create a GridView, I'm displaying a list of people, and the key for each record is the PERSON_ID.

<asp:GridView ID="PeopleGridView" runat="server" 
    AutoGenerateColumns="False" 
    DataKeyNames="PERSON_ID" 
    DataSourceID="PeopleDataObject" 
    Width="200px" 
    OnRowDataBound="PeopleGridView_RowDataBound" 
    AllowPaging="True">
    <Columns>  
        <asp:BoundField 
            DataField="USER_NAME" 
            HeaderText="Name" 
            SortExpression="USER_NAME" >
        </asp:BoundField>
    </Columns>
</asp:GridView>

The key event to note is the OnRowDataBound, use the following code to create SELECT functionality on the row.

protected void PeopleGridView_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes["onmouseover"] = "this.style.cursor='hand';this.style.textDecoration='underline';";
            e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";

            e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.PeopleGridView, "Select$" + e.Row.RowIndex);
        }
    }

Each row will then behave like a link, and when you select one it can drive the behavior of another control(s) on your page, possibly a DetailsView allowing you to INSERT a complete record to the database.

kick it on DotNetKicks.com del.icio.us digg Mister Wong YahooMyWeb Reddit Furl Spurl blogmarks
Paul Marshall Skype
Author : Paul Marshall
Published : 14 June 2006

A self confessed Microsoft bigot, Paul loves all Microsoft products with a particular fondness for SQL Server. Paul is currently focusing on Web 2.0 patterns and practices and is always looking for better ways of doing things. I love the .net platform, and I find it to be the most productive toolset I have used to date.

Comments

Anonymous said:

This only seems to work in framework 2.0 if you add enableEventValidation="false" to the page directive in web.config, which is not recommended

August 18, 2006 - 9:17 AM

Paul Marshall said:

In response to the comment regarding enableEventValidation being set to false. You don't need to do that, I've gone back to my implemention of this and its set to true in both the page and the web.config

I have never used this in previous versions of the framework and this example was lifted from a .net 2.0 project.

Happy coding..... :-)

August 20, 2006 - 2:22 PM

Edgar said:

Sadly I found the enableEventValidation issue too.

Any suggestions?. Thx

August 22, 2006 - 6:22 PM

Paul Marshall said:

I'd suggest that you look that the data in your GridView, and the other controls on your page.

You will probably have data that is upsetting your viewstate. e.g. HTML code in a text box.

What is the error message you're getting?

August 23, 2006 - 2:52 PM

said:

I have the same problem when I click on the row on the gridview I get the enablepagevalidation = true error. If I have a select field visable on the gridview then it works ok when clicked. If I remove this it does not and it willnot fire the SelectedIndexChanged event on the gridview Please can you help

August 29, 2006 - 2:16 PM

Khalegh Ahmadi, Khalegh@GMail.com said:

You can solve the invalidation problem very easy :

Use the select CommandField and set it's visible property to true. Then set the Display Style of Both the Item Style and Header Style to none.

Set the ItemStyle-CssClass and HeaderStyle-CssClass properties to a class created in a StyleSheet File which contains the Dispaly Style.

For Example :

.HideButton {Display : none}

and in Gridview add the Select CommandField :

<asp:CommandField SelectText ="Select" ShowSelectButton="true"

ItemStyle-CssClass = "HideButton" HeaderStyle-CssClass ="HideButton" />

August 30, 2006 - 9:21 AM

Khalegh said:

You can solve the event invalidation problem very easy :

Create a StyleSheet File and write the following class in it :

.HideButton { Display : none}

Then

Use the Select CommandField and set it's Visible property to true and set both the ItemStyle-CssClass and HeaderStyle-CssClass to HideButton :

<asp:CommandField SelectText ="Select" ShowSelectButton="true"

ItemStyle-CssClass = "HideButton" HeaderStyle-CssClass ="HideButton" />

August 30, 2006 - 9:35 AM

Anup Garg said:

It really worked for me after making changes in config. Thanx.

August 31, 2006 - 8:03 PM

Levi said:

I want to select row in the gridview only when the GridView.Enabled is true.

Is there any solution?

September 17, 2006 - 11:33 AM

Levi said:

Thank You, I found the solution.

"if (GridView1.Enabled) Select$" + e.Row.RowIndex);

September 17, 2006 - 11:45 AM

Anonymous said:

I love the solution, thanks. One issue with it though. Currently if I select one, on a Paged Gridview (allow paging), if I switch pages, the selection is moved to the current page at the same index in the page. How can this be changed to clear the selection when I switch pages?

December 05, 2006 - 8:45 PM

Manuj said:

Thanks It works Good with GridView in framework2.0

December 25, 2006 - 5:26 AM

Gagan said:

Thanks Paul. It is exact what i was looking for.

December 28, 2006 - 4:04 PM

YK said:

GridView settings:

EnabledViewState = false

LinkButton set as CommandName=Select

SelectedIndexChanged event is not fired which take me to other page.

When I set EnableViewState = true, it works fine.

Any suggestions

January 16, 2007 - 9:45 PM

mary said:

hi tried this example but i am getting the follwing error just tell me how to clear it

Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/> 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.

January 18, 2007 - 7:24 AM

yrksundeep said:

can some one help me how to bind the details view by selecting a row using rowdatabound event in a grid view. i need the contiuation for this code.

February 23, 2007 - 7:59 AM

darshan said:

i tried but i m getting the following erro so plz give me solution

and how to post back to new page record as per that record selection

Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/> 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.

March 02, 2007 - 6:57 AM

said:

For those that are getting the validation issue, I have solved it in my project by adding the following (be sure to replace the "GridViewControlName" with your own:

Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)

        'The following line of code is required when doing a manual postback from client script.

        Page.ClientScript.RegisterForEventValidation(GridViewControlName.UniqueID)



        MyBase.Render(writer)

    End Sub
April 26, 2007 - 9:24 PM

DR said:

The mouseover doesn't work in FF. I can get the same effect with styles.

May 02, 2007 - 1:41 AM

kenyu said:

thanks Paul,it does work for me.

May 02, 2007 - 7:34 AM

owen said:

very usefull. thanks

May 03, 2007 - 7:02 PM

michel said:

Any1 any idea how to set the row background to another color onmouseover? Just adding this.style.background-color:gray; doesn't work

June 09, 2007 - 3:10 PM

Joey J. Barrett said:

Perfect solution thank you.

What I did:

The GridView is in a UpdatePanel and each selection is stored in a session allowing the user to make multiple selections then act on them.

June 21, 2007 - 8:35 PM

lis716 said:

i'm using visual basic and the codes seems not to work at all. do i have to declare it ? like for example this code e.Row.Attributes["onmouseover"] = "this.style.cursor='hand';this.style.textDecoration='underline';";

the "e" needs a declaration.

and the format of the code like the parethesis forst before the if does not work too... :(

pls help!

June 22, 2007 - 3:28 AM

Aladdin said:

Thanks Paul and Khalegh - it works perfectly well using both your codes.

July 22, 2007 - 7:18 AM

vishal said:

thanks for the solution, but i am getting a wierd behaviour , for paging enabled in the grid, after i go to next page, i get the same data on the previous ( first ) page ( from dataset ) on clicking on a row on second/next page..

July 26, 2007 - 8:00 AM

yamini said:

it is nice

September 18, 2007 - 11:07 AM

KathyPDX said:

That is so cool! Works great, thanks.

October 01, 2007 - 11:56 PM

ousama said:

hello paul,

i just one question and i hope you could help me because i have been surfing the net for a week and i could not find the answer. when my application goes from one page to another based on a selected row in my grid i want ,when i click on the back button, to see the selected already kept selected in the privouse table. i hope it is clear for you thanks in advanced

November 23, 2007 - 10:22 PM

Ryan said:

The VB version of this code:

Protected Sub YourGridName_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)

        If (e.Row.RowType = DataControlRowType.DataRow) Then

            e.Row.Attributes.Add("onmouseover", "this.style.cursor='hand';this.style.textDecoration='underline';")

            e.Row.Attributes.Add("onmouseout", "this.style.textDecoration='none';")



            e.Row.Attributes.Add("onclick", ClientScript.GetPostBackClientHyperlink(Me.YourGridName, "Select$" + e.Row.RowIndex.ToString()))

        End If

End Sub

Note here that I'm not using a handler for this function. If you do this funciton gets called twice every time you click a row - once from the OnRowDataBound property in the gridview, and the other from the handler.

To get this to work if you are getting the " Event validation is enabled using..... " error, I reccommend using Khalegh Ahmadi's hack. I have tried it and it works beautifully. The way I understand it is he tricks server into thinking that postback came from the server control.

A few things to note with his hack is that if you haven't already, you need to add a link to the stylesheet you are going to use up the top of your aspx page between the <head> </head> tags, something like:

<link rel="Stylesheet" href="stylesheet.css" type="text/css" />

December 04, 2007 - 1:43 AM

trycatchscenario said:

Ok I found a easier solution for those who just want to disable it for the page rather the the config file for the whole project. On the top of the .aspx page add this line

<%@ Page EnableEventValidation="false" %>

December 19, 2007 - 10:14 PM

said:

What if the gridview have a deletebutton column which does not want to bahave like a link ?

January 04, 2008 - 11:15 AM

marshp3 said:

You could set the button to not "bubble" the event to the row.

Skype me or Google to find out how to do it

January 04, 2008 - 2:48 PM

Ranch said:

Thanks Paul! Very nice Code!

January 11, 2008 - 2:54 PM

cxspan said:

The guy who posted (and didn't leave a name) on April 26, 2007 - 9:24 PM was on the right track. You need to override the Render function and add the onclick/styling code here. Remove this code from the RowDataBound function and DO NOT DISABLE EVENT VALIDATION!

protected override void Render(System.Web.UI.HtmlTextWriter writer)

{

    AddRowSelectToGridView(GridView1);

    AddRowSelectToGridView(GridView2);

    AddRowSelectToGridView(GridView3);

    base.Render(writer);

}

private void AddRowSelectToGridView(GridView gv)

{

    foreach (GridViewRow row in gv.Rows)

    {

        row.Attributes["onmouseover"] = "this.style.cursor='hand';this.style.textDecoration='underline';";

        row.Attributes["onmouseout"] = "this.style.textDecoration='none';";

        row.Attributes.Add("onclick", Page.ClientScript.GetPostBackEventReference(gv, "Select$" + row.RowIndex.ToString(), true));

    }

}

January 31, 2008 - 7:04 PM

Nev said:

Thanks Paul,,really work wonders. did'nt know of this feature in the fridview..Excellent!!

February 02, 2008 - 12:24 PM

Nev said:

Excellent work Paul!!

February 02, 2008 - 12:26 PM

ahm said:

i need to display in textboxes when i click a particular row in gridview by using asp.net using vb.net

February 12, 2008 - 1:56 PM

Tarun said:

All soutions works fine so long as you dont have any other command like delete, edit in the gridview.

if you have it, then if you click delete, first select and then delete command will be fired, resulting two postbacks.

i am curious if someone posts a solution for this

March 07, 2008 - 11:08 AM

dipak sanki said:

when i click a particular row in gridview,i need to display another gridview by using asp.net using C#

March 12, 2008 - 10:36 AM

amanda said:

hi. the code work great, thanks!! i was also wondering what extra steps/codes necessay it make the clicked item redirect to another page and at the same time extracting its value. any tips would help thanks again.

April 03, 2008 - 12:10 PM

sushanth said:

hey...it works great, only put.. the EnableEventvalidation="false" in the .aspx page.. it works fine.

this is my entire .cs code file :

public partial class Default3 : System.Web.UI.Page

{

    static string connection = System.Configuration.ConfigurationManager.ConnectionStrings["EhrmConnectionString"].ToString();

    SqlConnection con = new SqlConnection(connection);

    protected void Page_Load(object sender, EventArgs e)

    {



        con.Open();

        try

        {



            SqlCommand cmd1 = new SqlCommand("select * from Admin_HRMS_Grade", con);

            SqlDataAdapter adp = new SqlDataAdapter(cmd1);

            DataSet ds = new DataSet();

            adp.Fill(ds, "Admin_HRMS_Grade");

            GridView1.DataSource = ds;

            GridView1.DataBind();



        }

        catch (Exception ce)

        {



            Response.Write(ce.Message + ce.StackTrace);

        }

        finally

        {

            con.Close();



        }



    }



    protected void Gridview1_page(object sender, System .Web .UI .WebControls .GridViewPageEventArgs  e)

    {



        GridView1.PageIndex = e.NewPageIndex;

        GridView1.DataBind();

    }

    protected void Submit1_ServerClick(object sender, EventArgs e)



    {



       try

        {

            con.Open();

            SqlCommand cmd = new SqlCommand("Admin_HRMS_Grade_Insert", con);

            cmd.CommandType = CommandType.StoredProcedure;

            cmd.Parameters.AddWithValue("@Grade_name", Text2.Value);

            cmd.Parameters.AddWithValue("@Grade_desc", TEXTAREA1.Value);

            cmd.Parameters.AddWithValue("@Grade_band", Text3.Value);



            if (Radio1.Checked == true)

            {

                cmd.Parameters.AddWithValue("@Status",1);

            }

            else if (Radio2.Checked == true)

            {

                cmd.Parameters.AddWithValue("@Status",0);

            }





            cmd.ExecuteNonQuery();

        }

        catch (Exception ce)

        {

            Response.Write(ce.Message + ce.StackTrace);

        }

        finally

        {

            con.Close();

        }



    }

    protected void Button1_Click(object sender, EventArgs e)

    {

        try

        {

            con.Open();

            SqlCommand cmd2= new SqlCommand("select * from Admin_HRMS_Grade where Grade_Name='"+Text1.Value+"'", con);

            SqlDataAdapter adp2 = new SqlDataAdapter(cmd2);

            DataSet ds2 = new DataSet();

            adp2.Fill(ds2, "Admin_HRMS_Grade");

            GridView1.DataSource = ds2;

            GridView1.DataBind();



        }

        catch

        {

        }

        finally

        {

            con.Close();

        }

    }

    protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)

    {

        try

        {

            string  a;

            con.Open();

            GridViewRow row = GridView1.SelectedRow;



            //Text1.Value = row.Cells[1].Text;

            Text1.Value = GridView1.SelectedRow.Cells[1].Text;

            a = Text1.Value;

        }

        catch

        {

        }

        finally

        {

        }



    }



    protected void GridView1_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)

    {

        try

        {

           GridViewRow row = GridView1.Rows[e.NewSelectedIndex];

               }

        catch

        {

        }

        finally

        {

        }

    }



    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

    {

        if (e.Row.RowType == DataControlRowType.DataRow)

        {

            e.Row.Attributes["onmouseover"] = "this.style.cursor='hand';this.style.textDecoration='underline';this.style.backColor='Red'";

            e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";



            e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.GridView1, "Select$" + e.Row.RowIndex);

        }

    }

}

April 17, 2008 - 10:46 AM

deive said:

Thanks cxspan - that was exactlly what was needed :-)

May 28, 2008 - 7:10 PM

Lawrence said:

Hi,

How about this?

protected void gridview1_RowCommand(object sender, GridViewCommandEventArgs e)

{

   if (e.CommandName == "MySelect")
   {
      GridViewRow mySelectedRow =
        ((GridViewRow)(((DataControlFieldCell)(((WebControl)(e.CommandSource)).Parent)).Parent));
           int mySelectedRowIndex = mySelectedRow.RowIndex;
   }

}

In your source code: ASPX:

........

        <asp:TemplateField ShowHeader="False">

<ItemTemplate>

<asp:LinkButton ID="lnkMySelect" runat="server" Text="MySelect"

   CausesValidation="False" CommandName="MySelect" />
        </ItemTemplate>
        </asp:TemplateField>

..........

This would allow you to have access to the GridViewRow of the clicked link.

Hope this helps!

July 14, 2008 - 7:16 PM

Alex said:

Hi there.

I get an error saying:

The name 'ClientScript' does not exist in the current context

any help would be greatly appreciated

September 16, 2008 - 6:38 AM

WildCow said:

For Alex:

Page.ClientScript (I had to search for that one too...).

For me:

I can't get the mouse icon to change in FireFox, only in IE. Anyone succeeded?

October 14, 2008 - 5:49 AM

Pheno said:

@WildCow

You have to use this.style.cursor='pointer';

October 22, 2008 - 9:59 AM

JohnJacob said:

@Alex:

Try using this.style.cursor='pointer' instead of this.style.cursor='hand'

October 22, 2008 - 8:15 PM

ST said:

Thanks paul your information on the on click it helped me. Now I have another question I am trying to add a line to an existing gridview I click on a line and would like to add a line under the line I clicked on.

Thanks

November 04, 2008 - 12:10 PM

Harrison said:

Thank you so much guys for all your contribution. I have gotten the completed the skeletal work. but this is work I'm having problems

How can you access to the index of the Row that's been selected?

I only allowing it to select one item at a time.

Thank you so much guys!

February 18, 2009 - 3:42 PM

David said:

I ran across this and some other posts that proposed the same basic approach, however I ended up getting an error message related to Validation being set to true. (I don't recall the exact wording of it.)

As an alternative, I adapted the solution slightly to to hard code the 'javascript:_doPostBack()' into a string using the same variables to create the proper references. The result is that the onClick is generated with the Page.ClientScript.GetPostBackEventReference().

Sub gridView_ShowList_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)

Dim functionName As String

'Note that the gridview name is hard coded, the original code uses the sender object, but I couldn't get it to work

'in concatenating the string

functionName = "javascript:_doPostBack('gridViewShowList'" "," "'" "Select$" & e.Row.RowIndex.ToString "')"

If e.Row.RowType = DataControlRowType.DataRow Then

e.Row.Attributes.Add("onclick", functionName)

End If

End Sub

http://www.aspmessageboard.com/showthread.php?t=230982

February 27, 2009 - 2:50 AM

nikki said:

Thanks. It helped me alot.

April 02, 2009 - 7:38 PM

Add Comment

Enter your comment below and it will be submitted for moderation.

Your Name

Add Tag

Please enter tags for this article, seperated by semi-colon ;

View Tag's by : # articles | # views