Nueva Grilla para ASP.net sin uso de Postback

Terminé el control Grilla de nuestro Framework y !! funciona bárbaro!!. Si queres ver como se usa y darle una probadita, aqui te dejo toda la data y un link para bajarte la librería.

Sí… ya esta funcionando. Les cuento que originalmente había pensado en hacerla a partir de un ScriptControl pero, después de pensarlo un poco me decidí por un ExtenderControl.

¿ Las razones ?… El ExtenderControl no es un componente visual, solo extiende las funcionalidades de un control existente.Lo que me libera de la ardua tarea de tener que programar toda la funcionalidad del control en tiempo de diseño. En pocas palabras… el programador crea la tabla como se le antoja y el ExtenderControl la transforma en una Grilla con todas sus funcionalidades. Fácil ¿no?.

Entonces para que todo funcione solo necesitaremos alojar en nuestra página un ProveedorDatosServidor, un table de HTML y nuestro Extender-Grilla, que se encargará de relacionar los dos anteriores para producir el resultado buscado.

Pero basta de charla y vamos al ejemplo.

 <MM2:ProveedorDatosServidor ID="Nomenclador" runat="server" WebMethod="ManejoNomenclador">
        <Ordenes>
            <MM2:OrdenDatos Columna="codnn"></MM2:OrdenDatos>
            <MM2:OrdenDatos Columna="nomen_des"></MM2:OrdenDatos>
        </Ordenes>
 </MM2:ProveedorDatosServidor>

 <div style="width: 100%; height: 100%; padding: 30px">
        <center>
            <table>
                <tr>
                    <td>
                        <table class="Grilla" id= "GrillaNomenclador" >
                            <tr style="font-size: medium">
                                <td id="Nomenclador_Orden_codnn" class="ColumnaOrdenada">
                                    Código
                                </td>
                                <td id="Nomenclador_Orden_nomen_des" class="ColumnaOrdenada">
                                    Descripción
                                </td>
                            </tr>
                            <tr runat="server" id="RegistroNomenclador" class="FilaNomen">
                                <td style="width: 100px" id="Nomenclador_codnn">
                                </td>
                                <td style="width: 800px" id="Nomenclador_nomen_des">
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td style="width: 10px; background-color: white" id="ScrollNomenclador">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" id="InfoNomenclador" class="CeldaInfo">
                    </td>
                </tr>
            </table>
        </center>
</div>
<MM2:Grilla runat="server" ID="GrillaNomenclador" TargetControlID="RegistroNomenclador" Filas="10"
        IDDatos="Nomenclador" Poblando="LLenarColumnasBlanco" IdCeldaScroll="ScrollNomenclador"
        IdCeldaInfo="EstadoNomenclador" Elegido="MostrarElegido">
</MM2:Grilla>

        function LLenarColumnasBlanco(sender, e) {
            if (e.Valor == null) {
                e.Control.innerHTML = "</br>"
                e.Cancelar = true;

            }
        }
        function MostrarElegido(sender, e) {
            alert(e.Registro.nomen_des);
        }

Bueno… la configuración y uso del control ProveedorDatosServidor, la pueden encontrar acá así que lo único que voy a decir de este control es que está usando una tabla de SQL Server que se llama Nomenclador, que posee dos campos: codnn y nomen_des (código y descripción). Se comunica con el servidor a través del del Webmethod “ManejoNomenclador” y tiene dos posibilidades de ordenamiento, uno por cada campo.

Luego vemos la definición de la tabla en donde se van a mostrar los datos.
En principio vemos dos tablas anidadas… pero no se preocupen, con una sola bastaría. Esto lo hice simplemente como una posible forma de mostrar los datos. Ya verán que hay tantas formas de mostrarlos como se imaginen.
Lo importante aquí es decirle a nuestro control Grilla, primero, cuál es nuestro Proveedor de Datos. En este caso asignamos a la propiedad “IDDatos” el valor “Nomenclador” que es el id del ProveedorDatosServidor.
Luego qué fila (TR) será la que contenga los registros.
En este ejemplos vemos que el control Grilla refiere en su propiedad “TargetControlID” la fila (TR) llamada “RegistroNomenclador”.
Luego, dentro de esta fila, especifico dos columnas (TD): una con el id = “Nomenclador_codnn”, y otra con id = “Nomenclador_nomen_des”.
Esto le dice a nuestra grilla en que lugar poner cada dato de nuestro ProveedorDatosServidor.
El nombre de la columna se compone de la siguiente manera: Id = Id del ProveedorDatosServidor + guion bajo + Nombre de campo que devuelve el ProveedorDatosServidor.
Recordemos que todo esto es case sensitive, o sea reconoce entre mayúsculas y minúsculas, por lo tanto debe escribirse siempre de la misma manera.
Si bien en este ejemplo no se usa, podría estar presentando los campos, no solo en TDs, sino también en SPAN, DIV,INPUT de cualquier tipo o cualquier otro tipo de control contenedor. Solo bastaría con ponerle el Id correspondiente e incluirlo dentro de la fila “RegistroNomenclador”.
Esto nos dará la libertad de crear filas a nuestro antojo y mostrar los datos de muchas maneras diferentes.

Seguimos con la cantidad de filas que queremos mostrar al mismo tiempo, en este caso 10, y lo asignamos a la propiedad “Filas”.
Las propiedades “IdCeldaScroll” y “IdCeldaInfo” le dirán a la grilla dónde poner el control de Scroll o barra de desplazamiento, y dónde mostrar datos adicionales( paginación, busqueda, etc.).

A continuación podemos asignar el evento “Poblando” a cualquier función javascript. Esta se ejecutará cada vez que se dibuje un dato en pantalla.
Y si quisiéramos disparar otra función cuando el usuario seleccione un registro, lo haríamos en el evento “Elegido”.

Por último debemos especificar que columnas van a poder ser ordenadas por el usuario. En este caso, yo elegí las celdas que llevan el título de cada columna, pero podría haber usado cualquier otro contenedor (TD,SPAN,DIV, etc.).
Con solo asignar en la propiedad “Id” el Id del ProveedorDatosServidor + guion bajo + “Orden” + guion bajo + Id de la propiedad Orden de nuestro ProveedorDatosServidor, las celdas ganarán esta funcionalidad.
Por ejemplo: especificando id=”Nomenclador_Orden_codnn” lograremos que cuando el usuario haga click sobre este TD la grilla se ordene por codnn.

Acá una captura del resultado.

Aquí otra manera de presentar los mismos datos.

Finalmente, y para darle un estilo particular a la fila seleccionada, y esta destaque del resto, les paso el Stylesheet correspondiente.

#GrillaNomenclador tr.Seleccionado
{
    background-color: #FF3300;
    font-family: Arial, Helvetica, sans-serif;
    font-size:  small ;
    color: #FFFFFF;
    cursor:pointer !important;
}

Una nota de color

Tal vez se pregunten que es ese triangulito rojo que aparece en la cabecera y pié de la grilla. Pues bién: para identificar cual es el orden actual de la grilla a primera vista, se me ocurrió poner algún especie de marca. Así que cada celda marcada con el id xxxx_Orden_xxxxx llevará dentro un DIV vacío. Y la celda de Información (IdCeldaInfo), otro.
Este DIV puede llenarse con alguna imagen, texto o, como en este caso pintándolo de forma triangular.
¿Cómo se hace?… les paso el StyleSheet

.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: #E8E8FF;
}

.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
}

Las variantes son muchas, todo depende de nuestra imaginación.

Les dejo para que se bajen la Librería MoniMisi2

Anuncios

3 Respuestas a “Nueva Grilla para ASP.net sin uso de Postback

    • Gracias Horacio. Todos los días actualizo esta librería, ya sea por el agregado de algo nuevo o el arreglo de errores. Así que si te bajaste la DLL no te olvides de volver a hacerlo cada tanto.

  1. Pingback: Nuevo Combo con múltiples columnas para ASP.Net | 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