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 int Id { get; set; }
public string Nombre { get; set; }
public int GroupKey { get; set; }
}
El CodeBehind de la pagina será el siguiente:
{
#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:
<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
<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.
Como se puede apreciar en la imagen, solo nos permitirá seleccionar un elemento del grupo a la vez.
Espero que les sea de utilidad.
