MVC3: Helper WebGrid (3/3)

Días atrás, os hable de este helper(aquí y aquí). Hoy voy a dar mas detalles de la personalización que nos aporta.

La función GetHtml(), presenta un parámetro que es “Columns”, el cual es del tipo "IEnumerable<WebGridColumn>”.

Si no lo especificamos al invocar a la función, por defecto, se van a visualizar las distintas propiedades de nuestro origen de datos.

Si queremos personalizar las columnas, podríamos hacerlo de la siguiente manera:

1) Declaramos un objeto que Implemente IEnumerable<T> como puede ser una Lista:

List<WebGridColumn> columnas= new List<WebGridColumn>();

2) Agregar las columnas que deseemos a la lista

Para añadir una nueva columna, podemos hacerlo de la siguiente manera:

columnas.Add(new WebGridColumn {[Propiedades] });

[Propiedades]: podemos definir las siguientes propiedades de las columnas:

• ColumnName: Nombre de la Columna.
• Header: Nombre que va a visualizarse en la cabecera de la tabla.
• CanSort: Va a indicar si la tabla se puede ordenar o no, por la columna indicada.
• Style: Estilo que se va a aplicar a las celdas de esta columna.
• Format: Vamos a definir el contenido y el formato de cada celda.

Por defecto podemos agregar nuestras columnas del modelo de la siguiente manera:

columnas.Add(
    new WebGridColumn { 
        ColumnName = "EmployeeHireDate", 
        Header = "Hire Date", 
        CanSort = true, 
        Format = item => item.EmployeeHireDate }); 

El formato se realiza a través de una expresión Lambda y con un tipo dinámico.

Podemos añadir columnas, que sean del tipo MvcHtmlString, de la siguiente manera (el ejemplo es con un ActionLink):

columnas.Add(new WebGridColumn { 
    ColumnName = "Actions", 
    Header = "",  
    Format = item =>  Html.ActionLink("Edit", "Edit", new { id = item.EmployeeId })   });   

3) Enlazar la lista de columnas con la función.

Para mostrar las columnas que deseemos, se podrá realizar de la siguiente manera:

        <%= grid.GetHtml(columns: columnas);%>

A la hora de definir el WebGrid, me he dado cuenta de una peculiaridad, el valor por defecto del parámetro canSort es “True”, es decir, podremos ordenar para cada una de las columnas definidas.

Bien esto funciona, si no asignamos el parámetro Columns de GetHtml, o Habilitamos la Propiedad CanSort de las columnas que queramos que permitan ordenación.

Espero que os sea de utilidad.