GridView Editable en ASP.Net y C#

ASP.Net, Agregando un DropdonwList o ComboBox a un GridView Editable.

En esta ocasión vamos a ver como se agrega un componente DropdownList  a un GridView editable, ya que en algunas ocasiones tenemos la necesidad de desplegar una lista de opciones en el renglón del gridview con el que estamos trabajando o editando, para ello partiremos del ejemplo que previamente hemos creado y que lleva por nombre: GridView Editable en ASP.Net y C#, en donde trabajamos enteramente con el GridView editable.

Iniciamos del trabajo anterior: http://practicando-asp-net.blogspot.mx/2015/12/gridview-editable-en-aspnet-y-c.html

Lo que se pretende realizar, es mostrar un DropDownList en una nueva columna con todas las marcas de vehículos disponibles, para ello necesitamos agregar una columna de tipo TempletField donde colocaremos nuestro DropDownList, para ello damos clic sobre la Etiqueta Inteligente o Smart Tag ubicada en la parte superior derecha de nuestro gridview, tal como se muestra en la siguiente imagen:

Donde debemos seleccionar la opción Editar Columnas, de la pantalla emergente, seleccionar :

1:- TemplateField de la lista de campos disponibles

2:- Boton Agregar

3:- Propiedad HeaderText, cambiar el nombre del encabezado

4:- Botón Aceptar para finalizar.

Hasta este punto nuestro GridView debe quedar de la siguiente manera:

Lo siguiente consiste en agregar un componente DropDownList en la columna que acabamos de insertar a nuestro GridView, para ello, hacemos clic sobre la etiqueta inteligente o Smart Tag de nuestro GridView y seleccionamos la opción Editar Plantillas:

Posteriormente, seleccionar la opción Item Template del cuadro Tareas de GridView:

Seguidamente agregar un componente DropDownList del cuadro de herramientas al cual le asignaremos el nombre o ID de ddlMarca.

Al terminar de realizar lo antes indicado, bastará con hacer clic sobre la opción Terminar Edición de Plantillas, del cuadro Tareas de Grid View.

Hasta el momento nuestro gridview se debe visualizar como la siguiente imagen:

Lo siguiente consiste en crear una función o método el cual nos llene el DropDownList que acabamos de agregar a nuestro GridView, para ello agregamos el siguiente código:

    //Esta función o Método llena un DropDownList pasado como parametro

    public void LLenaCombo(DropDownList Combo)

    {

        //Se asigna la cadena de conexión

        Conexion.ConnectionString = Met.RetornaConexion;

        //Se abre la conexión

        Conexion.Open();

        //Se asigna la conexión al comando

        Comando.Connection = Conexion;

        //Se crea una instancia de un dataadapter para ejecutar la instruccion SQL

        OdbcDataAdapter Adaptador = new OdbcDataAdapter();

        //Se crea una instancia de dataset para almacenar los datos de la consulta SQL

        DataSet ds = new DataSet();

        //Se borra el comando de parametros basura

        Comando.Parameters.Clear();

        //Se indica la insteruccion SQL a ejecutar

        Comando.CommandText = "SELECT DISTINCT id, Marca FROM Vehiculo";

        //Se indica al adaptador la instruccion SQL a ejecutar a traves del comando

        Adaptador.SelectCommand = Comando;

        //Se ejecuta la llamada y se llena el dataset

        Adaptador.Fill(ds);

        //Se configuran las porpiedades del DropDownList para indicarle que texto mostrar y que valor almacenar

        Combo.DataValueField = "Id";

        Combo.DataTextField = "Marca";

        //Se inidica al DropDownList el oreigen de datos a usar

        Combo.DataSource = ds;

        //Se enlaza con el origen de datos

        Combo.DataBind();

        //Se cierra la conexión

        Conexion.Close();

    }

Lo siguiente consiste en agregar el siguiente código dentro del evento RowEditing de nuestro GridView.

    //Evento que controla el inicio de la edición.

    protected void gvVehiculo_RowEditing(object sender, GridViewEditEventArgs e)

    {

        //Se indica que el componente entra en modo de edicion indicando el indice de la fila seleccionada

        gvVehiculo.EditIndex = e.NewEditIndex;       

        //Complementariamente, se recargan los datos del componente para que al momento de entrar en modo de edicion se visualicen los datos de la fila seleccionada

        gvVehiculo.DataSource = Page.Session["ds"];

        //Se enlaza con el origen de datos inidicado anteriormente el cual se alaceno en una variable de sesion.

        gvVehiculo.DataBind();

        //Se crea una instancia de tipo DropDownList o combo dependiendo el renglon a editar, para ello se busca dentro del renglo a el DropDownList por su Nombre o ID

        DropDownList Combo = gvVehiculo.Rows[e.NewEditIndex].FindControl("ddlMarca") as DropDownList;

        //Se crea un objeto dataset con el cual se obtendra el valor actual del combo

        DataSet ds = new DataSet();

        //Se enlaza el dataset con el objeto dataset almacenado el variable de sesion creada en la función LlenaTabla.

        ds = (DataSet)Page.Session["ds"];

        //Se obtiene el valor indicado por el renglon que se desea editar y la columna que contiene el valor del combo.

        string Valor = ds.Tables[0].Rows[e.NewEditIndex][1].ToString();

        //Se verifica que se haya creado correctamente la instancia del combo o dropdownlist

        if (Combo != null)

        {

            //Se llena el combo con ayuda de la funcion LlenaCombo

            LLenaCombo(Combo);

        }

        //Una vez que se lleno el combo, se busca el valor para resaltarlo en el combo o dropdownlist

        for (int i = 0; i < Combo.Items.Count; i++)

        {

            //Se recorre uno a uno los elements del combo hasta obtener el elemento buscado

            if (Combo.Items[i].Text == Valor)

            {

                //Si se encuentre se selecciona o resalta

                Combo.SelectedIndex = i;

            }

        }

    }

Por lo que al momento de seleccionar la opción Editar, nuestro combo se debe de llenar, resaltando la opción que contiene la fila que se encuentra en Edición.

Para que el valor seleccionado por el usuario se almacene o guarde en nuestra base de datos, debemos realizar lo siguiente dentro del evento RowUpdating de nuestro GridView.

    protected void gvVehiculo_RowUpdating(object sender, GridViewUpdateEventArgs e)

    {

        //Manejo de errores

        try

        {

            //Asignamos la cadena de conexion al objeto ODBCConexion

            Conexion.ConnectionString = Met.RetornaConexion;

            //Se indica al comando la conexion que utilizara

            Comando.Connection = Conexion;

            //Abrimos la conexion

            Conexion.Open();

            //Asignar los valores proporcionados por el usuario a los parametros

            //Los valores se encontraran almacenados en la variable e que controla el evento de edicion, recordar que los elementos se enumeran desde 0 a n -1

            pId.Value = e.NewValues[0].ToString();

           

            //Para obtener el elemento seleccionado de la lista desplegable o DropDownList, bastrá con hacer lo siguiente, crear una instancia del DropDownList con referencia del renglon seleccionado para edicion.

            DropDownList ddlcMarca = gvVehiculo.Rows[e.RowIndex].FindControl("ddlMarca") as DropDownList;

            //Obtener el valor del elemento seleccionado y asignarlo al parametro que ira a la Base de Datos.

            pMarca.Value = ddlcMarca.SelectedItem.Text;

            pModelo.Value = e.NewValues[2].ToString();

            pAnio.Value = e.NewValues[3].ToString();

            //Agregamos los parametros al comando

            Comando.Parameters.Clear();

            Comando.Parameters.Add(pMarca);

            Comando.Parameters.Add(pModelo);

            Comando.Parameters.Add(pAnio);

            Comando.Parameters.Add(pId);

            //Indicar al comando la instrucción SQL a ejecutar

            Comando.CommandText = "UPDATE Vehiculo SET Marca = ?, Modelo = ?, Anio = ? WHERE Id = ?";

            //Ejecutamos la instrucción previamente indicada

            Comando.ExecuteNonQuery();

            //Cerramos la conexion

            Conexion.Close();

            //

            lblMensaje.Text = "Registro Insertado Exitosamente!!!";

            //Se indica que se termino la edicion de la fila seleccionada

            gvVehiculo.EditIndex = -1;

            //Se recarla la tabla con la funcion creada para llenarla

            LLenaTabla();

        }

        catch (Exception Exd)

        {

            //Se muestra un error al usuario si existiera

            lblMensaje.Text = Exd.Message;

        }

    }

Note que solo se está agregando el siguiente código dentro del evento RowUpdating:

            //Para obtener el elemento seleccionado de la lista desplegable o DropDownList, bastrá con hacer lo siguiente, crear una instancia del DropDownList con referencia del renglon seleccionado para edicion.

            DropDownList ddlcMarca = gvVehiculo.Rows[e.RowIndex].FindControl("ddlMarca") as DropDownList;

            //Obtener el valor del elemento seleccionado y asignarlo al parametro que ira a la Base de Datos.

            pMarca.Value = ddlcMarca.SelectedItem.Text;

Saludos y espero les sea de utilidad!!! Gracias!!!