CODEWITHSUNDEEP
c#asp.net
Different111222
Different111222

Reputation: 1535

How do I assign different style to Insert and Cancel buttons of a DetailsView?

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?

Upvotes: 2

Views: 3073

Answers (3)

Zachary
Zachary

Reputation: 6532

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.

Upvotes: 1

Different111222
Different111222

Reputation: 1535

Thanks to kapil-khandelwal this is a solution using jQuery, that was in use until the newly added answer from Zachary:

<script type="text/javascript" src="../Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            $("input").each(function () {
                if ($(this).attr("type") == "submit") {
                    if ($(this).val() == "Insert") { $(this).addClass("Insert"); };
                };
                if ($(this).attr("type") == "button") {
                    if ($(this).val() == "Cancel") { $(this).addClass("Cancel"); };
                };
            });
        });
    </script>

Upvotes: 0

Kapil Khandelwal
Kapil Khandelwal

Reputation: 16144

Using jQuery (http://docs.jquery.com/Downloading_jQuery#Download_jQuery):

<script src="../jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var list = $("input[type=button]");
        list.each(function (itemIndex) {
            if ($(this).val() == "Cancel")
            { $(this).addClass("Cancel"); }
            else {
                if ($(this).val() == "Insert")
                { $(this).addClass("Insert"); }
            }
        });
    });
</script>

Just add two classes ("Insert" & "Cancel") in your CSS file. For Eg. 

 <style type="text/css">
.Insert {background-color:Red;}
    .Cancel {background-color:Black;}
</style>

Upvotes: 0

Related Questions