Cambio de imagen en control Imagen

[zacktagnan]

Hola a tod@s:

[ TRABAJANDO CON ASP.NET 2.0 EN C# ]

En un GridView, tengo un <asp:ImageButton>, al que le he asociado el Comando que realiza el Seleccionar una fila del GridView (el SelectedIndexChanged)
De primeras, en su propiedad ImageUrl tiene asignado en una imagen fila_a_elegir.gif.

Lo que quiero es que al hacer clic, se cambie la imagen del ImageButton a otra, fila_elegida.gif.
Y si se pulsa de nuevo, se deseleccione la fila que fue seleccionada y se vuelva a la imagen fila_a_elegir.gif.

Y que pase lo mismo, si estando ya una fila seleccionada, se selecciona otra de las filas del GridView (es decir, se restaurará la imagen inicial del anterior ImageButton, se deseleccionará la fila seleccionada anterior, se cambie la imagen del ImageButton ahora pulsado y se seleccione su fila)

¿Es posible lograr todo esto? Si es así, ¿alguien me puede decir cómo?

[zacktagnan]

Bueno una de las cosas por las que preguntaba - el Seleccionar ó Deseleccionar la fila del GridView elegida - ya he conseguido que funcione. Puede que no sea la mejor forma de hacerlo.

Si alguien sabe como hacerlo de una mejor forma, lo puede mencionar en otra respuesta.

Lo que he hecho para que cada vez que hago clic en ImageButton es poner una variable de sesión, con valor inicial de -1 cuando se entra por primera vez en la página, en la que se almacena el valor del SelectedIndex del GridView.

Esto se hace dentro de la función del evento SelectedIndexChanged del GridView.

Bueno este es el código, por ahora:

archivo.aspx.cs

Código:

protected void Page_Load(object sender, EventArgs e)
{
        ...

        if (!Page.IsPostBack)
        {
                ...
                //VALORES INICIALES DE SELECCIÓN
                Session["indice_selecc"] = -1;
                ...
        }
}

...

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
        if ((Session["indice_selecc"]).ToString() == (GridView1.SelectedIndex).ToString())
        {
                GridView1.SelectedIndex = -1;
                Session["indice_selecc"] = -1;
        }
        else
        {
                Session["indice_selecc"] = GridView1.SelectedIndex;
        }
}

...

archivo.aspx

Código:

<asp:GridView  ID="GridView1" ... OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
    <asp:TemplateField HeaderText="Elegir">
        <ItemTemplate>
            <asp:ImageButton ID="Selecc_Regis" runat="server" CommandName="Select" ImageUrl="~/images/fila_a_elegir.gif" Width="16" Height="16" BorderWidth="0" ToolTip="Seleccionar" />
        </ItemTemplate>
    </asp:TemplateField>
</asp:GridView>

Ahora me falta la otra parte de mi pregunta: ¿Cómo cambiar la imagen del ImageButton ó restaurarla cada vez que hago la acción de seleccionar ó deseleccionar?

Y a lo dicho; si hay alguna manera mejor de hacer lo explicado en esta respuesta, espero me lo comuniquen...

[zacktagnan]

Bueno, ya he dado con cómo hacer lo que me faltaba que era lo de cambiar de imagen en el ImageButton cada vez que pincho para seleccionar una fila del GridView.

Este es el código para ello:

archivo.aspx

Código:

<asp:GridView  ID="GridView1" ... OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
    <asp:TemplateField HeaderText="Elegir">
        <ItemTemplate>
            <asp:ImageButton ID="Selecc_Regis" runat="server" OnCommand="cambio_al_elegir" CommandName="Select" ImageUrl="~/images/fila_a_elegir.gif" Width="16" Height="16" BorderWidth="0" ToolTip="Seleccionar" />
        </ItemTemplate>
    </asp:TemplateField>
</asp:GridView>

archivo.aspx.cs

Código:

protected void cambio_al_elegir(object sender, CommandEventArgs e)
{
        ImageButton el_img_btn = (ImageButton)sender;
        if (el_img_btn.ImageUrl == "~/images/ico_selecc.png")
        {
                el_img_btn.ImageUrl = "~/images/fila_a_elegir.gif";
                el_img_btn.ToolTip = "Seleccionar";
        }
        else
        {
                el_img_btn.ImageUrl = "~/images/fila_elegida.gif";
                el_img_btn.ToolTip = "Deseleccionar";
        }
}

Pues eso, para quién le pueda servir...

[zacktagnan]

Siguiendo con el tema del ImageButton que sirve para seleccionar la fila deseada del GridView...

Decir, antes de nada, que tengo un DetailView enlazado al GridView, que muestra los datos de la fila elegida. Y que la primera vez que se abre la página, al no haberse elegido fila alguna muestra el texto expresado en su propiedad EmptyDataText

Como ya dije, cuando se selecciona, se cambia la imagen a una que indica que es una fila seleccionada, también cambia el color de fondo de la fila según el color definido en el atributo del GridView [SelectedRowStyle BackColor="#FFFFC0"], y por último se visualiza un DetailView según el índice clave de dicha fila elegida.

Lo que quisiera hacer ahora es, al pulsar la fila seleccionada, al tiempo que se intercambia la imagen del ImageButton para indicar que la fila ha sido deseleccionada (... el_img_btn.ImageUrl = "~/images/fila_a_elegir.gif"; el_img_btn.ToolTip = "Seleccionar"; ...), se deseleccione la fila y por tanto que el DataView vuelva al estado cuando su origen de datos no devuelve registros lo que hace que se muestre el texto de la propiedad EmptyDataText del DetailView.

He probado para esto a poner lo siguiente dentro del if indicado en el mensaje anterior,

Código:

                el_img_btn.ImageUrl = "~/images/fila_a_elegir.gif";
                el_img_btn.ToolTip = "Seleccionar";
                GridView1.SelectedIndex = -1; 

pero ni me deselecciona la fila, ni me deja de mostrar el DetailView.

Esta forma de deseleccionar la fila si me funciona dentro de las funciones de los eventos PageIndexChanged y SelectedIndexChanged del GridView pero no aquí...

Y por último si tengo seleccionada una fila a través del click en el mencionado ImageButton, y voy y elijo otra fila, al tiempo que se intercambia la imagen de la nueva fila elegida a "ico_selecc.png", la imagen de la fila anterior se restaure a la imagen "fila_a_elegir.gif".