I love .NET's Data Controls. Version 2.0 ushered in several new ones, one of which was the DetailsView. It's great except for one thing, the default buttons for "update", "insert", and "cancel" are LinkButtons! I first noticed this when I was working with the ASP.NET BeerHouse Starter Kit.
I've observed ordinary users trying to use these buttons and it always confuses them. The fact is, clicking text to submit a form is pretty rare, especially if the form is large and requires a lot of information. Almost always a button or a graphic that looks like a button is used. I'm a fan of consistency and intuitive user interfaces, so naturally I wanted to change the LinkButtons to good old-fashioned Buttons.
The problem is related to the AutoGenerateXXXXXButton attributes of the <asp:DetailsView /> control, where XXXXX is "Edit," "Insert," or "Delete." Get rid of them if you're using them. If you don't you'll find that you have two command fields later.
Create an <asp:CommandField /> element under the <Fields> tag of the DetailsView. Set the ButtonType to "Button." That is the most important part. If you don't set it it will default to "Link" and display LinkButtons again. We'll also need to tell it which command buttons to display via the ShowXXXXXButton attribute of the CommandField. That's pretty much it. Below is an example of the code that generated the second graphic here on the right. The first graphic was the default look-and-feel for the DetailsView.
<asp:DetailsView ID="DetailsView2" runat="server" AutoGenerateRows="False"
DefaultMode="Edit" DataSourceID="XmlDataSource1" GridLines="none">
<Fields>
<asp:BoundField DataField="Vin" HeaderText="Vin" SortExpression="Vin" />
<asp:BoundField DataField="Make" HeaderText="Make" SortExpression="Make" />
<asp:BoundField DataField="Model" HeaderText="Model" SortExpression="Model" />
<asp:BoundField DataField="Year" HeaderText="Year" SortExpression="Year" />
<asp:BoundField DataField="Price" HeaderText="Price" SortExpression="Price" />
<asp:CommandField ButtonType="Button" ShowCancelButton="true" ShowDeleteButton="true"
ShowEditButton="true" ShowInsertButton="true" />
</Fields>
</asp:DetailsView>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/CarList.xml"></asp:XmlDataSource>
If you'd rather use an image instead of a Button set ButtonType to "Image." You'll also have to give the URL of the image via the XXXXXImageUrl attribute of the CommandField, where "XXXXX" is the command type. (i.e. Cancel, Update, Insert, etc.)
Subscribe