Funciones básica de un DataTable

Ahora lo que veremos será aprender a utilizar las funciones básicas de un DataTable, veremos como declarar un DataTable, agregar registros, eliminar registros, actualizar registros, entre otras opciones.

La mayoría de las sentencias no difieren entre C# y VB.NET (a excepción que en C# todas las sentencias terminan con punto y coma), por lo que si no aparece la marcación de C# ó VB.NET implica que funciona igual en ambos lenguajes.

Declaración de un DataTable

La creación de un DataTable se hace con la siguiente sentencia:

C#

DataTable DT = new DataTable();

VB

Dim DT As New DataTable()

Agregar columnas a un DataTable

Para agregar columnas a un Datatable se hace de la siguiente manera:

DT.Columns.Add([NOMBRE_COLUMNA], [TIPO_DATO])

Por ejemplo:

DT.Columns.Add("Clave", Type.GetType("System.String"))

Algunos de los tipos de datos que puede tener una columna de un DataTable: String, Int16, Int32, Int64, Byte, DateTime, etc.

También, debo recalcar que el tipo de dato deberá ingresarse correctamente, es decir, tomando en cuenta las letras que son minúsculas y las que son mayúsculas, ya que si intentas poner por ejemplo: system.datetime el sistema te marcara error, por lo que lo correcto es hacer esto: System.DateTime.

Agregar registros a un DataTable

Agregar registros a un DataTable es relativamente fácil, solo se deben poner los valores separados por una coma, tal como se muestra a continuación:

DT.Rows.Add([VALOR1], [VALOR2], […], [VALORN])

Por ejemplo:

DT.Rows.Add(6, "Sánchez", "811-489-99-01")

Eliminar registros de un DataTable

Para eliminar un registro de un DataTable, solo hay que indicarle que registro es el que queremos eliminar.

DT.Rows.RemoveAt([NÚMERO_FILA])

Por ejemplo:

DT.Rows.RemoveAt(4)

Actualizar registros de un DataTable

Para actualizar un registro hay que indicarle la columna y el renglón que queremos actualizar. 

DT.Rows[[NÚMERO_FILA]][[NÚMERO_COLUMNA]] = [VALOR]

VB

DT.Rows([NÚMERO_FILA])([NÚMERO_COLUMNA]) = [VALOR]

Por ejemplo:

DT.Rows(1)(3) = 4;

Si conocemos el nombre de la columna, también podemos usar el nombre de la columna en lugar del número, por ejemplo:

DT.Rows[3][“Nombre”] = “Maldonado”

Seleccionar registros de un GridView

La última opción que nos falta por agregar a nuestro GridView es la opción de seleccionar registros.

Para ello tendremos que agregar una columna más al GridView, la columna será tipo TemplateField

<asp:TemplateField>

    <ControlStyle Width="15px" Height="15px" />

    <ItemTemplate>

        <table cellpadding="0px" cellspacing="0px" width="100%">

            <tr>

                <td>

                    <asp:ImageButton ID="btnSeleccionar" runat="server"

                        ImageUrl="~/Imagenes/Seleccionar.ico"

                        CommandName="Select"

                        />

                </td>

            </tr>

        </table>

    </ItemTemplate>

</asp:TemplateField>

También le colocaremos un formato especial para las filas que estén seleccionadas, haremos que se pinten de color amarillo los registros que vayamos seleccionado.

<SelectedRowStyle BackColor="Yellow" Font-Bold="true" />

Para el caso de C# le tenemos que decir al GridView que funcion debe ejecutar al presionar el boton de Seleccionar.

OnSelectedIndexChanging="dgvListado_RowSelectedIndexChanging"

Por último, le decimos que seleccione el registro.

C#

protected void dgvListado_RowSelectedIndexChanging(object sender, GridViewSelectEventArgs e)

{

    //Seleccionamos la fila

    dgvListado.SelectedIndex = e.NewSelectedIndex;

    //Desplegamos la información

    Desplegar();

}

VB NET

Private Sub dgvListado_SelectedIndexChanging(...) Handles dgvListado.SelectedIndexChanging
    'Seleccionamos la fila
    dgvListado.SelectedIndex = e.NewSelectedIndex

    'Desplegamos la información
    Call Desplegar()
End Sub

Por ahora nuestro código no hace nada en especial, únicamente selecciona el registro que deseemos, posteriormente le podemos decir que haga algo más, pero eso lo veremos más adelante.

ne...

Formateando nuestro GridView

Ahora vamos a ponerle diseño a nuestro GridView.
Las filas de nuestro GridView serán de color Gris y las filas alternas serán de color Gris oscuro, el encabezado lo dejaremos en color Negro.
Para ello agregaremos las siguientes tres líneas al código de nuestro GridView.
<RowStyle BackColor="Gray" />
<AlternatingRowStyle BackColor="DarkGray" />
<HeaderStyle BackColor="Black" ForeColor="White" />
Nuestro GridView quedaría de la siguiente manera:

Modificando nuestro GridView

Ahora vamos a realizar algunos cambios a nuestro grid para tener un mejor control sobre sus columnas.

Primero quitaremos la propiedad que genera automáticamente las columnas de nuestro GridView esto para poder cambiar el ancho de nuestras columnas.

Después cambiaremos nuestros CommandFields por TemplateFields, que el funcionamiento es idéntico pero con esta propiedad podremos manipular de mejor manera nuestros botones.

Entonces, nuestro GridView quedará de la siguiente manera.

<asp:GridView ID="dgvListado" runat="server"

    OnRowEditing="dgvListado_RowEditing"
    OnRowUpdating="dgvListado_RowUpdating"
    OnRowCancelingEdit="dgvListado_RowCancelingEdit"
    OnRowDeleting="dgvListado_RowDeleting"                      
    AutoGenerateColumns="false">      
    <%--  AutoGenerateColumns. Quitamos la opción de que el GridView nos genere las columnas --%>
    <Columns>
        <asp:TemplateField>
            <%--  Columna editar --%>
            <ControlStyle Width="15px" Height="15px" />
            <ItemTemplate>
                <asp:ImageButton ID="btnEditar"
                    CommandName="Edit"
                    ImageUrl="~/Imagenes/Editar.ICO"
                    runat="server" />
            </ItemTemplate>
            <EditItemTemplate>
                <asp:ImageButton ID="btnActualizar"
                    CommandName="Update"
                    ImageUrl="~/Imagenes/Actualizar.ICO"
                    runat="server" />
                <asp:ImageButton ID="btnCancelar"
                    CommandName="Cancel"
                    ImageUrl="~/Imagenes/Cancelar.ico"
                    runat="server" />
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField >
            <%--  Columna eliminar --%>
            <ControlStyle Width="15px" Height="15px" />
            <ItemTemplate>
                <asp:ImageButton ID="btnEliminar"
                    CommandName="Delete"
                    ImageUrl="~/Imagenes/Eliminar.ico"
                    runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField HeaderText="Clave" DataField="Clave" ItemStyle-Width="100px" ReadOnly="true" />
        <asp:BoundField HeaderText="Nombre" DataField="Nombre" ItemStyle-Width="250px" />
        <asp:BoundField HeaderText="Teléfono" DataField="Telefono" ItemStyle-Width="150px" />
    </Columns>
</asp:GridView>


Si están trabajando en visual basic .NET, deben eliminar las siguientes líneas:

OnRowEditing="dgvListado_RowEditing"
OnRowUpdating="dgvListado_RowUpdating"
OnRowCancelingEdit="dgvListado_RowCancelingEdit"
OnRowDeleting="dgvListado_RowDeleting"

Agregar imágenes a los CommandFields

Ahora bien, si lo que queremos es que nos salga una imagen en lugar de una leyenda tendremos que hacer lo siguiente.

En mi caso, voy a agregar una carpeta llamada Imagenes dentro de mi proyecto, y en esa carpeta voy a agregar cuatro imágenes: Actualizar.ico, Cancelar.ico, Editar.ico y Eliminar.ico

Entonces, para asignarle la imagen correspondiente a cada CommandField lo haremos desde codigo de la siguiente manera:

VB NET

Private Sub ImageCommandFields()

'Editar

Dim oEditColumn As CommandField = dgvListado.Columns(0)

oEditColumn.ButtonType = System.Web.UI.WebControls.ButtonType.Image

oEditColumn.EditImageUrl = "~/Imagenes/Editar.ico"

oEditColumn.CancelImageUrl = "~/Imagenes/Cancelar.ico"

oEditColumn.UpdateImageUrl = "~/Imagenes/Actualizar.ico"

'Eliminar

Dim oDeleteColumn As CommandField = dgvListado.Columns(1)

oDeleteColumn.ButtonType = System.Web.UI.WebControls.ButtonType.Image

oDeleteColumn.DeleteImageUrl = "~/Imagenes/Eliminar.ico"

End Sub

C#

private void ImageCommandFields()

{

//Editar

CommandField oEditColumn = (CommandField) dgvListado.Columns[0];

oEditColumn.ButtonType = System.Web.UI.WebControls.ButtonType.Image;

oEditColumn.EditImageUrl = "~/Imagenes/Editar.ico";

oEditColumn.CancelImageUrl = "~/Imagenes/Cancelar.ico";

oEditColumn.UpdateImageUrl = "~/Imagenes/Actualizar.ico";

//Eliminar

CommandField oDeleteColumn = (CommandField)dgvListado.Columns[1];

oDeleteColumn.ButtonType = System.Web.UI.WebControls.ButtonType.Image;

oDeleteColumn.DeleteImageUrl = "~/Imagenes/Eliminar.ico";

}

NOTA: También es posible asignar las imágenes a los CommandField desde la pantalla de diseño.