Nuevo Combo con múltiples columnas para ASP.Net

Un Combo o DropDownList con múltiples columnas, y con la posibilidad de buscar y ordenar por cualquiera de ellas. ¿ Te Interesa ?.

El otro día tuve que rehacer una aplicación windows pasándola a web. Debía mantener el estilo de carga lo mas parecido al original, ya que los usuarios iban a ser los mismos y no había tiempo ni dinero para la capacitación.
El sistema poseía una carga de medicamentos en donde se consignaba un código o troquel, pero si éste no estaba disponible, el usuario tenía la posibilidad de buscar por Nombre comercial, monodroga o presentación.
Todo esto aparecía en forma de lista en una ventana emergente. Un especie de DropDownLsit, pero con múltiples columnas.
Así que puse manos a la obra y siguiendo con la temática de desarrollar controles que nos hagan la vida más fácil, desarrolle este nuevo control, que no es más que un TextBox mas una Grilla. Implementa la interface IScriptControl por lo tanto necesita de un ScriptManager presente en la página. Extiende la funcionalidad del TextBox para que quede sincronizado con la Grilla, haciendo de control de carga y búsqueda al mismo tiempo.

Aprovecharemos el ejemplo que venimos usando.

Agregaremos un ProveedorDatosServidor a nuestra página ASPX de la siguiente manera:

<MM2:ProveedorDatosServidor ID="Employees2" runat="server" WebMethod="ManejoEmployees">
   <Ordenes>
      <MM2:OrdenDatos Columna="LastName"></MM2:OrdenDatos>
      <MM2:OrdenDatos Columna="Title"></MM2:OrdenDatos>
      <MM2:OrdenDatos Columna="EmployeeID"></MM2:OrdenDatos>
   </Ordenes>
</MM2:ProveedorDatosServidor>

Aquí vemos que en la propiedad WebMethod hemos consignado el mismo Nombre que el ProveedorDatosServidor del ejemplo anterior. Esto lo hacemos para compartir los datos entre ambos y de paso mantenerlos actualizados sin viajes extra al servidor.
Ademas hemos agregado un OrdenDatos en el tag Ordenes, con la propiedad Columna igual a EmployeeID.
Este ordenamiento es necesario para que nuestro control pueda, dado un EmployeeID, obtener su correspondiente LastName.
Los otros dos ordenamientos nos sirven para que el usuario pueda buscar a través de ellos.
Por supuesto, y según vimos en la declaración del ProveedorDatosServidor, debe existir en la regla de negocios Employee, una opción para obtener la tabla ordenada por cada uno de estos items.
Así que la regla nos quedaría de esta manera:

Public Class ReglaEmploy
  Public Shared Function ConsultaTodo(ByVal pOrden As Integer) As SqlDataAdapter
    Dim Adaptador = New System.Data.SqlClient.SqlDataAdapter
    Dim Cadena = "Data Source=MiServidor;Initial Catalog=Northwind;Persist Security Info=True;User ID=MiId;Password=MiPassword"
    Dim Conexion As System.Data.SqlClient.SqlConnection = New System.Data.SqlClient.SqlConnection(Cadena)
    Adaptador.SelectCommand = New System.Data.SqlClient.SqlCommand()
    Adaptador.SelectCommand.Connection = Conexion
    Select Case pOrden
      Case 0
        Adaptador.SelectCommand.CommandText = "SELECT EmployeeID, LastName, FirstName, Title, TitleOfCourtesy, BirthDate, HireDate, Address, City, Region, PostalCode, Country, HomePhone, Extension, Notes, ReportsTo,Salario, PhotoPath,'MailTo:'+LastName+'@Mimail.com' as Mail from Employees order by LastName"
      Case 1
        Adaptador.SelectCommand.CommandText = "SELECT EmployeeID, LastName, FirstName, Title, TitleOfCourtesy, BirthDate, HireDate, Address, City, Region, PostalCode, Country, HomePhone, Extension, Notes, ReportsTo,Salario, PhotoPath,'MailTo:'+LastName+'@Mimail.com' as Mail from Employees order by Title"
      Case 2
        Adaptador.SelectCommand.CommandText = "SELECT EmployeeID, LastName, FirstName, Title, TitleOfCourtesy, BirthDate, HireDate, Address, City, Region, PostalCode, Country, HomePhone, Extension, Notes, ReportsTo,Salario, PhotoPath,'MailTo:'+LastName+'@Mimail.com' as Mail from Employees order by EmployeeID"
    End Select
    
    Return Adaptador
  End Function
End Class

Ahora podemos agregar a nuestro formulario una fila con el ComboGrilla para mantener la columna RespondsTo de la tabla Employee.

<tr>
   <td>
      Reporta a :
   </td>
   <td>
     <MM2:ComboGrilla ID="Empleado_Mo_ReportsTo" runat="server" GrillaTargetId="RegistroComboEmployees" Valor="EmployeeID" Descripcion="LastName"></MM2:ComboGrilla>
   </td>
</tr>

Paso a describir las propiedades:

Propiedad Tipo Descripción Defecto
Descripcion String Nombre de la columna en la tabla que queremos mostrar como texto del control. String.Empty
Valor String Nombre de la columna en la tabla que queremos devolver como valor del control. String.Empty
GrillaTargetId String TargetControlID de la Grilla que se mostrará como lista desplegable del control. String.Empty
Validando String Nombre de la función en Javascript que será ejecutada al momento de validar. String.Empty
MensajeError String Texto que se presentará como tooltip cuando el valor no sea válido. Fecha erronea
CssError String Estilo con el cual se presentará el control cuando el valor no sea válido. Erroneo

Finalmente les paso el código de la Grilla que se muestra al modificar el valor del control.

<table class="ComboEmploy" cellpadding="0" cellspacing="0">
  <tr>
    <th id="Employees2_Orden_LastName" class="ColumnaOrdenada">
      Apellido
    </th>
    <th>
      Nombre
    </th>
    <th  id="Employees2_Orden_Title" class="ColumnaOrdenada">
      Titulo
    </th>
    </tr>
  <tr runat="server" id="RegistroComboEmployees">
    <td id="Employees2_LastName" style="width: 100px">
    </td>
    <td id="Employees2_FirstName" style="width: 100px">
    </td>
    <td id="Employees2_Title" style="width: 200px">
    </td>
   </tr>
</table>
<MM2:Grilla runat="server" ID="GrillaCombo" TargetControlID="RegistroComboEmployees" Filas="7" IDDatos="Employees2" />

Así queda definida la grilla que usara nuestro control para búsqueda, ordenamiento y selección. Yo la ubiqué inmediatamente después del formulario para que no interfiera con el flujo natural de la tecla tab (tabIndex) dentro del mismo.

Como siempre aquí les dejo la Librería MoniMisi2 para que se bajen con este control y todo lo desarrollado hasta ahora.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s