Wednesday, August 20, 2008

Show Ellipsis Text in GridView

protected void Page_Load(object sender, EventArgs e)
{
// ... ...
gv1.Style["TABLE-LAYOUT"] = "fixed";
}

protected void gv1_RowCreated(object sender, GridViewRowEventArgs e)
{
foreach (TableCell cell in e.Row.Cells)
{
cell.Wrap = false;
cell.Style["overflow"] = "hidden";
cell.Style["text-overflow"] = "ellipsis";
}
}

// Showing full text tooltip in each cell
protected void gv1_RowDataBound(object sender, GridViewRowEventArgs e)
{
foreach (TableCell cell in e.Row.Cells)
{
cell.ToolTip = cell.Text;
}
}

The above code just shows what style settings need to be set for the ellipsis effect. It is not recommended to write product code like this. Keep in mind that
gv1.Style["TABLE-LAYOUT"] = "fixed";
actually sets "TABLE-LAYOUT" style property of HTML Table. Therefore, this should be done in a CSS file: not only to separate UI part from logic part, but to make the data travel between server and client much light-weighted. (To demonstrate the last part, look at the source of the rendered HTML to see the table cell styles are duplicated across all the tags.)

2 comments:

Alaa Aref said...

Thank you dude. (Y)

Alaa Aref said...

Thank you dude (Y)