ASP.NET GridView CommandField Update/Cancel does not wrap

Question

Hi.

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 that? If I change the ButtonType="Link" to ButtonType="Button", I get it rendering correctly as shown below.

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

Appreciate any help. Thank you.

Answer 1

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.

Answer 2

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.
 }

}