Click here to Skip to main content
11,642,402 members (65,206 online)
Click here to Skip to main content

AJAX grid with ASP.NET 2005

, 6 Mar 2007 64.4K 599 42
Rate this:
Please Sign up or sign in to vote.
A great AJAX Grid very customizable. In English & Spanish traduction
Screenshot - LeleGrid.gif

ENGLISH'S TRADUCTION


Introduction:

Designing the structure of an Intranet with multiple modules, i came across the "Dynamic Grid's Problem". I really needed a customizable Grid , easy to apply and to use, and the most important thing, with AJAX's technology .
Looking for one in the Web, codeproject, and so many other pages, i didn't find one that satisfied my expectations.
The only thing I found were tiny things which, properly combined, conform what it is today the "LeleGrid"


Links:

http://www.prototypejs.org


Requirements:

1) Have installed SQL Server Express 2005.
2) As usual, nowadays we need the Prototype JS Framework, because I use it as much for AJAX, as for the DOM handling.
In addition, it has one new method and a modified one. Both here describe :
Added method:

I create this new method so as avoid the "up and down" effect when using the functions (toogle, show or hide).
It is used by:
Element.invisible('nombrecontrol','visible') o Element.invisible('nombrecontrol','hidden')

invisible: function(type) {

$(arguments[0]).style.visibility = arguments[1];
},

Modified method:

I modified it because if when using the Grid with MasterPages, the ID's control will be rendered by the form: ctl00_contentPagina + ControlName

function $() {
      var results = [], element;
      for (var i = 0; i < arguments.length; i++) {
        element = arguments[i];
        if (typeof element == 'string'){
          if (document.getElementById(element) != null)
            element = document.getElementById(element);
          else
            element = document.getElementById("ctl00_contentPagina_"+element);
        }
        results.push(Element.extend(element));
      }
      return results.length < 2 ? results[0] : results;
    } 


Operation:

The Grid uses HttpHandler to obtain XML (by using its information) or to eliminate some element of the grid.
These are two archives: DatosGrilla.ashx and EliminarFilaGrilla.ashx.

The XML's format of the DatosGrilla.ashx file is the following:

<Contenido>
        <Cantidad></Cantidad> Cantidad de Filas devueltas.
        <Filas>
            <Fila>    Fila 1
                <Celda></Celda> campo 1..
                <Celda></Celda> campo 2..
                ...
                <Celda></Celda> campo N..
            </Fila>
            <Fila>    Fila 2
                <Celda></Celda>
                <Celda></Celda>
                <Celda></Celda>
            </Fila>
            ...
            <Fila>    Fila N
                <Celda></Celda>
                <Celda></Celda>
                <Celda></Celda>
            </Fila>
        <Filas>
    </Contenido>

In the different examples you will found it interacts against a data base SQL Express, but it can also interact against other data bases.


The Code:

You will found a great variety of examples with differents configurations.

In the web.config:

<add name="ConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=C:\Desarrollo\NET\LeleGrid\App_Data\Database.mdf;Integrated Security=True;User Instance=True" providerName="System.Data.SqlClient"/>

You must modify the path of "AttachDbFilename" according to where you have downloaded the ZIP

In the file .aspx we must have this:


In the head section:

<script type="text/javascript" src="../JavaScripts/protoype.js"></script>
        <script type="text/javascript" src="../JavaScripts/grillaV2.js"></script>

In the body section or content:

<CNC:Grilla runat="server" ID="grillaCategorias" NombreSector="COT" NombreGrilla="Categorias" NombreTabla="tblCategorias" />

This control shows the searching fields through which the data will be filtered. It is formed by several "Fields", through which the value will be searched, and another field, that is the value itself.

The mandatory parameters are:
NombreSector: As said in the Introduction of the articule I needed a grid for an Intranet with multiple modules . The, This field is for it.
NombreGrilla: The Grid's name
NombreTabla: The Table's name.

Important:
None of these 3 parameters should be the same.
They ID must be by the form "grilla" + NombreGrilla.

The optional parameters are:

OpcionesAvanzadas: Whether it has advanced options or not. TRUE/FALSE. By default TRUE
OpcionesBasicas: Whether it has basic options or not. TRUE/FALSE. By default TRUE
CantRegistros: Amount of registries shown per page. By default 10
Oculto: Whether to show the search fields or not. TRUE/FALSE. By default FALSE
Paginacion: Whether it has pagination or not. TRUE/FALSE. By default TRUE

In thead of the table which becomes it is to put the head of the Grid. The Width assigned to each column it's your own choice.

In addition, if one would like to sort the table by that particular column the event onclick should be added to every td.

The parameters received by the OrdenarTabla's function receives are: Index of the Column, Name of the Table, and Type of Ordering (0=Numbers, 1=String and 2=$) respectively.


<table id="tblCategorias" class="grilla" cellspacing="0">
            <thead>
                <tr>
                    <td style="width: 90px; display: block;">Opciones</td>

<td style="cursor: pointer; width: 50%;" title="Ordenar por Nombre"
onclick="OrdenarTabla(1,'tblCategorias', 1);">Nombre</td>

<td style="cursor: pointer; width: 50%;" title="Ordenar por
Traducci&oacute;n" onclick="OrdenarTabla(2,'tblCategorias',
1);">Traducci&oacute;n</td>
                    <td style="width: 10px;">Activo</td>
                </tr>
            </thead>
            <tbody id="trFilasCategorias">
                <tr>
                    <td colspan="4">No se han encontrado resultados.</td>
                </tr>
            </tbody>
            <tfoot id="trCargandoCategorias" style="display:none;">
                <tr>
                    <td colspan="4" style="background-color:#fff;">
                        <CNC:Cargando ID="CargandoCategorias" runat="server" />
                    </td>
                </tr>
            </tfoot>
        </table>

Important:
Id of the TBody must be: "trFilas" + NombreGrilla.
Id of the TFoot must be: "trCargando" + NombreGrilla
Id of the control loading must be: "Cargando" + NombreGrilla.

In the foot a row using the "Loading" control is usually added. This is just a graphical detail but it looks really pretty! You will realize this once the Grid is working. JA!

<asp:HiddenField runat="server" ID="hidVuelveDeEdicion" />
        <asp:HiddenField runat="server" ID="hidValorPagina" />


These two hidden fields are used when redirected by the Grid to another page and from this one back to the Grid. Theese fields will assure you the Grid will be loaded with it previous information.

In the file .aspx.cs or similar:

protected void Page_Load(object sender, EventArgs e) {

            if(!IsPostBack) {

                CargarBusqueda();

Page.ClientScript.RegisterStartupScript(this.GetType(), "Load",
"RecuperarBusqueda('COT','Categorias','tblCategorias', 10 ,true, true,
true);",true);
                grillaCategorias.ValoresBusqueda.Items.Add(new ListItem("Nombre", "Nombre"));
                grillaCategorias.ValoresBusqueda.Items.Add(new ListItem("Traducción", "Traduccion"));
            }

            grillaCategorias.ValorBusqueda.Focus();
        }

        private void CargarBusqueda() {

            string valorPagina = Request.QueryString["valorPagina"];
            string valorCampo = Request.QueryString["valorCampo"];
            string valorBusqueda = Request.QueryString["valorBusqueda"];

            if(string.IsNullOrEmpty(valorPagina) || string.IsNullOrEmpty(valorCampo) || string.IsNullOrEmpty(valorBusqueda)) {
                hidVuelveDeEdicion.Value = "FALSE";
            }
            else {
                hidVuelveDeEdicion.Value = "TRUE";
                hidValorPagina.Value = valorPagina;
                grillaCategorias.ValorBusqueda.Text = valorBusqueda;
                grillaCategorias.ValoresBusqueda.SelectedValue = valorCampo;
            }
    }    

In the file grillaV2.js :

It is the Grid's main file. It may have global variables:

var indiceColAnt = 0;
        var classAnt;


var _imgPath = "../Imagenes/Grilla/"; This is the only variable that you can modifiy.

        var _tipoGrilla = null;
        var _sector = null;
        var _table = null;
        var _opcionesBasicas = null;
        var _opcionesAvanzadas = null;
        var _paginaActual = null;
        var _valorCantReg = null;
        var _valorCampo = null;
        var _valorBusqueda = null;
        var _realizaPaginacion = null;


Apart from containing all the pertinent functions, it contains a EjecutarAccion function.
This function is used for the advanced options of grid.

Styles:

We can have these CSS in the Themes or just in a .css file.
Remind yourself to change the references of the images !

    .grilla {
        background:Window;
        border:Solid 1px #c4bdb0;
        color:WindowText;
        font:Icon;
        width:100%;
    }
    .grilla thead{
        BACKGROUND: url(../../Imagenes/menuBg.gif) repeat-x;
        color:black;
    }
    .grilla td {
        padding:2px 5px;
    }
    .grilla thead td {
        border:1px solid;    
        border-color:ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
    }
    .grilla select {
        font-family:Verdana;
        font-size:7pt;
    }
    .descendente {/* columna de ordenamiento descendente */
        font-weight:bold;
        height:11px;
        width:11px;
    }
    .ascendente{ /* columna de ordenamiento ascendente */
        font-weight:bold;    
        height:11px;
        width:11px;
    }
    .AlternatingItemTemplate {/* filas pares */
        background-color:#fff;
        background-position:center center;
    }
    .ItemTemplate{/* filas impares */
        background-color:#fff;
        background-position:center center;
    }
    #cmbCantFilas{
        font-family:Verdana;
        font-size:8pt;
    }

Testing

The correct operation oF the LeleGrid was proved in IE 6+ and Mozilla 1.5+


TRADUCCION AL ESPAÑOL


Introduccion:

Diseñando la estructura de una Intranet con multiples modulos, se me presento el problema de las Grillas Dinamicas.
Necesitaba una Grilla altamente customizable, facil de aplicar y de usar, y lo mas importante, con tecnologia AJAX.
Buscando por la web, por codeproject, y por tantas otras paginas, no encontre ninguna que satisfaciera mis espectativas.
Lo unico que encontraba eran pequeñas cosas, que todas juntas, conforman lo que hoy es la "LeleGrid".


Links Utiles:

http://www.prototypejs.org


Requisitos:

1) Tener instalado SQL Server Express 2005.

2) Como es usual en estos tiempos la Grilla necesita de la Libreria Prototype, ya que la uso tanto para AJAX, como para el manejo de DOM

Ademas, tiene 1 metodo nuevo y otro modificado que describo a continuacion:

Metodo agregado:

Lo cree para que no se produzca el efecto de subir y bajar al usar las funciones (toogle, show o hide).
Se usa de la forma:
Element.invisible('nombrecontrol','visible') o Element.invisible('nombrecontrol','hidden')

 invisible: function(type) {
          $(arguments[0]).style.visibility = arguments[1];
      }, 

Metodo Modificado:

Lo modifique ya que si usamos la Grilla con MasterPages, los ID de los controles se renderean de la forma: ctl00_contentPagina + NombreDelControl

function $() {
      var results = [], element;
      for (var i = 0; i < arguments.length; i++) {
        element = arguments[i];
        if (typeof element == 'string'){
          if (document.getElementById(element) != null)
            element = document.getElementById(element);
          else
            element = document.getElementById("ctl00_contentPagina_"+element);
        }
        results.push(Element.extend(element));
      }
      return results.length < 2 ? results[0] : results;
    } 


Funcionamiento:

La Grilla usa HttpHandler para obtener el XML con los datos de la misma o para Eliminar algun elemento de la misma.
Estos archivos son 2: DatosGrilla.ashx y EliminarFilaGrilla.ashx.

El formato del XML del archivo DatosGrilla.ashx es de la siguiente forma:

    <Contenido>
        <Cantidad></Cantidad> Cantidad de Filas devueltas.
        <Filas>
            <Fila>    Fila 1
                <Celda></Celda> campo 1..
                <Celda></Celda> campo 2..
                ...
                <Celda></Celda> campo N..
            </Fila>
            <Fila>    Fila 2
                <Celda></Celda>
                <Celda></Celda>
                <Celda></Celda>
            </Fila>
            ...
            <Fila>    Fila N
                <Celda></Celda>
                <Celda></Celda>
                <Celda></Celda>
            </Fila>
        <Filas>
    </Contenido>

En los ejemplos encontraran que interactua contra una base de datos SQL Express, pero puede interactuar tmb contra otras bases de datos.


El Codigo:

Encontraran una gran variedad de ejemplos con distintos tipos de configuraciones.

En el web.config:

<add name="ConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=C:\Desarrollo\NET\LeleGrid\App_Data\Database.mdf;Integrated Security=True;User Instance=True" providerName="System.Data.SqlClient"/>

Modifiiquen el path de "AttachDbFilename" de acuerdo a donde hayan bajado el ZIP.

En el archivo .aspx deberemos tener esto:


En el head:

<script type="text/javascript" src="../JavaScripts/protoype.js"></script>
        <script type="text/javascript" src="../JavaScripts/grillaV2.js"></script>

En el body o el content:

<CNC:Grilla runat="server" ID="grillaCategorias" NombreSector="COT" NombreGrilla="Categorias" NombreTabla="tblCategorias" />

Este control lo que hace es Mostrar los Campos de Busqueda por los cuales se van a filtrar los datos en la grilla.
Consta de un combo de "Campos" , que es el campo por el que se va a buscar el valor.
Y Otro de "Valor", que es el valor propiamente dicho.

Los parametros obligatorios que necesita son:

NombreSector: Como dije en la Introduccion del articulo, necesitaba una grilla para una intranet con multiples modulos/sectores. Este campo es para ello.
NombreGrilla: El nombre de la Grilla
NombreTabla: El nombre de la tabla.

Importante: No deben ser iguales ninguno de estos 3 parametros. El ID debe ser de la forma "grilla" + NombreGrilla.

Los parametros opcionales son:

OpcionesAvanzadas: Si tiene opciones avanzadas o no. TRUE/FALSE. Por default TRUE
OpcionesBasicas: Si tiene opciones basicas o no. TRUE/FALSE. Por default TRUE
CantRegistros: Cantidad de registros que se muestran por pagina. Por default 10
Oculto: Si se muestran los campos de busqueda o no. TRUE/FALSE. Por default FALSE
Paginacion: Si tiene paginacion o no. TRUE/FALSE. Por default TRUE

En el thead de la tabla lo que se hace es poner la cabecera de la Grilla. El width que se le asigna a cada columna es a su eleccion.
Si ademas se quiere que se puedan ordenar la tabla por esa columna, se le debe agregar el evento onclick a cada td.

Los parametros que recibe la funcion OrdenarTabla son: Indice de la Columna, Nombre de la Tabla, y Tipo de Ordenamiento (0=Numeros, 1=String y 2=Monedas) respectivamente.

        <table id="tblCategorias" class="grilla" cellspacing="0">
            <thead>
                <tr>
                    <td style="width: 90px; display: block;">Opciones</td>
                    <td style="cursor: pointer; width: 50%;" title="Ordenar por Nombre" onclick="OrdenarTabla(1,'tblCategorias', 1);">Nombre</td>
                    <td style="cursor: pointer; width: 50%;" title="Ordenar por Traducci&oacute;n" onclick="OrdenarTabla(2,'tblCategorias', 1);">Traducci&oacute;n</td>
                    <td style="width: 10px;">Activo</td>
                </tr>
            </thead>
            <tbody id="trFilasCategorias">
                <tr>
                    <td colspan="4">No se han encontrado resultados.</td>
                </tr>
            </tbody>
            <tfoot id="trCargandoCategorias" style="display:none;">
                <tr>
                    <td colspan="4" style="background-color:#fff;">
                        <CNC:Cargando ID="CargandoCategorias" runat="server" />
                    </td>
                </tr>
            </tfoot>
        </table>


Importante: El Id del TBody debe ser de la forma "trFilas" + NombreGrilla.
El Id del TFoot debe ser de la forma "trCargando" + NombreGrilla
El Id del control cargando debe ser de la forma "Cargando" + NombreGrilla.

En el foot lo que se hace es poner una fila con el control de Cargando, es un detalle grafico nomas pero que queda muy Lindo !
Cuando vean la Grilla en funcionamiento entenderan mejor..JA !

        <asp:HiddenField runat="server" ID="hidVuelveDeEdicion" />
        <asp:HiddenField runat="server" ID="hidValorPagina" />


Estos 2 campos ocultos sirven para que cuando la Grilla te redirecciona a otra pagina, y desde esa pagina se vuelva a la Grilla,
la Grilla se cargue devuelta con los valores con los que estaba

En el .aspx.cs o similar:

protected void Page_Load(object sender, EventArgs e) {

            if(!IsPostBack) {

                CargarBusqueda();
                Page.ClientScript.RegisterStartupScript(this.GetType(), "Load", "RecuperarBusqueda('COT','Categorias','tblCategorias', 10 ,true, true, true);",true);
                grillaCategorias.ValoresBusqueda.Items.Add(new ListItem("Nombre", "Nombre"));
                grillaCategorias.ValoresBusqueda.Items.Add(new ListItem("Traducción", "Traduccion"));
            }

            grillaCategorias.ValorBusqueda.Focus();
        }

        private void CargarBusqueda() {

            string valorPagina = Request.QueryString["valorPagina"];
            string valorCampo = Request.QueryString["valorCampo"];
            string valorBusqueda = Request.QueryString["valorBusqueda"];

            if(string.IsNullOrEmpty(valorPagina) || string.IsNullOrEmpty(valorCampo) || string.IsNullOrEmpty(valorBusqueda)) {
                hidVuelveDeEdicion.Value = "FALSE";
            }
            else {
                hidVuelveDeEdicion.Value = "TRUE";
                hidValorPagina.Value = valorPagina;
                grillaCategorias.ValorBusqueda.Text = valorBusqueda;
                grillaCategorias.ValoresBusqueda.SelectedValue = valorCampo;
            }
    }    

En grillaV2.js :


Es el archivo principal de la Grilla.
Las variables globales que contiene son las siguientes:

var indiceColAnt = 0;
        var classAnt;

        var _imgPath = "../Imagenes/Grilla/"; Esta es la unica que se debe modificar. Es el path de la carpeta donde se encuentran las imagenes

        var _tipoGrilla = null;
        var _sector = null;
        var _table = null;
        var _opcionesBasicas = null;
        var _opcionesAvanzadas = null;
        var _paginaActual = null;
        var _valorCantReg = null;
        var _valorCampo = null;
        var _valorBusqueda = null;
        var _realizaPaginacion = null;


Ademas de contener todas las funciones pertinentes, contiene una llamada EjecutarAccion .
Esta funcion se usa para las opciones avanzadas de la grilla.

Estilos:

Podemos tener estos CSS en los Themes o simplemente en un .css
Acordarse de cambiar las referencias a las imagenes.

    .grilla {
        background:Window;
        border:Solid 1px #c4bdb0;
        color:WindowText;
        font:Icon;
        width:100%;
    }
    .grilla thead{
        BACKGROUND: url(../../Imagenes/menuBg.gif) repeat-x;
        color:black;
    }
    .grilla td {
        padding:2px 5px;
    }
    .grilla thead td {
        border:1px solid;    
        border-color:ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
    }
    .grilla select {
        font-family:Verdana;
        font-size:7pt;
    }
    .descendente {/* columna de ordenamiento descendente */
        font-weight:bold;
        height:11px;
        width:11px;
    }
    .ascendente{ /* columna de ordenamiento ascendente */
        font-weight:bold;    
        height:11px;
        width:11px;
    }
    .AlternatingItemTemplate {/* filas pares */
        background-color:#fff;
        background-position:center center;
    }
    .ItemTemplate{/* filas impares */
        background-color:#fff;
        background-position:center center;
    }
    #cmbCantFilas{
        font-family:Verdana;
        font-size:8pt;
    }

Testing

Se comprobo su correcto funcionamiento es IE 6+ y Mozilla 1.5+

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

LeleHalfon
Web Developer
Argentina Argentina
Soy un analista de Sistemas y Desarrollador Web de Argentina.
Trabajo desde los 19 años desarrollando Intranets , sitios web y aplicaciones Desktop de Alta Calidad y Gran Performance.

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 3 Pin
RusselSSC27-Jan-11 12:21
memberRusselSSC27-Jan-11 12:21 
GeneralMy vote of 5 Pin
shanawazway14-Nov-10 2:32
membershanawazway14-Nov-10 2:32 
GeneralMy vote of 1 Pin
Arlen Navasartian1-Nov-10 7:09
memberArlen Navasartian1-Nov-10 7:09 
GeneralDownload Link Not Work Pin
markx00717-Jun-08 3:07
membermarkx00717-Jun-08 3:07 
GeneralRe: Download Link Not Work Pin
LeleHalfon17-Jun-08 3:10
memberLeleHalfon17-Jun-08 3:10 
GeneralExcelente!!!! Pin
Edward Ceballos24-May-08 4:49
memberEdward Ceballos24-May-08 4:49 
Generalsuggestion Pin
Zakaria Bin Abdur Rouf7-Mar-07 22:28
memberZakaria Bin Abdur Rouf7-Mar-07 22:28 
GeneralFelicitaciones! Pin
ajlopez1-Mar-07 22:52
memberajlopez1-Mar-07 22:52 
GeneralGreat work Pin
Louisa Chen1-Mar-07 14:50
memberLouisa Chen1-Mar-07 14:50 
GeneralRe: Great work Pin
LeleHalfon5-Mar-07 11:56
memberLeleHalfon5-Mar-07 11:56 
GeneralExcelente Pin
Selecters1-Mar-07 8:16
memberSelecters1-Mar-07 8:16 
GeneralBuen Trabajo ! Pin
mr. ajax1-Mar-07 6:44
membermr. ajax1-Mar-07 6:44 
GeneralEsta Super!! Pin
babalao1-Mar-07 6:28
memberbabalao1-Mar-07 6:28 
GeneralEnglish Pin
ArkonXX1-Mar-07 2:54
memberArkonXX1-Mar-07 2:54 
GeneralRe: English Pin
Zakaria Bin Abdur Rouf1-Mar-07 3:31
memberZakaria Bin Abdur Rouf1-Mar-07 3:31 
GeneralRe: English Pin
vodzurk1-Mar-07 5:12
membervodzurk1-Mar-07 5:12 
GeneralRe: English Pin
Zakaria Bin Abdur Rouf1-Mar-07 5:42
memberZakaria Bin Abdur Rouf1-Mar-07 5:42 
AnswerRe: English Pin
LeleHalfon1-Mar-07 5:53
memberLeleHalfon1-Mar-07 5:53 
GeneralRe: English Pin
Colin Angus Mackay1-Mar-07 6:18
mvpColin Angus Mackay1-Mar-07 6:18 
GeneralRe: English Pin
Mike Ellison2-Mar-07 10:36
memberMike Ellison2-Mar-07 10:36 
GeneralRe: English Pin
bigals4-Mar-07 11:58
memberbigals4-Mar-07 11:58 
GeneralRe: English Pin
vodzurk23-Sep-09 23:52
membervodzurk23-Sep-09 23:52 
GeneralRe: English Pin
LeleHalfon1-Mar-07 5:54
memberLeleHalfon1-Mar-07 5:54 
GeneralRe: English Pin
ajlopez1-Mar-07 22:50
memberajlopez1-Mar-07 22:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150731.1 | Last Updated 6 Mar 2007
Article Copyright 2007 by LeleHalfon
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid