Solved

formatting button style within an EditCommandColumn

Posted on 2006-06-13
5
770 Views
Last Modified: 2011-10-07
I have the following style that I apply to all the buttons on my page.  I have not been able to format the buttons in the Datagrid's EditCommand Column.  My only options seem to be basic text or hyperlink or image.  I would like to apply the below effects so that my page design is the same accross the board.  Please help!!

--------------------------------------------------------------------------------------------------------------
<asp:Button id=btnDel Text="Delete" onmouseup="this.style.color='black';
this.style.backgroundColor='lightblue'" onmousedown="this.style.color='white';
this.style.backgroundColor='red'" onmouseover="this.style.color='black';
this.style.backgroundColor='lightblue'" style="WIDTH: 50px;      COLOR: white;
HEIGHT: 24px; BACKGROUND-COLOR: steelblue" onmouseout="this.style.color='white';
this.style.backgroundColor='steelblue'" CommandName="Delete" Runat="server"></asp:Button>
--------------------------------------------------------------------------------------------------------------
<asp:EditCommandColumn ButtonType="PushButton" UpdateText="Update" CancelText="Cancel" EditText="Edit">
</asp:EditCommandColumn>
--------------------------------------------------------------------------------------------------------------
0
Comment
Question by:Robb Hill
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 4

Expert Comment

by:recklez
ID: 16898127
I add the styles programatically for the EditCommandColumn buttons.

In your datagrid tag add an OnItemCreated attribute.
<asp:DataGrid ID="myDatagrid" runat="server" OnItemCreated="myDatagrid_ItemCreated" AutoGenerateColumns="false" ... </asp:DataGrid>



In your code implent the function with the name you specified (myDatagrid_ItemCreated) that handles the ItemCreated Event

Public Sub myDatagrid_ItemCreated(ByVal Sender As Object, ByVal e As DataGridItemEventArgs)

   'If this is an edit row.
   If (e.Item.ItemType = ListItemType.EditItem) Then
            'Add CSS style to the buttons
            Dim updateButton As Button = CType(e.Item.Cells(5).Controls(0), Button)
            updateButton.CssClass = "submit1"

            Dim cancelButton As Button = CType(e.Item.Cells(5).Controls(2), Button)
            cancelButton.CssClass = "submit1"

            Dim deleteButton As Button = CType(e.Item.Cells(6).Controls(0), Button)
            deleteButton.CssClass = "submit1"
            deleteButton.Attributes.Add("onClick", "return confirm('Are you sure you want to delete this Manager?');")
    End If

End Sub

Note that you must change the index of the Cells() depending on how many columns you have on your datagrid.
0
 
LVL 11

Author Comment

by:Robb Hill
ID: 16960363
This is pretty neat.....more specifically though....can I use the styles I mentioned above...when I am in my css editor I do not see the onmouseover and such events.....am I doing something wrong or are they unavailabe from a stylesheet.

Thanks.
0
 
LVL 4

Accepted Solution

by:
recklez earned 500 total points
ID: 16961441
You could use the styles mention above. If you want to register an event on the button like onmouseover or onmousedown
simmply add an attribute to the button like

myButton.Attributes.Add("onmouseover","this.style.color='black'")

You will not be able to view these effects in an editor because they are rendered at runtime.
0
 
LVL 11

Author Comment

by:Robb Hill
ID: 16962427
Very nice...I have been wondering what the trick was to this.  Thanks a million ...I mean 500 :D
0
 
LVL 4

Expert Comment

by:recklez
ID: 16962922
You are very welcome robbhill!
0

Featured Post

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will learn how to count occurrences of each item in an array.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question