CODEWITHSUNDEEP
c#asp.netgridview
cost
cost

Reputation: 4480

Ignore GridView Row OnClick for last cell

I have a GridView with several columns. When you click anywhere on the row a PostBack with a command happens, except for the last column, which is a Delete button, which has its own Command associated with it. I can make this happen using

protected override void Render(HtmlTextWriter writer)
    {
        foreach (GridViewRow r in CourtGrid.Rows)
        {
            if (r.RowType == DataControlRowType.DataRow)
            {
                //Clicking any cell will open the details page, except for the last cell, which is Delete
                for (int i = 0; i < r.Cells.Count - 1; ++i)
                {
                    r.Cells[i].Attributes["onclick"] = this.Page.ClientScript.GetPostBackClientHyperlink(CourtGrid, "Edit$" + r.RowIndex, true);
                }

                //Much lighter page produced
                //r.Attributes["onclick"] = this.Page.ClientScript.GetPostBackClientHyperlink(CourtGrid, "Edit$" + r.RowIndex, true);
            }
        }

        base.Render(writer);
    }

But that adds a lot of extra data to the page. A single column appears in the source as

<tr>
<td onclick="javascript:__doPostBack(&#39;ctl00$ctl00$MainContent$PageContent$CourtGrid&#39;,&#39;Edit$0&#39;)">ADAIM</td>
<td onclick="javascript:__doPostBack(&#39;ctl00$ctl00$MainContent$PageContent$CourtGrid&#39;,&#39;Edit$0&#39;)">Ada</td>
<td onclick="javascript:__doPostBack(&#39;ctl00$ctl00$MainContent$PageContent$CourtGrid&#39;,&#39;Edit$0&#39;)">Municipal</td>
<td onclick="javascript:__doPostBack(&#39;ctl00$ctl00$MainContent$PageContent$CourtGrid&#39;,&#39;Edit$0&#39;)">Ada</td>
<td onclick="javascript:__doPostBack(&#39;ctl00$ctl00$MainContent$PageContent$CourtGrid&#39;,&#39;Edit$0&#39;)">County</td>
<td onclick="javascript:__doPostBack(&#39;ctl00$ctl00$MainContent$PageContent$CourtGrid&#39;,&#39;Edit$0&#39;)">Ada</td>
<td onclick="javascript:__doPostBack(&#39;ctl00$ctl00$MainContent$PageContent$CourtGrid&#39;,&#39;Edit$0&#39;)">ID</td>
</tr>

But if you look at my code again you'll see there is a line commented out

r.Attributes["onclick"] = this.Page.ClientScript.GetPostBackClientHyperlink(CourtGrid, "Edit$" + r.RowIndex, true);

If I use this code instead I get a much lighter row

<tr onclick="javascript:__doPostBack(&#39;ctl00$ctl00$MainContent$PageContent$CourtGrid&#39;,&#39;Edit$0&#39;)">
<td>ADAIM</td>
<td>Ada</td>
<td>Municipal</td>
<td>Ada</td>
<td>County</td>
<td>Ada</td>
<td>ID</td>
</tr>

But then when the Delete button is clicked, I get both the Delete and the Edit Commands, which I don't want. Is there a way for me to get the light result of the full row implementation while still ignoring that last cell?

Upvotes: 1

Views: 798

Answers (2)

Shidersz
Shidersz

Reputation: 17190

Try using:

OnClientClick="javascript:event.stopPropagation()"

in the definition of the delete button (that is inside of a GridView row) on the "aspx" page. Then you can use "OnClick" attribute for the default behaviour:

OnClick="btnDelete_Click"

where "btnDelete_Click" should be defined in codebehind (aspx.cs), for example:

protected void btnDelete_Click(object sender, EventArgs e)
{
    // Performs the related delete actions...
}

Upvotes: 0

Leo
Leo

Reputation: 14830

That's normal behaviour. What happens is that the last cell is inside the row, the cell click happens first and then the row click event happens. And I guess you can take advantage of this event bubbling behaviour to stop the propagation of the click event. So, when the cell click happens you should stop the propagation of the click event. For example, 

element.onclick = function(e){
    e.stopPropagation();
};

This JSFiddler Example demostrates it with a plain html table. So, I guess it is just a matter of modifying the click event handler to trigger the postback and stop the propagation of the event, some similar to this...

r.Attributes["onclick"] = string.Format(@"function(e){{
                   __doPostBack(&#{0};{1}&#{0};,&#{0};Edit$0&#{0};);                                     
                                   e.stopPropagation();

                           }}", r.RowIndex, CourtGrid.UniqueID);

Note, that I have not tested this, so don't make any assumptions, but it should give you an idea of how to achieve the same. Hope it makes sense

Upvotes: 1

Related Questions