How do you rotate the image in a CommandField

Question

So I have these rows,

Each row has a command field in my .aspx page.

<asp:CommandField ControlStyle-BackColor="White" ItemStyle-BackColor="White"     SelectImageUrl="~/Styles/img/arrow_state_blue_right.png"
                                            ShowSelectButton="true" ButtonType="Image" ItemStyle-Width="3px"></asp:CommandField>

As you can see, the type of button the command field uses is an image. The image is the little blue arrows you see in each command field in the picture.

I want the arrows to rotate by an animation when a user clicks on the command field. So I wrote a little javascript function:

function rotateArrow() {
  document.getElementById("#arrow").style.WebkitTransitionDuration = "1s";
  document.getElementById("#arrow").style.webkitTransform = 'rotate(40deg)';
}

This function works just fine when the arrow is an image field. I.e., if I change the arrow to something like:

<asp:Image ImageURL=".....

But I don't want the arrows to be asp.NET image fields, I want them to be the button in my command field.

Is there a way to do this? How can I tell JavaScript to rotate the arrow image attribute of my command field? I can't find anything about this, so I'm starting to think this is simply not supported. The only work-around I can think of that won't mean I lose the command field functionality is I could simply update the selectImageURL attribute in the code behind, but then I wouldn't have the animation.

Answer 1

In case someone else is struggling with accessing an attribute within a commandfield or something similar, here is one solution. The image within the hidden field is an ImageButton. Here is my gridview with the commandfield in my .aspx file:

<asp:GridView ID="gvColumnsViewSettings" runat="server" Width="90%"  OnRowDataBound="gvColumnsViewSettings_RowDataBound" AutoGenerateColumns="false" GridLines="None" ShowHeader="false" ShowFooter="false" OnSelectedIndexChanged="gvColumnsViewSettings_SelectedIndexChanged" DataKeyNames="ColumnOrder">
    <Columns>
    <asp:CommandField ControlStyle-BackColor="White" ItemStyle-BackColor="White" SelectImageUrl="~/Styles/img/arrow_state_blue_right.png" ShowSelectButton="true" ButtonType="Image" ItemStyle-Width="3px"></asp:CommandField>
...

Notice how when the gridview index is changed, it called the function gvColumnsViewSettings_SelectedIndexChanged.

Now within the SelectedIndexChanged function in my code behind:

ImageButton arrow = null;
if(selectedRow.Cells != null && selectedRow.Cells.Count > 0 && selectedRow.Cells[0].Controls != null && selectedRow.Cells[0].Controls.Count > 0)
    arrow = (ImageButton)selectedRow.Cells[0].Controls[0];

Now you have the arrow image attribute within your commandfield!