ASP.NET GridView CommandField Update/Cancel does not wrap

Question

My question is on the ASP.NET GridView control. I am using a CommandField in the Columns tag as seen below.

<asp:CommandField ShowEditButton="True" HeaderStyle-Width="40px" UpdateText="Save" ButtonType="Link" HeaderStyle-Wrap="true" ItemStyle-Wrap="true" ItemStyle-Width="40px"/>

What renders is the shown in the following image (after I click on the Edit button).

As you can see I am trying to have the Cancel link show up a new line and my question is how do you do what? If I change the ButtonType="Link" to ButtonType="Button", I get it rendering correctly as shown below.

alt text http://i38.tinypic.com/2pqopxi.jpg

I've tried Google already and maybe I'm not searching on the right tags but I couldn't see this one addressed before.

Answer 1

If you use a template field it will give you complete control over the look of your page, but it requires that you use the CommandName and possible CommandArgument properties, and also using the GridView's OnRowCommand.

The aspx page:

<asp:GridView id="gvGrid" runat="server" OnRowCommand="gvGrid_Command">
 <Columns>
  <asp:TemplateField>
   <ItemTemplate>
    Some Stuff random content
    <br />
    <asp:LinkButton id="lbDoIt" runat="server" CommandName="Cancel"  CommandArgument="SomeIdentifierIfNecessary" />
   </ItemTemplate>
  </asp:TemplateField>
 </Columns>
</asp:GridView>

The code behind:

protected void gvGrid_Command(object sender, GridViewCommandEventArgs e)
{
 if(e.CommandName=="Cancel")
 {
   // Do your cancel stuff here.
 }

}

Answer 2

Don't use a command field, use a TemplateField and put your command button in that with a line break (br) before it like you want.