Skip to content

Usar iconos de jquery-ui como botones para editar/eliminar en una ASP.NET Gridview

by en 30 marzo, 2012

Jquery-ui nos da un set de iconos que podríamos querer utilizar en variadas ocasiones a lo largo del desarrollo de nuestros sitios web. Los iconos que nos da JQuery-ui funcionan como un sprite. Se pueden añadir utilizando las etiquetas <span> y <a> entre otros.

Sprite de iconos de jquery-ui

Para utilizar un icono de jQuery-ui simplemente debemos añadir la clase “ui-icon” y la clase “ui-icon-<nombre_icono>” al <span> o <a>.

En un ASP.NET GridView se puede agregar el la clase CSS a los linkButton que generan los eventos de update/delete, para esto debemos agregar un evento al RowDataBound:

protected void gvContactos_RowDataBound(object sender, GridViewRowEventArgs e)
{

if (e.Row.RowType == DataControlRowType.DataRow)
{
List<LinkButton> linkButtons = e.Row.Cells[e.Row.Cells.Count - 1].Controls.OfType<LinkButton>().ToList();
            // En mi caso tengo los edit/update en la última columna de la tabla, por eso el e.Row.Cells.Count - 1
foreach (LinkButton link in linkButtons)
{
if (link.Text.Equals("E")) //Texto que le tengo definido al botón editar
{
link.CssClass = "ui-icon ui-icon-pencil";
link.Attributes.Add("title", "Editar");
link.Style.Add("float", "left");
}
else if (link.Text.Equals("X")) //Texto que le tengo definido al botón eliminar
{
link.Attributes.Add("onclick", "javascript:return " +

"confirm('¿Está seguro que desea eliminar al contacto " +

DataBinder.Eval(e.Row.DataItem, "Nombre") + "?')");
link.CssClass = "ui-icon ui-icon-trash";
link.Style.Add("float", "left");
link.Attributes.Add("title", "Eliminar");
}
else if (link.Text.Equals("C")) //Texto que le tengo definido al botón cerrar
{
link.CssClass = "ui-icon ui-icon-close";
link.Style.Add("float", "left");
link.Attributes.Add("title", "Cancelar");
}
else if (link.Text.Equals("U")) //Texto que le tengo definido al botón cancelar
{
link.CssClass = "ui-icon ui-icon-disk";
link.Style.Add("float", "left");
link.Attributes.Add("title", "Guardar");
}
}
}
}

Como resultado queda muy bien.

(Ojo que la imagen tiene además funcionando el plugin tablesorter 2.0 de jquery. ¡¡Solo fijense en los botones!!

Links:
jQuery: http://jquery.com/
jQuery-ui: http://jqueryui.com
jQuery-tablesorter: http://tablesorter.com/docs/

2 comentarios
  1. se puede usar este código para aplicaciones de escritorio usando C#

    • Hola informaticaedusite, no, no se puede usar en aplicaciones de escritorio, ya que este código lo que hace es usar clases CSS para dar estilo a los botones. En desktop no tienes esta capacidad.

      Saludos

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: