Grilla mostrando la tabla Employees de Northwind


¿ Les gustaría presentar su nomina de empleados de esta manera. ?
Aquí les dejo un ejemplo de la Grilla mostrando la tabla Employees de Northwind.

Si bien esta es una tabla pequeña que no aprovecha todo el potencial de búsqueda y paginación de nuestro control Grilla, me pareció un buen ejemplo para demostrar la versatilidad a la hora de presentar datos.

Aquí va el código:

Public Class ReglaEmploy
  Public Shared Function ConsultaTodo(ByVal pOrden As Integer) As SqlDataAdapter
    Dim Adaptador = New System.Data.SqlClient.SqlDataAdapter
    Dim Cadena = "Data Source=MiBaseDeDatos;Initial Catalog=Northwind;Persist Security Info=True;User ID=MiUsuario;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
    If pOrden = 0 Then
      Adaptador.SelectCommand.CommandText = "SELECT *,'MailTo:'+LastName+'@Mimail.com' as Mail from Employees order by LastName"
    Else
      Adaptador.SelectCommand.CommandText = "SELECT *,'MailTo:'+LastName+'@Mimail.com' as Mail from Employees order by Title"
    End If
    Return Adaptador
  End Function
End Class

SqlDataAdapter para acceder a la tabla Employees. Aquí agregue un campo Mail ya que la tabla original no lo trae.

 <WebMethod()> _
 Public Shared Function ManejoEmployees(ByVal pContrato As MoniMisi2.ProveedorDatosServidor.Contrato) As MoniMisi2.ProveedorDatosServidor.Contrato
    Dim Contrato As MoniMisi2.ProveedorDatosServidor.Contrato = pContrato
    If Contrato.Operacion.Nombre = "Leer" Then
      Contrato = ProveedorDatosServidor.LeerFilas(Contrato, ReglaEmploy.ConsultaTodo(pContrato.Orden))
    End If
    Return Contrato
  End Function

Webmethod que debería figurar en nuestra página para hacer de nexo entre el cliente y los datos.

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

 <div style="width: 100%; height: 100%; padding: 30px">
        <center>
            <table class="Employ">
                <tr>
                    <td id="Employees_Orden_LastName" class="ColumnaOrdenada">
                        Ordenar por Apellido
                    </td>
                    <td runat="server" id="Employees_Orden_Title" class="ColumnaOrdenada">
                        Ordenar por Titulo
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <table class="Employ" id="TablaEmployees">
                            <tr>
                                <td>
                                    <table style="height: 550px">
                                        <tr runat="server" id="RegistroEmployees" class="FilaEmploy">
                                            <td>
                                                <table>
                                                    <tr>
                                                        <td>
                                                            <img id="Employees_PhotoPath" runat="server" height="50" width="50" src="" alt="Sin Imagen" />
                                                        </td>
                                                        <td>
                                                            <table>
                                                                <colgroup>
                                                                </colgroup>
                                                                <colgroup style="background-color: #757575">
                                                                </colgroup>
                                                                <colgroup>
                                                                </colgroup>
                                                                <colgroup style="background-color: #757575">
                                                                </colgroup>
                                                                <colgroup>
                                                                </colgroup>
                                                                <colgroup style="background-color: #757575">
                                                                </colgroup>
                                                                <tr>
                                                                    <td>
                                                                        Apellido:
                                                                    </td>
                                                                    <td style="width: 200px" id="Employees_LastName">
                                                                    </td>
                                                                    <td>
                                                                        Pais:
                                                                    </td>
                                                                    <td style="width: 200px" id="Employees_Country">
                                                                    </td>
                                                                    <td>
                                                                        Teléfono:
                                                                    </td>
                                                                    <td style="width: 200px" id="Employees_HomePhone">
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        Nombre:
                                                                    </td>
                                                                    <td style="width: 200px" id="Employees_FirstName">
                                                                    </td>
                                                                    <td>
                                                                        Ciudad:
                                                                    </td>
                                                                    <td style="width: 200px" id="Employees_City">
                                                                    </td>
                                                                    <td>
                                                                        Nacimiento:
                                                                    </td>
                                                                    <td style="width: 200px" id="Employees_BirthDate">
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        Titulo:
                                                                    </td>
                                                                    <td style="width: 200px" id="Employees_Title">
                                                                    </td>
                                                                    <td>
                                                                        Dirección:
                                                                    </td>
                                                                    <td style="width: 200px" id="Employees_Address">
                                                                    </td>
                                                                    <td>
                                                                        Mail:
                                                                    </td>
                                                                    <td style="width: 200px" id="Td1">
                                                                        <a id="Employees_Mail">Enviar</a>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="3">
                                                            <table>
                                                                <colgroup>
                                                                </colgroup>
                                                                <colgroup>
                                                                </colgroup>
                                                                <tr>
                                                                    <td style="width: 93px; text-align: center">
                                                                        Notas:
                                                                    </td>
                                                                    <td colspan="3" id="Employees_Notes" style="width: 700px">
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td id="Info" style="text-align: left" class ="CeldaInfo">
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </center>
    </div>

<MM2:Grilla runat="server" ID="GrillaEmployees" TargetControlID="RegistroEmployees"
        Filas="4" IDDatos="Employees" IdCeldaInfo="Info">
</MM2:Grilla>

Declaración del ProveedorDatosServidor, table y Grilla en nuestra página.



#TablaEmployees table
{
    background-color:transparent;
 }

#TablaEmployees tr.Seleccionado
{
 -webkit-filter: drop-shadow(15px 15px 20px black);
    color: #FFBA2B;
    cursor: pointer !important;
}


.FilaEmploy table tr td
{
   cursor:pointer !important;
}

.FilaEmploy:hover
{
 -webkit-filter: drop-shadow(15px 15px 20px black);
   
}
.FilaEmploy:nth-child(odd)
{
    background-color: #595959;
}
.FilaEmploy:nth-child(even)
{
    background-color: #555555;
}
.Employ
{
     background-color :#555555 ;
}

.ColumnaOrdenada
{
    cursor: pointer;
}

.ColumnaOrdenada div
{
    color :red;
    display :inline-block ;
    vertical-align :middle ;
    width : 0px;
    height : 0px;
    background-Color : transparent;
    border-left : solid 5px transparent;
    border-right: solid 5px transparent;
    border-top : solid 5px;
}

.ColumnaOrdenada:hover
{
    background-color: #999999;
}

.CeldaInfo
{
 color:Black ;  
    }
.CeldaInfo div
{
     color:Red;
     padding-right :5px;
     display:inline-block ;
     background-color:transparent;
     width:0px;
     height:0px;
     border-left:solid 10px;
     border-top:solid 5px transparent;
     border-bottom:solid 5px transparent
}

Definición del stylesheet a incluir para que todo esto se vea bien, con un par de aclaraciones:


.FilaEmploy:nth-child(odd)
{
background-color: #595959;
}
.FilaEmploy:nth-child(even)
{
background-color: #555555;
}

Estos estilos son los encargados de hacer el efecto cebra de nuestra tabla, o sea, las filas pares de un color y las impares de otro. Resulta que hasta el Internet Explorer 8 este mando no funciona. No sé que pasara en las siguiente versiones, pero por ahora en este explorador, este efecto no se muestra.


.FilaEmploy:hover
{
-webkit-filter: drop-shadow(15px 15px 20px black);

}

Este estilo solo funciona en Chrome, y es el encargado de agregar sombras en el registro seleccionado.

Yo soy de seguir la regla que dice: Si no funciona igual en todos los exploradores… no lo uses , pero en este caso hice una excepción porque este efecto me pareció muy chulo.

por último no se olviden de bajar la Librería MoniMisi2 e incluirla en su proyecto.

Anuncios

2 Respuestas a “Grilla mostrando la tabla Employees de Northwind

  1. Pingback: Nuevo Formulario para ASP.net | MoniMisi

  2. Pingback: Ahora la Grilla también es Marquesina | MoniMisi

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