Inicio > .NET, ASP.NET, jQuery, Visual Studio 2010 > jQuery con Grids y Checkboxes

jQuery con Grids y Checkboxes

El siguiente ejemplo muestra como hacer grupos de selección dentro de un gridview.

Para esto creo una clase que representara los items del grid (esto lo dejo a consideración de cada quien, también puede llenarse con Datatables y/o otras fuentes de datos.

public class ItemGrid
{
    public int Id { get; set; }
    public string Nombre { get; set; }
    public int GroupKey { get; set; }
}

El CodeBehind de la pagina será el siguiente:

public partial class Default : System.Web.UI.Page
{

    #region [Eventos]
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            cargaGrid();
        }
    }

    #region [Grid]
    protected void cargaGrid(){
        gvServicios.DataSource = GeneraRegistros();
        gvServicios.DataBind();
    }
    #endregion

    #endregion

    #region [Getters]
    public List<ItemGrid> GeneraRegistros()
    {
        List<ItemGrid> listado = new List<ItemGrid>();
        listado.Add(new ItemGrid() { Id = 1, Nombre = "Servicio 1", GroupKey = 1 });
        listado.Add(new ItemGrid() { Id = 2, Nombre = "Otro Servicio", GroupKey = 1 });
        listado.Add(new ItemGrid() { Id = 3, Nombre = "N servicio", GroupKey = 2 });
        listado.Add(new ItemGrid() { Id = 4, Nombre = "R Servicio", GroupKey = 3 });
        listado.Add(new ItemGrid() { Id = 5, Nombre = "segundo de N", GroupKey = 2 });
        listado.Add(new ItemGrid() { Id = 6, Nombre = "tercero de N", GroupKey = 2 });
        listado.Add(new ItemGrid() { Id = 7, Nombre = "R segundo", GroupKey = 3 });
        listado.Add(new ItemGrid() { Id = 8, Nombre = "R tercero", GroupKey = 3 });
        listado.Add(new ItemGrid() { Id = 9, Nombre = "muchos servicios", GroupKey = 1 });
        listado.Add(new ItemGrid() { Id = 10, Nombre = "Decimo Servicio", GroupKey = 1 });

        listado.Add(new ItemGrid() { Id = 11, Nombre = "Decimo Servicio", GroupKey = 1 });
        listado.Add(new ItemGrid() { Id = 12, Nombre = "Otro para el uno", GroupKey = 1 });
        listado.Add(new ItemGrid() { Id = 13, Nombre = "ya son muchos", GroupKey = 2 });
        listado.Add(new ItemGrid() { Id = 14, Nombre = "este es del 2 grupo", GroupKey = 2 });
        listado.Add(new ItemGrid() { Id = 15, Nombre = "Este es el ultimo", GroupKey = 1 });

        return listado;
    }
        
    #endregion
}

 

Ahora veamos el html y scripts

Primero el body:

<asp:GridView ID="gvServicios" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Identificador" />
                <asp:BoundField DataField="Nombre" HeaderText="Servicio" />
                <asp:TemplateField HeaderText="Grupo">
                    <ItemTemplate>
                        <asp:Label ID="lblGroupKey" runat="server" Text='<%# Eval("GroupKey") %>'></asp:Label>
                        <asp:HiddenField ID="IDVal" runat="server" Value='<%# Eval("GroupKey") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:CheckBox ID="chkType" runat="server"  onclick='<%# "SingleSelector(this," + Eval("GroupKey") +")" %>' />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

El valor de GroupKey lo coloco en un hiddenfield, para manipularlo, y en un Label, para que se vea el grupo con el que se trabaja, en otra columna tendremos el check box: chkType, que llama a una función en jscript (SingleSelector) la cual tiene 2 parámetros, el primero es el mismo checkbox que lo llama, y el segundo parámetro es el identificador del grupo.

En el header tendremos la importación de jQuery, así como nuestra función de agrupamiento

<head runat="server">
    <title></title>
    <script src="Scripts/jQuery1.7.2.js" type="text/javascript"></script>
    <script type="text/jscript">
        
        function SingleSelector(chk, group) {
            var count = 0;
            //Recorrer todos los elementos del grid
            $('#gvServicios tr').each(function () {
                //Obtener el id del grupo seleccionado
                var vargrupo = $(this).find("input[id*='IDVal']").val();
                var selec = $(this).find("input[id*='chkType']");

                if (group == vargrupo) {
                    if (chk.name != selec.attr("name")) {
                        selec.attr("disabled", chk.checked == true ? true : false);
                        count++;
                    }
                }
            });
        }
    </script>
</head>

Lo primero que hace esta función es recorrer todos los elementos del grid, luego obtenemos el grupo que tiene ese renglón, y el check asociado a ese grupo. Lo siguiente a realizar es la comparativa del grupo, si son iguales, revisamos que sean diferentes el checkbox que se paso en la función, y el checkbox del renglón en el que nos encontramos, esto es para que el elemento que se esta seleccionado siempre este habilitado. Luego se establece para todos los elementos que no son el seleccionado y que pertenecen al grupo, como deshabilitados, si el checkbox que se paso en la función esta checkado.

Perdón si no es tan clara la redacción, pero a veces es mejor verlo en funcionamiento.

Gridj

Como se puede apreciar en la imagen, solo nos permitirá seleccionar un elemento del grupo a la vez.

 

Espero que les sea de utilidad.

  1. Aún no hay comentarios.
  1. No trackbacks yet.

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: