Question

I have a DetailsView in Insert mode:

<asp:CommandField ShowInsertButton="True" ButtonType="Button" ControlStyle-CssClass="myButton" InsertText="My Insert text" />

Both buttons Insert/Cancel get the same style, of course.

Is it possible to style these two separately to be one Blue and one Yellow?

In FormView you can define the buttons separately like this:

<asp:Button CommandName="Insert" Text="Insert" class="myButtonStyle1"  ID="myButtonID1" runat="server" CausesValidation="True" />

<asp:Button CommandName="Cancel" Text="Cancel" class="myButtonStyle2"  ID="myButtonID2" runat="server" CausesValidation="False" />

Is there anything similar for DetailsView?

Answer 1

The easiest solution would be to convert your “New, Insert, Cancel” CommandField into a TemplateField. If you using the WYSIWYG editor, there is a button for this above the OK button. This will generate the following (censored) code that you can easy style.

        <asp:TemplateField ShowHeader="False">
            <InsertItemTemplate>
                <asp:Button ID="LinkButton1" runat="server" CssClass="insertButton" CausesValidation="True" CommandName="Insert" Text="Insert" />
                &nbsp;<asp:Button ID="LinkButton2" runat="server" CssClass="cancelButton" CausesValidation="False" CommandName="Cancel" Text="Cancel" />
            </InsertItemTemplate>
        </asp:TemplateField>

NOTE: I added the CssClass attribute to the Buttons below with the CSS class names “insertButton, cancelButton”, that can all be configured in your style sheet.

More notes:

1. When buttons are needed (NOT linkButtons) do not use the closing tag
   (</asp:button>) – replace it with an inline / mark. Otherwise, it won’t work.

2. When using Insert only mode, the censored ItemTemplate is not
   needed — remove it.

3. Avoid having a ControlStyle control, otherwise it may cause class overrule.