|
Neste artigo apresentarei uma forma de inserção de registros diretamente no DataGrid. Sendo assim, não haverá a necessidade da criação de um Formulário à parte para a manipulação do cadastro em questão. Como Fonte de Dados, estarei utilizando DataTable + Session para simular uma DataBase.
Toda a idéia estará em adicionar os controles de inserção (TextBox por exemplo) no FooterTemplate do DataGrid. Lembrando também que as colunas devem ser do tipo TemplateColumn, para que seja possível customizarmos o DataGrid.
Depois de adicionado o DataGrid em seu WebForm, deverá criar as TemplateColumns e em seguida marcar a opção ShowFooter no Property Builder, que por padrão vem desmarcada.
 |
| Figura 1 - Criando as TemplateColumns. |
 |
| Figura 2 - Marque a opção "Show Footer" para que seja possível visualizá-lo. Por padrão ele é desabilitado. |
Depois das TemplateColumns definidas, você deverá inserir os controles no DataGrid. Clique com o botão direito em cima do mesmo, e edite a primeira coluna (Edit Template), incluindo um TextBox dentro da seção FooterTemplate e um Label dentro da seção Item. Repita o mesmo processo para a Coluna 2.
Somente na última coluna os controles são diferentes. Teremos que definir aqui os botões que irão adicionar e excluir Items da DataGrid/DataTable.
 |
| Figura 3 - Adicione os controles TextBox necessários para a inserção. |
 |
| Figura 4 - Botões responsáveis por executar as ações de Inserção e Deleção. |
Importante: Tanto para o botão de Inserção quanto Deleção é necessário definir a propriedade CommandName. Ela é responsável por qual evento será tratado o evento Click deste botão. Para o botão "+" (Adicionar) defina a propriedade CommandName para "Inserir". Já para o botão "X" (Excluir), defina como "Delete".
Depois do design desenvolvido, devemos começar a codificá-lo. Como já foi mencionado, estará sendo utilizado Session em conjunto com uma DataTable para armazenar os valores, simulando a Base de Dados. Inicialmente teremos uma função que será responsável por "carregar" o DataGrid e a Session com o valores.
Esta função verificará se a variável de sessão está ou não vazia. Caso esteja, um novo DataTable é gerado, populado e armazenado nessa variável de sessão. Depois disso, atribui-se essa variável de sessão à propriedade DataSource do DataGrid.
Abaixo o código para uma simples carga:
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 8 |
| 9 |
| 10 |
| 11 |
| 12 |
| 13 |
| 14 |
| 15 |
| 16 |
| 17 |
| 18 |
| 19 |
| 20 |
| 21 |
| 22 |
| 23 |
|
|
| Private Sub CarregaGrid() |
| If (Session("Dados") Is Nothing) Then |
| Dim dt As DataTable |
| Dim dr As DataRow |
| Dim i As Integer |
|
| dt = New DataTable() |
| dt.Columns.Add(New DataColumn("Coluna 1", GetType(String))) |
| dt.Columns.Add(New DataColumn("Coluna 2", GetType(String))) |
|
| For i = 0 To 5 |
| dr = dt.NewRow() |
| dr(0) = "Item " + i.ToString() |
| dr(1) = "Item " + i.ToString() |
| dt.Rows.Add(dr) |
| Next |
| Session("Dados") = dt |
| With Me.DataGrid1 |
| .DataSource = New DataView(Session("Dados")) |
| .DataBind() |
| End With |
| End If |
| End Sub |
|
|
|
Código 1 - Função para Carregar o DataGrid.
|
Como vemos no código acima, criamos uma DataTable para popularmos o DataGrid. Armazenamos o mesmo em uma variável de sessão para termos a impressão de persistência, pois não utilizamos um Banco de Dados. Função que sempre será invocada a cada inserção ou deleção de registros, para popular novamente o DataGrid com o resultado atual. Temos também que chamá-la no evento Page_Load de nosso WebForm:
|
|
|
| Private Sub Page_Load(ByVal sender As System.Object, _ |
| ByVal e As System.EventArgs) Handles MyBase.Load |
|
| If Not Page.IsPostBack Then |
| Call Me.CarregaGrid() |
| End If |
| End Sub |
|
|
|
Código 2 - Populando o DataGrid no Evento Page_Load do WebForm.
|
Como utilizamos as TemplateColumns, teremos que atribuir à propriedade Text do Label os campos que desejamos exibir. Isso faremos através do HTML, inserindo as tags de Binding:
|
|
|
| <asp:Label id="Label1" runat="server"> |
| <%# DataBinder.Eval(Container.DataItem, "Coluna 1")%> |
| </asp:Label> |
|
| <asp:Label id="Label2" runat="server"> |
| <%# DataBinder.Eval(Container.DataItem, "Coluna 2")%> |
| </asp:Label> |
|
|
|
Código 3 - Atribuindo os valores para exibição no Label.
|
Depois de todos estes passos, ao executarmos o sistema, teremos o seguinte resultado:
 |
| Figura 5 - DataGrid Populado no Evento Page_Load do WebForm. |
Agora teremos que codificar as ações dos botões de inserção e exclusão. Primeiramente codificaremos o botão para exclusão de registros. Como definimos anteriormente a propriedade CommandName do Button para "Delete", ele executará o evento DeleteCommand do DataGrid. Com isso, selecionamos o evento no Code Editor e o codificamos. Abaixo o código para a exclusão de registros na íntegra:
|
|
|
| Private Sub DataGrid1_DeleteCommand(ByVal source As System.Object, _ |
| ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _ |
| Handles DataGrid1.DeleteCommand |
|
| DirectCast(Session("Dados"), DataTable).Rows.RemoveAt(e.Item.ItemIndex) |
| Call Me.CarregaGrid() |
| End Sub |
|
|
|
Código 4 - Excluindo um registro da DataTable.
|
Como vimos, no evento DeleteCommand do DataGrid, pegamos a variável de sessão que contém nossa DataTable e através do método RemoveAt da propriedade Rows, passamos o índice da linha que vem como argumento no parâmetro do procedimento DeleteCommand e em seguida, invocamos o método CarregaGrid() para popularmos novamente o DataGrid com os valores atualizados.
Devemos agora atribuirmos o código para o evento Click do botão adicionar do DataGrid. Nesse caso, devemos utilizar o evento ItemCommand do DataGrid, qual é disparado sempre que um comando é executado dentro do DataGrid. Vejamos o código à seguir:
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 8 |
| 9 |
| 10 |
| 11 |
| 12 |
| 13 |
|
|
| Private Sub DataGrid1_ItemCommand(ByVal source As System.Object, _ |
| ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _ |
| Handles DataGrid1.ItemCommand |
|
| If e.CommandName = "Inserir" Then |
| Dim dr As DataRow |
| dr = DirectCast(Session("Dados"), DataTable).NewRow() |
| dr(0) = DirectCast(e.Item.FindControl("TextBox1"), TextBox).Text |
| dr(1) = DirectCast(e.Item.FindControl("TextBox2"), TextBox).Text |
| DirectCast(Session("Dados"), DataTable).Rows.Add(dr) |
| Call Me.CarregaGrid() |
| End If |
| End Sub |
|
|
|
Código 5 - Adicionando um registro na DataTable.
|
Como vemos, há uma verificação condicional para sabermos se o tipo de comando à ser executado é de inserção (Inserir). Através da propriedade CommandName que vem como parâmetro no procedimento, conseguimos saber qual tipo de ação executar e com isso, criamos uma nova DataRow e inserimos na coleção de linhas do DataTable e novamente chamamos a função CarregaGrid() para atualizar os valores no DataGrid.
CONCLUSÃO: Como vimos neste artigo, podemos customizar o DataGrid de acordo com a nossa necessidade. Além das funções por ele disponibilizadas, como Edição de registros, podemos também fazer com que ele cadastre, desde que não seja um cadastro que contenha muitos campos, que além de confuso, o layout não seria dos mais agradáveis, e por isso, um formulário separado seria mais viável.
|
