DotNetOcean: How to Break the Text in a Gridview

Introduction:-

Here I have explained how to break text in gridview.

Description:-

In my previous article I have explained Upload a Excel file and display it in a gridview as well as displaythis excel sheet from a starting row to ending row , Different ways to Bind Data in a TextBox FromGridview Cells by Click on Select Button Using Both RowCommand AndSelectedIndexChanged Event , How to make radio buttons insidea gridview as single selection using Javascript? , TextBox TextChanged Event Insidea GridView Using JavaScript , How to get row number fromgridview on textbox change event using javascript without page refreshing , Binding Second Gridview Byselecting First Gridview Record .

Here I will explain how to break the text in gridview in asp.net.When we have fixed the gridview width and height,then if one of the column text exceed the width ,it will display as unprofessional ,to avoid this we have to break that long text.

I will explain you with a suitable example where you can find the gridview with exact text as well as breaking text.

First I am going to show you without breaking text. For this I have taken one gridview and bind that gridview from database as shown below.

Here is My DataBase Records:-

Here is My Source Code:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ParagraphRecord.aspx.cs"

Inherits="ParagraphRecord" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<asp:GridView ID="grdEmployeesAdded" runat="server" CssClass="gridview" AutoGenerateColumns="false"

Width="1009px">

<Columns>

<asp:TemplateField>

<HeaderTemplate>

<tr style="background-color: Green;">

<th scope="col">

EMPLOYEE NAME

</th>

<th scope="col">

DESIGNATION

</th>

<th scope="col">

DEPARTMENT

</th>

</tr>

</HeaderTemplate>

<ItemTemplate>

<tr style="background-color: Gray;">

<td>

<asp:LinkButton ID="lblEmployeeName" runat="server" CommandArgument='<%#Eval("ID") %>'

CommandName="View" Text='<%#Eval("Name") %>'></asp:LinkButton>

</td>

<td valign="top">

<asp:Label ID="lblDesignation" runat="server" Text='<%#Eval("Designation") %>'></asp:Label>

</td>

<td valign="top">

<asp:Label ID="lblDepartment" runat="server" Text='<%#Eval("Department") %>'></asp:Label>

</td>

</tr>

</ItemTemplate>

</asp:TemplateField>

</Columns>

<EmptyDataTemplate>

<div style="width: 100%; height: 24px; border: 1px Solid #333333; text-align: center;

vertical-align: middle">

<asp:Label ID="lblEmptyMessage" runat="server" Text="No Record Found" Style="font-family: Calibri;

font-size: 14px; font-weight: bold; height: 24px"></asp:Label>

</div>

</EmptyDataTemplate>

</asp:GridView>

</form>

</body>

</html>

Here is My CodeBehind:-

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

public partial class ParagraphRecord : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

BindFirstGridView();

}

public void BindFirstGridView()

{

DataTable dt = new DataTable();

SqlConnection con = new SqlConnection

(System.Configuration.ConfigurationManager.ConnectionStrings

["ShibashishColapsibleGridDataBaseConnectionString"].ConnectionString);

SqlCommand com = new SqlCommand("select * from Employee", con);

SqlDataAdapter da = new SqlDataAdapter(com);

da.Fill(dt);

grdEmployeesAdded.DataSource = dt;

grdEmployeesAdded.DataBind();

//foreach (GridViewRow gvr in grdEmployeesAdded.Rows)

//{

// Label lblDepartment = (Label)gvr.FindControl("lblDepartment");

// if (lblDepartment.Text.Length > 3)

// {

// lblDepartment.Text = lblDepartment.Text.Substring(0, 3) + "</br>" + lblDepartment.Text.Substring(3);

// }

//}

}

After Running this page it will Display as:-

Without Break Text Image

Now Uncomment the Code as Below:-

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

public partial class ParagraphRecord : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

BindFirstGridView();

}

public void BindFirstGridView()

{

DataTable dt = new DataTable();

SqlConnection con = new SqlConnection

(System.Configuration.ConfigurationManager.ConnectionStrings

["ShibashishColapsibleGridDataBaseConnectionString"].ConnectionString);

SqlCommand com = new SqlCommand("select * from Employee", con);

SqlDataAdapter da = new SqlDataAdapter(com);

da.Fill(dt);

grdEmployeesAdded.DataSource = dt;

grdEmployeesAdded.DataBind();

foreach (GridViewRow gvr in grdEmployeesAdded.Rows)

{

Label lblDepartment = (Label)gvr.FindControl("lblDepartment");

if (lblDepartment.Text.Length > 3)

{

//I am passing lenth as 3,only 3 letter will display in first and the rest is in next row like that

we can break the second row also.

lblDepartment.Text = lblDepartment.Text.Substring(0, 3) + "</br>" +

lblDepartment.Text.Substring(3);

}

After Running this page it will Display With Breaks:-

I have explained all the functionality briefly, if still you have some doubt or you need the

source code then mail me on my mail id shibashishm@gmail.com

Keep coding….

Thanks Shibashish Mohanty

Labels

Monday, October 29

How to Break the Text in a Gridview

I will explain you with a suitable example where you can find the gridview with exact text as well as breaking text.

First I am going to show you without breaking text. For this I have taken one gridview and bind that gridview from database as shown below.

No comments:

Post a Comment

.