Hoy me he dado cuenta al intentar utilizar los CSS Friendly Adapters para un GridView que en la Version 1.0 Final, no brinda la posibilidad de setearle por medio de estilos el tamaño de cada columna.
Lo primero que se me ocurrió fue agregarle a cada BoundField el atributo HeaderStyle-Width pensando que el adaptador me iba a agregar el width por cada columna, pero no fue así.
Ya me habia puesto a mirar el codigo del archivo GridViewAdapter.cs, pero como no estaba muy inspirado, me puse a buscar un poco en la web, donde me encontre con este thread. En el cual me he encontrado con la solución.
Resumiendo un poco el post, lo que debemos hacer es añadir un par de lineas al método WriteRows del archivo GridViewAdapter.cs, el cual lo adjunto al final de este post.
Lo que logramos es que al setear el atributo HeaderStyle-CssClass de cada BoundField del GridView, el Adapter agrege un class a cada <TH> de nuestra tabla, para que luego por medio de CSS podemos encontrar la columna y setearle su tamaño.
Además podemos añadir también un atributo ItemStyle-CssClass el cuál nos permitirá añadirle un class a cada una de nuestras <TD> , por ejemplo, para configurar la alineación del contenido de las columnas. En el siguiente ejemplo no incluyo esta opción pero el comportamiento es el mismo, incluso podriamos asignarle el mismo nombre de clase que para el <TH>.
Un ejemplo puede ser:
<asp:GridView ID="grdNews" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField HeaderText="ID" DataField="NewsLanguageID" HeaderStyle-CssClass="NewsID" />
<asp:BoundField HeaderText="Titulo" DataField="Title" HeaderStyle-CssClass="NewsTitle" />
</Columns>
</asp:GridView>
Lo que nos generaría un HTML similar a este:
<div class="AspNet-GridView">
<table cellpadding="0" cellspacing="0" summary="">
<thead>
<tr>
<th class="NewsID" scope="col">ID</th>
<th class="NewsTitle" scope="col">Titulo</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Titulo Novedades 1</td>
</tr>
<tr class="AspNet-GridView-Alternate">
<td>3</td>
<td>Titulo Novedades 2</td>
</tr>
</tbody>
</table>
</div>
Y luego en la hoja de estilos, algo así como:
.AspNet-GridView .NewsID
{
width:50%;
}
.AspNet-GridView .NewsTitle
{
width:50%;
}
A continuacion adjunto el método completo y el codigo agregado que se encuentra despues del comentario ” — Añadido —“
private void WriteRows(HtmlTextWriter writer, GridView gridView, GridViewRowCollection rows, string tableSection)
{
if (rows.Count > 0)
{
writer.WriteLine();
writer.WriteBeginTag(tableSection);
writer.Write(HtmlTextWriter.TagRightChar);
writer.Indent++;
foreach (GridViewRow row in rows)
{
writer.WriteLine();
writer.WriteBeginTag("tr");
string className = GetRowClass(gridView, row);
if (!String.IsNullOrEmpty(className))
{
writer.WriteAttribute("class", className);
}
// Uncomment the following block of code if you want to add arbitrary attributes.
/*
foreach (string key in row.Attributes.Keys)
{
writer.WriteAttribute(key, row.Attributes[key]);
}
*/
writer.Write(HtmlTextWriter.TagRightChar);
writer.Indent++;
foreach (TableCell cell in row.Cells)
{
DataControlFieldCell fieldCell = cell as DataControlFieldCell;
if ((fieldCell != null) && (fieldCell.ContainingField != null))
{
DataControlField field = fieldCell.ContainingField;
if (!field.Visible)
{
cell.Visible = false;
}
if ((field.ItemStyle != null) && (!String.IsNullOrEmpty(field.ItemStyle.CssClass)))
{
if (!String.IsNullOrEmpty(cell.CssClass))
{
cell.CssClass += " ";
}
cell.CssClass += field.ItemStyle.CssClass;
}
// -----------------------------
// -------- Añadido ------------
// -----------------------------
if (tableSection == "thead")
{
if ((field.HeaderStyle != null) && (!String.IsNullOrEmpty(field.HeaderStyle.CssClass)))
{
if (!String.IsNullOrEmpty(cell.CssClass))
{
cell.CssClass += " ";
}
cell.CssClass += field.HeaderStyle.CssClass;
}
}
else
{
if ((field.ItemStyle != null) && (!String.IsNullOrEmpty(field.ItemStyle.CssClass)))
{
if (!String.IsNullOrEmpty(cell.CssClass))
{
cell.CssClass += " ";
}
cell.CssClass += field.ItemStyle.CssClass;
}
}
// -----------------------------
// -----------------------------
}
writer.WriteLine();
cell.RenderControl(writer);
}
writer.Indent--;
writer.WriteLine();
writer.WriteEndTag("tr");
}
writer.Indent--;
writer.WriteLine();
writer.WriteEndTag(tableSection);
}
}
Juan Pablo Garcia Blog