ComboBox - DropDownList – Opción “Todos”

 

Introducción

En algunas situaciones se requiere agregar un ítem especial a los controles, como ser en controles del tipo combo, para que el usuario tenga la posibilidad de indicar que no hay un ítem escogido de la lista.

Esto se usa especialmente en circunstancias en donde el campo que representa el combo es opcional, o se quiere inicializar en un ítem que obligue al usuario a elegir un valor de la lista.

Es por esto que según cual sea la funcionalidad del combo, si actuara como filtro, o como lista con obligación de selección del usuario, es que tendrás distintas leyendas.

Si es un filtro podrías decir: “<Todos los items>”, o sea que no se aplicaría el ítem como filtro, o si el control actual sin una selección por defecto podrías decir: “<Seleccione un ítem de la lista>”, por supuesto este ultimo caso se validaría haya elegido un ítem.

En el articulo se intentara explicar las forma en que es posible añadir un ítem extra a los controles ya sea WinForms o Web.

 

WinForms ComboBox

El combobox de una aplicación estilo “Windows Application” puede recibir como origen de datos diferentes fuentes, podrías ser una clase especifica creada por uno, o podrías ser un dataset. Según cual sea el origen de datos cambia la solución que debe aplicarse para agregar este ítem extra opcional de la lista, ya que será el origen de datos donde se agrega la opción especial.

Agregar opción usando clases creadas por uno

En el ejemplo se ha definido una clase de nombre “Producto”, es muy simple, solo cumple la función de definir la información que necesitas el control.

public class Producto
{
    public string Descripcion { get; set; }
    public int Id { get; set; }
    public int Precio { get; set; }
}

El código que carga una lista de tipo Producto y la asigna como origen de datos al combo, es el siguiente:

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        
        cbProductos.ValueMember = "Id";
        cbProductos.DisplayMember = "Descripcion";
        cbProductos.DataSource = ObtenerListItemOpcional();

    }

    private List<Producto> ObtenerListItemOpcional()
    {
        List<Producto> listproductos = ObtenerLista();

        listproductos.Insert(0, new Producto() { Id = 0, Descripcion = "<Seleccione un Item>", Precio = 0 });

        return listproductos;
    }

    private List<Producto> ObtenerLista()
    {
        return new List<Producto>()
        {
            new Producto(){ Id = 1, Descripcion = "Notebook HP Athlon Neo MV-40", Precio = 3100},
            new Producto(){ Id = 2, Descripcion = "Notebook ASUS ATOM N450", Precio = 2300},
            new Producto(){ Id = 3, Descripcion = "Notebook ACER N270", Precio = 2000},
            new Producto(){ Id = 4, Descripcion = "Notebook SONY Atom TM", Precio = 2600},
            new Producto(){ Id = 5, Descripcion = "Notebook DELL SU 4100", Precio = 3400},
            new Producto(){ Id = 6, Descripcion = "Notebook ASUS Core i3", Precio = 4500}
             
        };
    }
}

La línea clave en donde se agrega el ítem que permitirá la selección opcional es:

listproductos.Insert(0, new Producto() { Id = 0, Descripcion = "<Seleccione un Item>", Precio = 0 });

Lo importante a remarcar es como el modelo original de datos no es alterado, pudiéndose cargar, si se necesita, un combo simple sin un ítem adicional, se maximiza la reutilización de los métodos separándolos según agregue o no el ítem opcional.

Agregar opción usando un DataTable

En este caso se usara un datatable cuya estructura será definido en runtime, la clave aquí esta en el método ObtenerListItemOpcional() donde se crea la nueva fila en tiempo de diseño.

public partial class Form2 : Form
{
    public Form2()
    {
        InitializeComponent();
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        cbProductos.DisplayMember = "Descripcion";
        cbProductos.DataSource = ObtenerListItemOpcional();
    }

    private DataTable ObtenerListItemOpcional()
    {
        DataTable listproductos = ObtenerLista();

        DataRow row = listproductos.NewRow();
        row["Id"] = 0;
        row["Descripcion"] = "<Seleccione un Item>";
        row["Precio"] = 0;
        
        listproductos.Rows.InsertAt(row, 0);

        return listproductos;
    }

    private DataTable ObtenerLista()
    {
        DataTable dt = new DataTable();

        dt.Columns.Add("Id");
        dt.Columns.Add("Descripcion");
        dt.Columns.Add("Precio");

        DataRow row = dt.NewRow();
        row["Id"] = 1;
        row["Descripcion"] = "Notebook HP Athlon Neo MV-40";
        row["Precio"] = 3100;
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Id"] = 2;
        row["Descripcion"] = "Notebook ASUS ATOM N450";
        row["Precio"] = 2300;
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Id"] = 3;
        row["Descripcion"] = "Notebook ACER N270";
        row["Precio"] =  2000 ;
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Id"] = 4;
        row["Descripcion"] = "Notebook SONY Atom TM";
        row["Precio"] = 2600;
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Id"] = 5;
        row["Descripcion"] = "Notebook DELL SU 4100";
        row["Precio"] = 3400;
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Id"] = 6;
        row["Descripcion"] = "Notebook ASUS Core i3";
        row["Precio"] = 4500;
        dt.Rows.Add(row);

        return dt;
    }
}

 

En caso de usar un dataset tipado, la técnica es la misma solo que se dispondrá de método específicamente creados por el dataset en tiempo de diseño, en el ejemplo no se contemplo este caso, pero ante la necesidad de usarlo podría ser algo como lo siguiente:

private dtoProducto.ProductosDataTable ObtenerListItemOpcional()
{
    dtoProducto.ProductosDataTable dt = ObtenerLista();

    dtoProducto.ProductosRow row = dt.NewProductosRow();
    row.Id = 0;
    row.Descripcion = "<Seleccione un Item>";
    row.Precio = 0;
    dt.Rows.Add(row);

    return dt;
}

Es prácticamente idéntico solo que hay método especiales, por ejemplo, NewProductosRow() y los campos estas tipados en propiedades.

 

[C#]

[VB.NET]

 

ASP.NET DropDownList

La técnicas usadas para añadir un ítem a los controles web, difieren bastante de las usadas en una aplicación winforms.

Tomemos de ejemplo el siguiente html

    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList>
        
        <br/>
        <br/>
        
        <asp:DropDownList ID="DropDownList2" runat="server" AppendDataBoundItems="true">
            <asp:ListItem Value="0">&lt;Seleccione un Item&gt;</asp:ListItem>
        </asp:DropDownList>
    </div>
    </form>

Este solo contiene dos controles de lista, pero hay una diferencia entre ellos, el segundo hace uso de una propiedad especial que le permite añadir un ítem definido en código html del mismo, me refiero al AppendDataBoundItems="true"

Si ahora se analiza el código .net usado para cargar cada lista

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DropDownList1.DataSource = ObtenerLista();
        DropDownList1.DataTextField = "Descripcion";
        DropDownList1.DataValueField = "Id";
        DropDownList1.DataBind();

        DropDownList1.Items.Insert(0, new ListItem("<Seleccione un Item>", "0"));


        DropDownList2.DataSource = ObtenerLista();
        DropDownList2.DataTextField = "Descripcion";
        DropDownList2.DataValueField = "Id";
        DropDownList2.DataBind();
    }

}

Para el primer dropdownlist se ha agregado el ítem programáticamente usando el método Insert(), indicando en el primer parámetro que el valor estará ubicado en la primer posición.

Mientras que el segundo no requiere del agregado de nada especial, el ítem se había definido en el html.

 

[C#]

[VB.NET]

Conclusión

Si se compara las técnicas usadas para cargar el ComboBox de una aplicación WinForms y el DropDownList de una aplicación asp.net, se notara rápidamente que el primer caso el ítem adicional se agrega a los datos antes de bindear el control

Mientras que el el desarrollo con asp.net permite agregar un ítem directo al control, ya sea que se defina el en html, o se use el Insert() en su colección de ítems