[this is for v 1.1]
On a web page I have an ImageButton with some server side action to take place when it is clicked. But there are scenarios where I would like it to be disabled. The Enabled property disables any command action, but you still get the “index finger” cursor when you hover over the icon. I didn’t even want that. I think that’s pretty confusing because it still looks like the user can *do* something.
To make it more interesting, I have this happening inside of a Data Repeater. Here is how I got this to work.
Just after the ImageButton, I placed an <asp:image> with the same image as it’s source. The default “visible” parameter on this is False. Since I am doing this in a Repeater, I am hand coding it, so remember to add runat=server. In my case, I actually have a different image, so it is extra obvious to the user that the state of the icon has changed.
By making the visible property false, not only is the image not visible, but it does not take up any real estate on the page.
<asp:Imagebutton id=”CheckOut” runat=”server” ImageUrl=”images/checkout_red.gif” AlternateText=”Check Out” CommandName=”CheckOut” />
<asp:Image ID=”CheckOutNoLink” Runat=server ImageUrl=”images/checkout_small.gif” Visible=False/>
In the repeaters “ItemCommand” event, when the state calls for the inactive image I just flip the Imagebutton’s visible property to false and the Image control’s visible property to true. Again, by making the Imagebutton not visible, it no longer takes up the space on the page, and the Image slides over to fill in the hole that the Imagebutton left behind.
CType(e.Item.FindControl(“CheckOutNoLink”), System.Web.UI.WebControls.Image).Visible = True
CType(e.Item.FindControl(“CheckOut”), System.Web.UI.WebControls.Image).Visible = False
I’m sure this has been done plenty of times before, but I didn’t intuit the solution at first and couldn’t find anything on google, so here ya go!
www.acehaid.org
Sign up for my newsletter so you don't miss my conference & Pluralsight course announcements!