Monday, October 29

How to Break the Text in a Gridview


Introduction:-

                  Here I have explained how to break text in gridview.

Description:-


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:-




Table 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:-

 
With Break Text Image

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

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

ShibashishMnty
shibashish mohanty