Technical Solutions: Wrap Column in GridView

This article tells how to wrap text in GridView column. There is no inbuilt wrapping of text property is available in gridview column. If we put some long text without any space like URLs in a column of gridview, it doesn't wrap and column width increases to a width of maximum non space text like below

It should wrap text after certain specified character even if there is no space between characters like below screen shot.

Let's see how we can do this:

Step 1: Place a gridview in the aspx page

<asp:GridView ID="gvWrappinColumn" runat="server" AutoGenerateColumns="false">
<Columns>
Columns>
<HeaderStyle HorizontalAlign="Left" Height="20px" BackColor="#880015" ForeColor="#ffffff" Font-Bold="true" Font-Size=".75em" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<AlternatingRowStyle BackColor="#eeeeee" />
asp:GridView>

Step 2: Create GridViewItemTemplat class which will inherit ITemplate interface, implement InstantiateIn member of ITemplate, InstantiateIn member will create Literal object which will be placed in the gridview column to wrap the text. Literal needs to bind in every row of the column using DataBinding and EventHandler and then it needs to add in the container.

void ITemplate.InstantiateIn(System.Web.UI.Control container)
{
Literal lit = new Literal();
lit.DataBinding += new EventHandler(lit_DataBinding);
container.Controls.Add(lit);
}

Step 3: lit_DataBinding method will bind Literal control to every row, add
after certain characters as per need before assigning to Literal. Here i am putting
after every 40 characters.

protected void lit_DataBinding(object sender, EventArgs e)
{
int intNoOfCharacters =40;
Literal litColData = (Literal)sender;
GridViewRow container = (GridViewRow)litColData.NamingContainer;
object colDataValue = DataBinder.Eval(container.DataItem, strColName);
if (colDataValue != DBNull.Value)
{
string str = colDataValue.ToString();
int i = 0;
while (i < style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "> {
if (str.Contains("
"))
{
i = i + intNoOfCharacters + 5;
}
else
{
i = i + intNoOfCharacters;
}
if (i < style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "> {
str = str.Insert(i, "
");
}
}
litColData.Text = str;
}
}

Step 4: Create a constructor GridViewItemTemplate and declare two global variables ListItemType and string

ListItemType lstItemType;
string strColName;
public GridViewItemTemplate(ListItemType lstItmType, string colname)
{
lstItemType = lstItmType;
strColName = colname;
}

Step 5: Create GetData() method to bind data to GridView

private DataTable GetData()
{
DataTable dt = new DataTable("Data");
dt.Columns.Add(new DataColumn("ID"));
dt.Columns.Add(new DataColumn("Comments"));
dt.Rows.Add(1, "Testing column of GridView Wrapping1");
dt.Rows.Add(2, http://www.bing.com/search?q=microtsoft+visual+studio+2010&form=QBLH&qs=n&sk=);
dt.Rows.Add(3, "Testing column of GridView Wrapping2");
return dt;
}

Step 6: On Page_Load method of aspx page create a BoundField and TemplateField, create instance of GridViewItemTemplateclass and assign it to ItemTemplate of TemplateField.

protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = GetData();
BoundField bndFld = new BoundField();
bndFld.DataField = "id";
bndFld.HeaderText = "ID";
gvWrappinColumn.Columns.Add(bndFld);
TemplateField tmpltField = new TemplateField();
tmpltField.ItemTemplate = new GridViewItemTemplate(ListItemType.Item, "Comments");
gvWrappinColumn.Columns.Add(tmpltField);
gvWrappinColumn.DataSource = dt;
gvWrappinColumn.DataBind();
}