Mostrando las entradas con la etiqueta GridView. Mostrar todas las entradas
Mostrando las entradas con la etiqueta GridView. Mostrar todas las entradas

jueves, 2 de agosto de 2007

GridView - Paginacion y Ordenamiento simultaneo

Cuando trabajamos con el componente GridView las tareas mas comunes son las de Ordenamiento y de Paginación.
El hecho de lograr ambas tareas de forma simultanea en páginas ASP.NET presenta un pequeño cuidado; se debe mantener el índice de la página en la que estamos cuando establecemos un nuevo criterio de ordenamiento. De la misma forma debemos mantener el criterio de ordenamiento al cambiar el índice de la página a la que queremos acceder.

El código que sigue es un ejemplo o una de las formas, siempre hay mas de una forma :), de como se puede lograr esta tarea.-

- SortingPaging.aspx (nuestra página aspx)
    <asp:GridView ID="gridSample" runat="server" AutoGenerateColumns="false"
AllowPaging = "true" OnPageIndexChanging = "gridView_PageIndexChanging"
PageSize = "5"
AllowSorting = "true" OnSorting = "gridView_Sorting">
<Columns>
<asp:BoundField HeaderText="Nombre"
DataField="Nombre"
SortExpression = "Nombre" />
<asp:BoundField HeaderText="Edad"
DataField="edad"
SortExpression = "edad" />
</Columns>
</asp:GridView>
- SortingPaging.aspx.cs (nuestro archivo de code behind)
using System;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class SortingPaging : Page {
protected void Page_Load(object sender, EventArgs e) {
DataSet ds = new DataSet();
// Aqui llenamos nuestro DataSet
DataView dv = ds.Tables[0].DefaultView;
dv = sortDataView(dv, true);
gridSample.DataSource = dv;
gridSample.DataBind();
}

private string GridSampleSortDirection {
get { return ViewState["SortDirection"] as string ?? "ASC"; }
set { ViewState["SortDirection"] = value; }
}

private string GridSampleSortExpression {
get { return ViewState["SortExpression"] as string ?? "Nombre"; }
set { ViewState["SortExpression"] = value; }
}

private string getSortDirection() {
switch (GridSampleSortDirection) {
case "ASC":
GridSampleSortDirection = "DESC";
break;

case "DESC":
GridSampleSortDirection = "ASC";
break;
}
return GridSampleSortDirection;
}

protected void gridView_PageIndexChanging(object sender, GridViewPageEventArgs e) {
gridSample.DataSource = sortDataView(gridSample.DataSource as DataView, true);
gridSample.PageIndex = e.NewPageIndex;
gridSample.DataBind();
}

protected DataView sortDataView(DataView dataView, bool isPageIndexChanging) {
if (isPageIndexChanging) {
dataView.Sort = string.Format("{0} {1}",
GridSampleSortExpression,
GridSampleSortDirection);
} else {
dataView.Sort = string.Format("{0} {1}",
GridSampleSortExpression,
getSortDirection());
}
return dataView;
}

protected void gridView_Sorting(object sender, GridViewSortEventArgs e) {
GridSampleSortExpression = e.SortExpression;
int pageIndex = gridSample.PageIndex;
gridSample.DataSource = sortDataView(gridSample.DataSource as DataView, false);
gridSample.DataBind();
gridSample.PageIndex = pageIndex;
}
}

jueves, 15 de marzo de 2007

- Paging and Sorting

Las tareas de Paging y Sorting de forma simultanea en páginas ASP.NET presenta un pequeño cuidado; se debe mantener el índice de la página en la que estamos cuando establecemos un nuevo criterio de ordenamiento. De la misma forma debemos mantener el criterio de ordenamiento al cambiar el índice de la página a la que queremos acceder.

El código que sigue es un ejemplo o una de las formas, siempre hay mas de una forma :), de como se puede lograr esta tarea.-

- SortingPaging.aspx (nuestra página aspx)
    <asp:GridView ID="gridSample" runat="server" AutoGenerateColumns="false"
AllowPaging = "true" OnPageIndexChanging = "gridView_PageIndexChanging"
PageSize = "5"
AllowSorting = "true" OnSorting = "gridView_Sorting">
<Columns>
<asp:BoundField HeaderText="Nombre"
DataField="Nombre"
SortExpression = "Nombre" />
<asp:BoundField HeaderText="Edad"
DataField="edad"
SortExpression = "edad" />
</Columns>
</asp:GridView>
- SortingPaging.aspx.cs (nuestro archivo de code behind)
using System;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class SortingPaging : Page {
protected void Page_Load(object sender, EventArgs e) {
DataSet ds = new DataSet();
// Aqui llenamos nuestro DataSet
DataView dv = ds.Tables[0].DefaultView;
dv = sortDataView(dv, true);
gridSample.DataSource = dv;
gridSample.DataBind();
}

private string GridSampleSortDirection {
get { return ViewState["SortDirection"] as string ?? "ASC"; }
set { ViewState["SortDirection"] = value; }
}

private string GridSampleSortExpression {
get { return ViewState["SortExpression"] as string ?? "Nombre"; }
set { ViewState["SortExpression"] = value; }
}

private string getSortDirection() {
switch (GridSampleSortDirection) {
case "ASC":
GridSampleSortDirection = "DESC";
break;

case "DESC":
GridSampleSortDirection = "ASC";
break;
}
return GridSampleSortDirection;
}

protected void gridView_PageIndexChanging(object sender, GridViewPageEventArgs e) {
gridSample.DataSource = sortDataView(gridSample.DataSource as DataView, true);
gridSample.PageIndex = e.NewPageIndex;
gridSample.DataBind();
}

protected DataView sortDataView(DataView dataView, bool isPageIndexChanging) {
if (isPageIndexChanging) {
dataView.Sort = string.Format("{0} {1}",
GridSampleSortExpression,
GridSampleSortDirection);
} else {
dataView.Sort = string.Format("{0} {1}",
GridSampleSortExpression,
getSortDirection());
}
return dataView;
}

protected void gridView_Sorting(object sender, GridViewSortEventArgs e) {
GridSampleSortExpression = e.SortExpression;
int pageIndex = gridSample.PageIndex;
gridSample.DataSource = sortDataView(gridSample.DataSource as DataView, false);
gridSample.DataBind();
gridSample.PageIndex = pageIndex;
}
}

jueves, 1 de marzo de 2007

- Tooltips en columnas de GridView

Muchas veces por razones de espacio necesitamos poner nombres abreviados o acrónimos en las cabeceras de nuestros GridViews. Para enriquecer la experiencia de usuario podemos agregar tooltips a estas cabeceras de una forma muy sencilla de modo de proveer al usuario el nombre completo o mas descriptivo para determinado campo mostrado.

Pre-Requisitos:
* Tenemos establecida la conexión a la base de datos.
* Tenemos un DataSet con los datos para realizar el Binding al Dataview.
* Tenemos los datos en el gridview a traves de Databind().

Elementos Clave:
* Habilitar la propiedad HtmlEncode a false en cada campo enlazado.
* Utilizar elementos HTML en la propiedad HeaderText.

He aquí nuesto código:
- products.aspx (Nuestra página aspx)

<asp:gridview id="gvProducts" runat="server" autogeneratecolumns="false">
<Columns>
<asp:BoundField
HeaderText="Producto"
DataField="name"/>
<asp:BoundField
HtmlEncode="false"
HeaderText="&lt;div title='Cantidad'> Cant. </div>"
DataField="qty"/>
<asp:BoundField
HtmlEncode="false"
HeaderText="&lt;div title='Precio'> $ </div>"
DataField="price"/>
</Columns>
</asp:gridview>
Esta es solo una de las formas de realizarlo, otra forma es utilizando el tag <acronym> de HTML.