sábado, 8 de septiembre de 2012

Llenar DropDownList con Selected Value en EditItemTemplate de GridView en C# ASP.Net

En este articulo explicare con un ejemplo como utilizar el control DropDownList en el EditTemplate del control GridView en ASP.NET.
Connection String a la Base de Datos
Para este ejemplo he utilizado la Base de Datos Northwind. Abajo esta la cadena de conexion del archivo web.config

    
  
Lo siguiente que haremos sera agregar un gridview a nuestro proyecto.
Enlazando al gridView
Abajo esta el codigo para enlazar el control GridView con la data a travez de IsPostBack el cual llamara a BindData y cargara los datos en el GridView
protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            this.BindData();
        }
    }
    private void BindData()
    {
        string query = "SELECT top 10 * FROM Customers";
        SqlCommand cmd = new SqlCommand(query);
        GridView1.DataSource = GetData(cmd);
        GridView1.DataBind();
    }

    private DataTable GetData(SqlCommand cmd)
    {
        string strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
        using (SqlConnection con = new SqlConnection(strConnString))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    return dt;
                }
            }
        }
    }
Para editar las filas del gridview o cancelar dicha accion escribimos el codigo de abajo el cual manejara dichas acciones:
protected void EditCustomer(object sender, GridViewEditEventArgs e)
{
    gvCustomers.EditIndex = e.NewEditIndex;
    BindData();
}
 
protected void CancelEdit(object sender, GridViewCancelEditEventArgs e)
{
    gvCustomers.EditIndex = -1;
    BindData();
}
Para enlazar estos eventos al gridview lo haremos desde la ventana de propiedades:
Ahora editamos las columnas y agregaremos solo 2 campos de la tabla Customers de Northwind: ContactName y City.
La primera columna sera de tipo BoundField y escribimos ContactName en HeaderText y DataField. La segunda columna sera de tipo BoundField, escribimos City en headerText y DataField y despues lo convertimos en TemplateField. Ahora agregamos una tercera columna de Tipo CommandField (Editar, Eliminar y Cancelar). Finalmente quitamos check a Generar campos automaticamente y damos click en Aceptar. Nuestro gridview se vera asi:
Ahora nos vamos a la opcion Editar Plantillas y elegimos la Columna1 City.
Una vez aqui en ItemTemplate agregamos un Label y en EditItemTemplate agregamos un Label y lo renombramos con el mismo nombre que el anterior y lo ponemos en Visible False, en ambos Editamos enlace de Datos y en Expresion de Codigo escribimos Eval("City"). Tambien agregamos un DropDownList y terminamos la Edicion de Plantilla.
El DropDownList tiene que estar enlazado en el evento RowDataBound del GridView de la siguiente forma. Utilizando el label que iba junto al DropDownList obtenemos la ciudad almacenada previamente:
protected void RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow && GridView1.EditIndex == e.Row.RowIndex)
        {
            DropDownList DropDownList1 = (DropDownList)e.Row.FindControl("DropDownList1");
            string query = "select distinct city from customers";
            SqlCommand cmd = new SqlCommand(query);
            DropDownList1.DataSource = GetData(cmd);
            DropDownList1.DataTextField = "city";
            DropDownList1.DataValueField = "city";
            DropDownList1.DataBind();
            DropDownList1.Items.FindByValue((e.Row.FindControl("Label1") as Label).Text).Selected = true;
        }
    }
Finalmente para actualizar el GridView implementamos este metodo:
protected void UpdateCustomer(object sender, GridViewUpdateEventArgs e)
    {
        string city = (GridView1.Rows[e.RowIndex].FindControl("DropDownList1") as DropDownList).SelectedItem.Value;
        string customerId = GridView1.DataKeys[e.RowIndex].Value.ToString();
        string strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
        using (SqlConnection con = new SqlConnection(strConnString))
        {
            string query = "update customers set city = @city where customerId = @customerId";
            using (SqlCommand cmd = new SqlCommand(query))
            {
                cmd.Connection = con;
                cmd.Parameters.AddWithValue("@city", city);
                cmd.Parameters.AddWithValue("@customerId", customerId);
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
                Response.Redirect(Request.Url.AbsoluteUri);
            }
        }
    }
y lo llamamos desde el RowUpdating y lo mismo para RowDataBound lo llamamos desde el evento del GridView con el mismo nombre. Y finalmente en la propiedad DataKeyNames escribimos CustomerId y tendremos esto. Para este ejemplo lo implemente editando solo el pais con la lista existente en la tabla.

0 comentarios:

Publicar un comentario