ASP.NET 2.0: Selecionando múltiplos registros no Gridview com Checkbox

O Gridview é o novo controle do ASP.NET 2.0 que substituiu o DataGrid do .NET Framework 1.1. Nesse novo controle temos várias funcionalidades por padrão tais como ordenação, paginação e seleção de itens.

por Rodrigo Kono

O Gridview é o novo controle do ASP.NET 2.0 que substituiu o DataGrid do .NET Framework 1.1. Nesse novo controle temos várias funcionalidades por padrão tais como ordenação, paginação e seleção de itens.

Ao habilitar a seleção de registros (enable selection) no controle Gridview é possível selecionar um registro e trabalhar com os dados desse registro. Mas essa funcionalidade não nos permite selecionar vários registros ao mesmo tempo para uma determinada operação.

Neste artigo demonstro como podemos contornar essa situação utilizando checkbox.

O gridView tem uma coluna chamada CheckboxField que mapeia o checkbox para um determinado campo do banco de dados. Nesse artigo não iremos usar dessa forma, nós iremos usar o checkbox em uma template column.

Simplesmente adicionaremos um controle asp:checkbox no ItemTemplate do GridView.

Vamos à prática!

Insira um Gridview na sua página.

Clique na SmartTag () do controle, selecione a combo para configurar o datasource e escolha “<..new data source>”.

Nesse artigo iremos utilizar o banco de dados Northwind.mdb.

Utilize a tabela Employees e selecione alguns campos.

Obs.: Não esqueça de incluir o ID que é a chave primária dessa tabela. É o ID que te ajuda a trabalhar com os dados do registros nesse caso.

Após a criação do DataSource o nosso gridview é remodelado. Selecione a smartTag e habilite a paginação, sorteio e seleção.

Vá no Source e edite o aspx.

Dentro da tag <Columns> vamor insirir uma TemplateField que irá compor a nossa última coluna do grid e conterá os checkboxes. Dentro da tag TemplateField adicionamos o <ItemTemplate> e dentro dele colocamos o controle asp:CheckBox. Ainda dentro do TemplateField informamos o <HeaderTemplate>, insirimos um html control do tipo checkbox e no onClick referenciamos a nossa função que seleciona todos os registros. Veja como fica no código abaixo:

<asp:TemplateField HeaderText="Select">

<ItemTemplate>

<asp:CheckBox ID="chkSelect" runat="server" />

</ItemTemplate>

<HeaderTemplate>

<input id="chkAll" onclick="javascript:SelecionaTodosChecks(this);" runat="server" type="checkbox" />

</HeaderTemplate>

</asp:TemplateField>

Com o código acima o gridview ficará da seguinte forma:

Não teve como fugir do javaScript. Olha ele ai novamente. Vamos escrever uma função que percorre todo o form em busca dos checkboxes do gridview e marca todos.

<script language=javascript>

function SelecionaTodosChecks(spanChk){

var oItem = spanChk.children;

var theBox= (spanChk.type=="checkbox") ?

spanChk : spanChk.children.item[0];

xState=theBox.checked;

elm=theBox.form.elements;

for(i=0;i<elm.length;i++)

if(elm[i].type=="checkbox" &&

elm[i].id!=theBox.id)

{

if(elm[i].checked!=xState)

elm[i].click();

}

}

</script>

Vamos inserir na página um button (btnCheck) e um label (lblInfo).

No evento click do botão adicione:

Protected Sub btnCheck_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnCheck.Click

"cria e instancia uma variável do tipo StrinfBuilder para concatenar os registros

Dim str As StringBuilder = New StringBuilder

Dim i As Integer = 0

"Laço que percorre todas as linhas do grid

While i < GridView1.Rows.Count

"Variável do tipo GridViewRow recebe a linha específica do GridView

Dim row As GridViewRow = GridView1.Rows(i)

"A variável booleana recebe true se o checkbox desse registro estiver marcado

Dim isChecked As Boolean = CType(row.FindControl("chkSelect"), CheckBox).Checked

If isChecked Then

str.Append(GridView1.Rows(i).Cells(1).Text)

str.Append(",")

End If
i += 1

End While

lblInfo.Text = str.ToString

End Sub

O resultado final é visto abaixo.

No label aparece o ID dos registros selecionados. Nesse caso mostrei-os no label, mas em uma aplicação real esses dados poderiam fazer muito mais após esse passo. Mas o importante é saber como obter determinados registros do gridview.

EXTRA:
Para que ao selecionar o registro e a linha do grid mude de cor adicione um evento no handler no grid. No Code vamos utilizar o RowDataBound para a ação.

Insira o código abaixo:

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

If e.Row.RowType = DataControlRowType.DataRow Then

Dim Chk As CheckBox = e.Row.FindControl("chkSelect")

Page.ClientScript.RegisterStartupScript(Me.GetType(), "ScriptChk", "CorLinhaSelecionada", True)

Chk.Attributes.Add("onClick", "CorLinhaSelecionada(this,"" + Convert.ToString(e.Row.RowState) + "" );") "4

End If

End Sub

Dentro da tag <script> existente, informe a outra função para controle das cores do grid.

function CorLinhaSelecionada(corChk, RowState){

if (corChk.checked)

corChk.parentElement.parentElement.style.backgroundColor="#ffaa63";

else {

if (RowState=="0")

corChk.parentElement.parentElement.style.backgroundColor="#fffbd6";

else

corChk.parentElement.parentElement.style.backgroundColor="#ffffff";

}

}

O resultado se encontra abaixo:

Conclusão
O gridview é um controle muito bom e que esconde alguns segredos como esse mostrado no artigo. Espero poder falar mais desse controle em outra ocasião e também espero que tenha sido útil para você que leu até o final!

Abraço e até a próxima.

Rodrigo Kono