How to wrap text in GridView Bound columns in Asp.net.

Introduction:

Usually Gridview columns don’t wrap when the text content in the Gridview columns overflows the allocated width, it will keep expanding which makes the Gridview looks a bit odd.  To resolve this issue we need a custom implementation which will assign word wrap dynamically to Gridview columns. 

Implementation:

In this article I am going to explain how to apply word wrap for GridView’s BoundField columns. To add word wrap in Gridview we can make use of word-break css style property.

You can follow the below steps to assign the css word wrap to your Gridivew.

First add the below css style to your page.

<style type="text/css">
        .WordWrap {
            width: 100%;
            word-break: break-all;
        }
    </style>

Then add a div as a container control for you Gridivew. We need to assign the css style to this container div

<div class="WordWrap">
     <%--Add your gridview here--%>
</div>

That’s it now you have word wrap applied to your Gridview.

Complete sample code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style type="text/css">
        .WordWrap {
            width: 100%;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="WordWrap">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:GridView ID="GridView6" runat="server" AutoGenerateColumns="False" DataKeyNames="FirstName"
                ForeColor="#333333" GridLines="Both" Width="50%">
                <AlternatingRowStyle BackColor="White" />
                <Columns>
                    <asp:BoundField HeaderText="FirstName" DataField="FirstName">
                        <ItemStyle Width="35" />
                        <HeaderStyle Width="100px" />
                    </asp:BoundField>
                    <asp:BoundField HeaderText="LastName" DataField="LastName">
                        <ItemStyle Width="50" />
                        <HeaderStyle Width="100px" />
                    </asp:BoundField>
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>

C#:

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                //Assign the data to GridView
                GridView6.DataSource = this.Get_LongText();
                //Bind the Grid
                GridView6.DataBind();
            }
        }

        //Populate some dummy data
        public DataTable Get_LongText()
        {

            DataTable dt = new DataTable();
            DataRow dr;
            string Item = "ThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtext,ThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtext,Fruit2,Fruit3";
            string[] list = Item.Split(',');
            string Item2 = "ThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtext,ThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtext,Fruit2,Fruit3";
            string[] list2 = Item2.Split(',');
            dt.Columns.Add("FirstName", typeof(string));
            dt.Columns.Add("LastName", typeof(string));
            for (int i = 0; i < list.Length; i++)
            {
                dr = dt.NewRow();
                dr["FirstName"] = list[i];
                dr["LastName"] = list2[i];
                dt.Rows.Add(dr);
            }
            return dt;
        }

Demo Image

Advertisements

, , , ,

  1. #1 by Krishna on April 6, 2017 - 5:48 pm

    it worked perfectly….thanks

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: