Usando o Radio Button em uma GridView Asp.NET (pt-BR)

Usando o Radio Button em uma GridView Asp.NET (pt-BR)



1. Introdução

O intuito deste artigo é apresentar de forma consolidada, vários materiais que consegui na web sobre como utilizar um “Template Field” do tipo RadioButton em um grid do Asp. Net.

Pode parecer simples a utilização deste tipo de controle no grid, porém quando tive que utilizar me deparei com vários problemas e tive grande dificuldade em encontrar em um único lugar a solução para os problemas.  Após a solução, que consegui com a ajuda pricipalmente de pessoas do fórum MSDN, resolvi juntar tudo e compartilhar com todos. Espero que este artigo possa ajudá-los.

2. Criando o Template Field:

 Bom, primeiramente vamos adicionar um TemplateFied do tipo RaddionButton no GridView, conforme mostra o código abaixo:

 

<asp:TemplateField HeaderText="Selecionar">

    <ItemTemplate>

        <asp:RadioButton ID="rdbTeste" runat="server" GroupName="groupTeste" />

    </ItemTemplate>

    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="30px" />

</asp:TemplateField>

 

3. Selecionando um único radio Button na GridView:

Ao rodar este código vamos nos deparar com o primeiro problema:

É possível selecionar mais de uma opção mesmo definindo a propriedade groupName. Isso ocorre devido a geração dinâmica da propriedade name do controle input renderizado em html. Para haver a seleção de uma única opção a propriedade name dos radiobuttons precisam ser a mesma, criando-se um grupo.” (2009, Thiago Rogério).

Abaixo temos um breve tutorial de como fazer a seleção única do radiobutton no controle gridview.

   1. Adicionar a função javascript no código do programa:

function SetUniqueRadioButton(nameregex, current)   
{
   re = new
   RegExp(nameregex);
  
   for(i = 0; i < document.forms[0].elements.length; i++)
   {
      elm = document.forms[0].elements[i]
      if (elm.type == 'radio')
      {
         if (re.test(elm.name))
         {
            elm.checked = false;
         }
      }
   }
  
   current.checked = true;
}

 

   2. Adicionar um template field no gridview com o controle radiobutton:

   <asp:TemplateField HeaderText="Selecionar">
     <ItemTemplate>
                    <asp:RadioButton ID="RadioButton1" runat="server" GroupName="nomeGrupo" />
     </ItemTemplate>
   </asp:TemplateField>

 
   3. No evento RowDataBound do gridview adicionar a função javascript no onclick do radiobutton:

 
  protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
  {   
    RadioButton rdo = (RadioButton)e.Row.FindControl("RadioButton1");
   
    if (rdo == null)
    {
        return;
    }
    string script = "SetUniqueRadioButton('GridView1.*nomeGrupo',this)";
    rdo.Attributes.Add("onclick", script);
  }
 

4. Recuperando o índice da linha selecionado com o radio Button na GridView:

Resolvido o problema da seleção única, vamos nos deparar com outra questão, como obter índice de linha (ou mesmo o valor de um campo) selecionada por RadioButton em uma GridView no ASP.NET.

Segundo Paulo César Viana, “ tem N maneiras de fazer isto. Uma delas é usar o evento do RadioButton. Quando acionado você vai recuperar o controle e depois um objeto GridViewRow, atravês da propriedade Parent. No GridViewRow vai ter o índice (index)”.

Abaixo segue o exemplo enviado pelo mesmo e que resolve a questão:

 

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

Página Aspx:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>Untitled Page</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

   

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">

            <Columns>

                <asp:BoundField DataField="Codigo" HeaderText="Codigo" />

                <asp:BoundField DataField="Nome" HeaderText="País" />

                <asp:TemplateField>

                    <ItemTemplate>

                        <asp:RadioButton ID="rbtAtivo" runat="server" AutoPostBack="true"

                            oncheckedchanged="rbtAtivo_CheckedChanged" Text="Ativo" />

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

        </asp:GridView>

   

    </div>

    <br />

    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

    </form>

</body>

</html>

 

 

Code Behind:

 

using System;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using System.Collections.Generic;

using System.Collections.Specialized;

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

    public class Pais {

        public int Codigo { get; set; }

        public string Nome { get; set; }

    }

    protected void Page_Load(object sender, EventArgs e) {

        if (!IsPostBack) {

            List<Pais> lstPaises = new List<Pais>();

            lstPaises.Add(new Pais() { Codigo = 1, Nome = "Brasil" });

            lstPaises.Add(new Pais() { Codigo = 2, Nome = "Alemanha" });

            lstPaises.Add(new Pais() { Codigo = 3, Nome = "Pais qualquer" });

            GridView1.DataSource = lstPaises;

            GridView1.DataBind();

        }

    }

    protected void rbtAtivo_CheckedChanged(object sender, EventArgs e) {

        RadioButton rbtAtivo = (RadioButton)sender;

        GridViewRow row = (GridViewRow)rbtAtivo.Parent.Parent;

        Label1.Text = string.Format("Index da linha: {0} | Codigo: {1} , País : {2}", row.RowIndex, row.Cells[0].Text, row.Cells[1].Text);

    }

}

 

 

Visualização:

 

 

 

 

 

Tendo isto dá para trabalhar 100% com o RadioButton da GridView.

 

 

 5. Referências:

Thiago Rogério. RadioButton em GridView com seleção única. Disponível em:

<http://www.thiagorogerio.com.br/post/RadioButton-em-GridView-com-selecao-unica.aspx > Acesso em: 27 fev. 2012.

 

Paulo César Viana. Fórum MSDN. Disponível em:

<http://social.msdn.microsoft.com/Forums/pt-BR/504/thread/97ab3902-0a75-4662-bb9d-04711930600f>

 

 

Leave a Comment
  • Please add 4 and 4 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
Sort by: Published Date | Most Recent | Most Useful
Comments
Page 1 of 1 (1 items)
Wikis - Comment List
Sort by: Published Date | Most Recent | Most Useful
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
Comments
  • Fernando Lugão Veltem edited Revision 2. Comment: adicionado toc e tags

Page 1 of 1 (1 items)