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.

Binding Second Gridview By selecting First Gridview Record

Introduction:-

                  Here I have explained how to bind a child gridview by selecting a row of parent gridview in asp.net.

Description:-

                  In my previous article I have explained Different ways to bind data in a textBox from gridview cells by click on select button using both row command and selected index changed event , How to get row number from gridview on textbox change event using javascript without page refreshing , How to show a pop up with gridview row data using string builder as well as how to change gridview row color dynamically? , Gridview row editing, updating, deleting and row command events , Upload a excel file and display it in a gridview as well as display this excel sheet from a starting row to ending row, Adding dynamic rows in asp.net gridview control with textboxes and with delete functionality , Without data showing gridview with empty textbox to submit data into database , Using asp.net gridview EmptyDataTemplate and FooterTemplate add record to database , how to insert images into database and how to retrieve and bind images to gridview using asp.net (or)save and retrieve images from database using asp.net .

                In this article I have taken two gridview control where I am displaying the selected row data of first gridview in second gridview.

Data Binding in DropDownList Using Jquery

Introduction:-

                     Here I have explained how to bind data in dropdownlist using jQuery.

Description:-

                  In my previous article I have explained How to calculate difference between two dates using JQuery? , How to get Checkboxlist valuewith comma Separator by jquery.

Here I will explain how to bind dropdownlist using jQuery.As you wnow it will be light weight than other processes.

 Here I am doing one simple web application for binding data to dropdownlist  through JQuery.

 For this first you have to add one web page name it as your choice,here I have named it as JqueryDropDownList.aspx

How to return List of Array

Introduction:-

                     Here I have explained how to return array list in webmethod.

Description:-

                  In my previous article I have explained AutoComplete text using Jquery and web services , How to bind state by selecting country dropdownlist using webmethod in Asp.net , How to select, update, insert data in database using Json, Jquery and Webservices , Ajax tab inside a gridview , Data binding in dropdownlist using Jquery , How to calculate differencebetween two dates using JQuery?

Here I am going to explain how return array list. If you are using Ajax method to bind a

dropdownlist or any grid controls, then you have to return some value from webmethod.  

Where as you must return a list value to your ajax success function to bind that control.

For this I am using here array list as return value.

Collapsible Gridview using jquery

Introduction:-

               
                Here I have explained how to create a collapsible gridview having child gridview     control inside it using jquery.

Description:-                
              
                    In this article I will explain how to create a gridview having colapsable functionality using jquery.

Sometimes we are showing all records in a form which is not looks better in design prosperous. To overcome it we have to collapse these records until a user will not expand it.

I am going to explain the entire process step by steps.

I have used checkbox for collapse or expand. If you will checked it ,It will expand and will show you the hidden data or controls inside that and if you unchecked then it will collapse as usual.

Here I am creating a simple web application of  collapsible Gridview .I have taken two gridview control ,the parent gridview  showing data of Employee and the child gridview populating some fields for providing feedback against each employee.

How to Show a pop up with Grid View row data using String Builder ? and How to change Gridview Row Color Dynamically ?

Introduction:-

                     Here I have explained how to show gridview row data in pop up  using string builder as well as I have explained how to change gridview row color dynamically.

Description:-

                  In this article I will explain how to show a pop up view like modal pop up using string builder. For this I have taken one gridview control and checkbox inside that gridview. Here I have also explained how to select all checkboxes at a time and also uncheck.

I will explain it more briefly with my source code and table design structure.

Most of the developer uses modal popup control to show records,but I am providing one new procedures to show record in the same manner.

As I have discussed, here I am going to explain, how to show gridview row data in pop up using String Builder.

I have used here one aspx page with a gridview control. Also I have used two images as CloseTab2.jpg and SearchButton.gif in my images folder and .js script in Scripts folder and one sql server database ShibashishDatabase.mdf in App_Data folder as shown Below.

SqlDateTime overflow. Must be between 1/1/1753 12:00:00 AM and 12/31/9999 11:59:59 PM.

You will get this error because of the datetime Format. You can try like this:-

<asp:TextBox ID="txtdate" runat="server"></asp:TextBox>
                       <cc1:CalendarExtender ID="CalendarDateFrom" runat="server" TargetControlID="txtdate"
                           Format="dd/MM/yyyy">
                       </cc1:CalendarExtender>

//************ To Change the Date format from dd/MM/yyyy to MM/dd/yyyy************//

            string Date_Of_Punch = txtdate.Text;

            System.Globalization.DateTimeFormatInfo datePunch = new System.Globalization.DateTimeFormatInfo();

            datePunch.ShortDatePattern = "dd/MM/yyyy";

            DateTime Punch = Convert.ToDateTime(Date_Of_Punch, datePunch);

//*******pass your date below for inserting

            Attendance.Punch_Date = Punch;

//************ To Change the Date format from dd/MM/yyyy to MM/dd/yyyy************//

Thanks Shibashish Mohanty

Adding And Removing Dynamic Rows in ASP.Net GridView Control

Here I am going to explain you how to add dynamic rows in a gridview control by click on Add button and simultaneously Remove dynamic rows from gridview Control by click on Remove button. I have used here one aspx page with a gridview control.Also I have used two images as Add.jpg and Remove.jpg in my images folder as shown Below:-

My GridView View As:-

My Database  Design is like Below:-

Now Here is my Table Defination:-

Reference_ID int        Unchecked

Title    varchar(10)    Checked

First_Name    varchar(15)    Checked

Middle_Name            varchar(15)    Checked

Last_Name     varchar(15)    Checked

Reference_Type        varchar(15)    Checked

Emp_Member_ID      int        Checked

Emp_Member_Type varchar(15)    Checked

Created_On   datetime         Checked

Created_By    int        Checked

Modified_On  datetime         Checked

Modified_By  int        Checked

Is_Active        bit        Checked

Is_Deleted      bit        Checked

My Table Defination Looks Like :-

Now  We have to provide connectionstrigs in web.config.

Here I am providing My connection strings :-

<?xml version="1.0"?>

<configuration>

  <connectionStrings>

    <add name="ShibashishConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\ShibashishAddRemoveRowFromGrid.mdf;Integrated Security=True;User Instance=True"

      providerName="System.Data.SqlClient" />

  </connectionStrings>

  <system.web>

    <compilation debug="true" targetFramework="4.0"/>

  </system.web>

</configuration>

Now come to the Design Part. where you have to take one Gridview From Your ToolBox and and use your required controls inside that gridview.Here I am using Two DropDownList and Three TextBox Controls and Two Image Button controls as Add and Remove .

It Looks Like:-

My Source Code:-

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

    Inherits="ShibashishAddRemoveRowFromGridView" %>

<!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>Shibashish Mohanty</title>

</head>

<body>

    <h1>

        Om Namah Shivaya</h1>

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

    <div>

        <asp:GridView ID="GridGuardians" runat="server" AutoGenerateColumns="False" BorderColor="#507CD1"

            BorderStyle="Solid" BorderWidth="1" CellPadding="4" Font-Names="Verdana" Font-Size="9pt"

            ForeColor="#333333" GridLines="None" OnRowCommand="GridGuardians_RowCommand"

            ShowHeader="false">

            <Columns>

                <asp:TemplateField>

                    <ItemTemplate>

                        <table cellpadding="-1" cellspacing="-1" style="border: none;">

                            <tr>

                                <td>

                                    <asp:ImageButton ID="imgBtnAdd" runat="server" CausesValidation="false" CommandName="Add"

                                        Height="8" ImageUrl="~/images/Add.jpg" ToolTip="Add New Row" Visible='<%# Eval("ShowAddButton") %>'

                                        Width="8" />

                                </td>

                            </tr>

                            <tr>

                                <td>

                                    <asp:ImageButton ID="imgBtnRemove" runat="server" CausesValidation="false" CommandName="Remove"

                                        Height="8" ImageUrl="~/images/Remove.jpg" ToolTip="Delete Row" Visible='<%# Eval("ShowRemoveButton") %>'

                                        Width="8" />

                                </td>

                            </tr>

                        </table>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField>

                    <ItemTemplate>

                        <asp:DropDownList ID="ddlSelectType" runat="server" Text='<%#Eval("Reference_Type") %>'>

                            <asp:ListItem>Select</asp:ListItem>

                            <asp:ListItem>Father</asp:ListItem>

                            <asp:ListItem>Son</asp:ListItem>

                            <asp:ListItem>Brother</asp:ListItem>

                            <asp:ListItem>Spouse</asp:ListItem>

                        </asp:DropDownList>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField>

                    <ItemTemplate>

                        <asp:DropDownList ID="DdlGridTitle" runat="server" Text='<%#Eval("Title") %>'>

                            <asp:ListItem>Select</asp:ListItem>

                            <asp:ListItem>Mr</asp:ListItem>

                            <asp:ListItem>Mrs</asp:ListItem>

                            <asp:ListItem>Shree</asp:ListItem>

                            <asp:ListItem>Miss</asp:ListItem>

                        </asp:DropDownList>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField>

                    <ItemTemplate>

                        <asp:TextBox ID="TxtGuardFirstName" runat="server" Text='<%#Eval("First_Name") %>'

                            Width="120"></asp:TextBox>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField>

                    <ItemTemplate>

                        <asp:TextBox ID="TxtGuardMiddleName" runat="server" Text='<%#Eval("Middle_Name") %>'

                            Width="120"></asp:TextBox>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField>

                    <ItemTemplate>

                        <asp:TextBox ID="TxtGuardLastName" runat="server" Text='<%#Eval("Last_Name") %>'

                            Width="120"></asp:TextBox>

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

        </asp:GridView>

    </div>

    </form>

</body>

</html>

Here is my Code Behind:-

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

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

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            this.BindData();

            if (GridGuardians.Rows.Count == 0)

            {

                SetDefaultRow();

            }

        }

    }

//GridView RowCommand Event For Adding and Removing Rows From Gridview

    protected void GridGuardians_RowCommand(object sender, GridViewCommandEventArgs e)

    {

        if (e.CommandName == "Add")

        {

            GridViewRow gridRow = (GridViewRow)(((ImageButton)e.CommandSource).NamingContainer);

            int RowIndex = gridRow.RowIndex;

            DataTable dt = new DataTable();

            DataColumn ShowButton = new DataColumn("ShowAddButton", typeof(bool));

            DataColumn ShowRemoveButton = new DataColumn("ShowRemoveButton", typeof(bool));

            DataColumn dcSelectTypeID = new DataColumn("Reference_Type", typeof(string));

            DataColumn dcSelectTitle = new DataColumn("Title", typeof(string));

            DataColumn dcFirstname = new DataColumn("First_Name", typeof(string));

            DataColumn dcMiddlename = new DataColumn("Middle_Name", typeof(string));

            DataColumn dcLastname = new DataColumn("Last_Name", typeof(string));

            dt.Columns.Add(dcSelectTypeID);

            dt.Columns.Add(dcFirstname);

            dt.Columns.Add(dcMiddlename);

            dt.Columns.Add(dcLastname);

            dt.Columns.Add(ShowRemoveButton);

            dt.Columns.Add(ShowButton);

            dt.Columns.Add(dcSelectTitle);

            foreach (GridViewRow dr in GridGuardians.Rows)

            {

                DataRow dtrow = dt.NewRow();

                DropDownList ddlSelectType = (DropDownList)dr.FindControl("ddlSelectType");

                dtrow["Reference_Type"] = ddlSelectType.SelectedItem.Text;

                DropDownList ddlSelectTitle = (DropDownList)dr.FindControl("DdlGridTitle");

                dtrow["Title"] = ddlSelectTitle.SelectedItem.Text;

                TextBox txtFirstname = (TextBox)dr.FindControl("TxtGuardFirstName");

                dtrow["First_Name"] = txtFirstname.Text;

                TextBox txtMiddleName = (TextBox)dr.FindControl("TxtGuardMiddleName");

                dtrow["Middle_Name"] = txtMiddleName.Text;

                TextBox txtLastname = (TextBox)dr.FindControl("TxtGuardLastName");

                dtrow["Last_Name"] = txtLastname.Text;

                ImageButton showbutton = (ImageButton)dr.FindControl("imgBtnAdd");

                dtrow["ShowAddButton"] = false;

                ImageButton showRemovebutton = (ImageButton)dr.FindControl("imgBtnRemove");

                dtrow["ShowRemoveButton"] = false;

                dt.Rows.Add(dtrow);

            }

            DataRow newRow = dt.NewRow();

            newRow["Reference_Type"] = "Select";

            newRow["Title"] = "Select";

            newRow["First_Name"] = "";

            newRow["Middle_Name"] = "";

            newRow["Last_Name"] = "";

            newRow["ShowAddButton"] = true;

            newRow["ShowRemoveButton"] = true;

            dt.Rows.Add(newRow);

            GridGuardians.DataSource = dt;

            GridGuardians.DataBind();

        }

        else if (e.CommandName == "Remove")

        {

            GridViewRow gridRow = (GridViewRow)(((ImageButton)e.CommandSource).NamingContainer);

            int RowIndex = gridRow.RowIndex;

            DataTable dt1 = new DataTable();

            DataColumn ShowButton = new DataColumn("ShowAddButton", typeof(bool));

            DataColumn ShowRemoveButton = new DataColumn("ShowRemoveButton", typeof(bool));

            DataColumn dcSelectTypeID = new DataColumn("Reference_Type", typeof(string));

            DataColumn dcSelectTitle = new DataColumn("Title", typeof(string));

            DataColumn dcFirstname = new DataColumn("First_Name", typeof(string));

            DataColumn dcMiddlename = new DataColumn("Middle_Name", typeof(string));

            DataColumn dcLastname = new DataColumn("Last_Name", typeof(string));

            dt1.Columns.Add(dcSelectTypeID);

            dt1.Columns.Add(dcFirstname);

            dt1.Columns.Add(dcMiddlename);

            dt1.Columns.Add(dcLastname);

            dt1.Columns.Add(ShowRemoveButton);

            dt1.Columns.Add(ShowButton);

            dt1.Columns.Add(dcSelectTitle);

            foreach (GridViewRow dr in GridGuardians.Rows)

            {

                DataRow dtrow = dt1.NewRow();

                DropDownList ddlSelectType = (DropDownList)dr.FindControl("ddlSelectType");

                dtrow["Reference_Type"] = ddlSelectType.SelectedItem.Text;

                DropDownList ddlSelectTitle = (DropDownList)dr.FindControl("DdlGridTitle");

                dtrow["Title"] = ddlSelectTitle.SelectedItem.Text;

                TextBox txtFirstname = (TextBox)dr.FindControl("TxtGuardFirstName");

                dtrow["First_Name"] = txtFirstname.Text;

                TextBox txtMiddleName = (TextBox)dr.FindControl("TxtGuardMiddleName");

                dtrow["Middle_Name"] = txtMiddleName.Text;

                TextBox txtLastname = (TextBox)dr.FindControl("TxtGuardLastName");

                dtrow["Last_Name"] = txtLastname.Text;

                ImageButton showbutton = (ImageButton)dr.FindControl("imgBtnAdd");

                dtrow["ShowAddButton"] = false;

                ImageButton showRemovebutton = (ImageButton)dr.FindControl("imgBtnRemove");

                dtrow["ShowRemoveButton"] = false;

                dt1.Rows.Add(dtrow);

            }

            dt1.Rows.RemoveAt(RowIndex);

            GridGuardians.DataSource = dt1;

            GridGuardians.DataBind();

            if (GridGuardians.Rows.Count > 0)

            {

                ImageButton imgLast = (ImageButton)GridGuardians.Rows[GridGuardians.Rows.Count - 1].FindControl("imgBtnRemove");

                imgLast.Visible = true;

                ImageButton imgFirst = (ImageButton)GridGuardians.Rows[GridGuardians.Rows.Count - 1].FindControl("imgBtnAdd");

                imgFirst.Visible = true;

            }

        }

    }

//Methods For Binding Data to Gridview

    #region BindGurdians GridView

    private void BindData()

    {

        string strConnString = ConfigurationManager.ConnectionStrings["ShibashishConnectionString"].ConnectionString;

        DataTable dtSelect = new DataTable();

        using (SqlConnection con = new SqlConnection(strConnString))

        {

            string strQuery = "SELECT [Reference_ID], [Title], [First_Name], [Middle_Name], [Last_Name], [Reference_Type], [Emp_Member_Type] FROM [Shibashish'sGuardians]";

            SqlCommand cmd = new SqlCommand(strQuery);

            using (SqlDataAdapter sda = new SqlDataAdapter())

            {

                cmd.Connection = con;

                con.Open();

                sda.SelectCommand = cmd;

                sda.Fill(dtSelect);

                DataTable dt = new DataTable();

                DataColumn ShowButton = new DataColumn("ShowAddButton", typeof(bool));

                DataColumn ShowRemoveButton = new DataColumn("ShowRemoveButton", typeof(bool));

                DataColumn dcSelectTypeID = new DataColumn("Reference_Type", typeof(string));

                DataColumn dcSelectTitle = new DataColumn("Title", typeof(string));

                DataColumn dcFirstname = new DataColumn("First_Name", typeof(string));

                DataColumn dcMiddlename = new DataColumn("Middle_Name", typeof(string));

                DataColumn dcLastname = new DataColumn("Last_Name", typeof(string));

                dt.Columns.Add(dcSelectTypeID);

                dt.Columns.Add(dcFirstname);

                dt.Columns.Add(dcMiddlename);

                dt.Columns.Add(dcLastname);

                dt.Columns.Add(ShowRemoveButton);

                dt.Columns.Add(ShowButton);

                dt.Columns.Add(dcSelectTitle);

                foreach (DataRow dr in dtSelect.Rows)

                {

                    DataRow newRow = dt.NewRow();

                    newRow["Reference_Type"] = dr["Reference_Type"].ToString();

                    newRow["Title"] = dr["Title"].ToString();

                    newRow["First_Name"] = dr["First_Name"].ToString();

                    newRow["Middle_Name"] = dr["Middle_Name"].ToString();

                    newRow["Last_Name"] = dr["Last_Name"].ToString();

                    newRow["ShowAddButton"] = true;

                    newRow["ShowRemoveButton"] = true;

                    dt.Rows.Add(newRow);

                }

                GridGuardians.DataSource = dt;

                GridGuardians.DataBind();

            }

        }

    }

    #endregion

//Show Default Row if there is no data inside the Gridview

    #region Default Row Method

    public void SetDefaultRow()

    {

        DataTable dt = new DataTable();

        DataColumn ShowButton = new DataColumn("ShowAddButton", typeof(bool));

        DataColumn ShowRemoveButton = new DataColumn("ShowRemoveButton", typeof(bool));

        DataColumn dcSelectTypeID = new DataColumn("Reference_Type", typeof(string));

        DataColumn dcSelectTitle = new DataColumn("Title", typeof(string));

        DataColumn dcFirstname = new DataColumn("First_Name", typeof(string));

        DataColumn dcMiddlename = new DataColumn("Middle_Name", typeof(string));

        DataColumn dcLastname = new DataColumn("Last_Name", typeof(string));

        dt.Columns.Add(dcSelectTypeID);

        dt.Columns.Add(dcFirstname);

        dt.Columns.Add(dcMiddlename);

        dt.Columns.Add(dcLastname);

        dt.Columns.Add(ShowRemoveButton);

        dt.Columns.Add(ShowButton);

        dt.Columns.Add(dcSelectTitle);

        DataRow newRow = dt.NewRow();

        newRow["Reference_Type"] = "Select";

        newRow["Title"] = "Select";

        newRow["First_Name"] = "";

        newRow["Middle_Name"] = "";

        newRow["Last_Name"] = "";

        newRow["ShowAddButton"] = true;

        newRow["ShowRemoveButton"] = true;

        dt.Rows.Add(newRow);

        GridGuardians.DataSource = dt;

        GridGuardians.DataBind();

    }

    #endregion

}

Now After running it Will Display As:-

Here I am Clicking Plus Button By which it will add a new Row and it looks like Below Figure:-

Now Again I am Clicking on Plus Button It will add Another Row as Shown Below:-

Now By Click on Remove Button It will Remove One Row As Below:-

If you want To Save All Data Into DataBase Then Go for this link

Thanks Shibashish Mohanty