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

I am using some javasript function for select all checkbox in gridview and for pop up view as well as close that popup.At the time of binding data in gridview you can observe the rows color of gridview is different.it is according to the field in database.

My GridView design view as:-

My Database Design is like Below:-

Now Here is my Table Defination:-

EmployeeID int Unchecked

EmployeeName varchar(50) Checked

Designation varchar(50) Checked

Location varchar(50) Checked

CityByColor varchar(50) Checked

My Table Defination Looks Like :-

My Table Data :-

Now We have to provide connectionstrigs in web.config.

Here I am providing My connection strings :-

<?xml version="1.0"?>

< connectionStrings>

< add name="ConnectionString"

connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\ShibashishDatabase.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 Checkbox and image and some BoundField for Data binding.

It Looks Like:-

My Source Code:-

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

Inherits="GridViewRowColorWithPopupDataUsingStringBuilder" %>

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

function SelectAllCheckboxes(chk) {

$('#<%=gdViewEmployeeDetails.ClientID ').find("input:checkbox").each(function () {

if (this != chk) {

this.checked = chk.checked;

}

});

}

</script>

$(document).ready(function () {

$('.popupBoxClose').click(function () {

$('#popup_div').fadeOut(500);

});

function ShowPopUp() {

$('#popup_div').fadeIn(500);

}

</script>

.div_popup_

{

display: none;

position: fixed;

_position: absolute;

height: auto;

width: 450px;

background: #FFFFFF;

left: 25px;

top: 50px;

z-index: 1;

margin-left: 15px;

border: 2px solid #999999;

padding: 6px;

font-size: 15px;

-moz-box-shadow: 0 0 5px #ff0000;

-webkit-box-shadow: 0 0 5px #ff0000;

position: absolute;

}

.popupBoxClose

{

font-size: 12px;

line-height: 15px;

right: 5px;

top: 5px;

position: absolute;

color: #6fa5e2;

font-weight: 500;

cursor: pointer;

}

.popupBoxClose a:hover

{

text-decoration: underline;

}

.Internaldiv

{

width: 100%;

height: auto;

float: left;

margin: auto;

margin-top: 4px;

margin-bottom: 2px;

}

</style>

</head>

<body>

<div>

<asp:GridView ID="gdViewEmployeeDetails" runat="server" AutoGenerateColumns="false"

CssClass="gridview" OnRowCommand="gdViewEmployeeDetails_RowCommand">

<asp:TemplateField ItemStyle-HorizontalAlign="Center">

<asp:Image ID="ImgView" runat="server" ImageUrl="~/images/SearchButton.gif" />

</HeaderTemplate>

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

CommandName="View" Text="View"></asp:LinkButton>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField ItemStyle-HorizontalAlign="Center">

<asp:CheckBox ID="chkSelectAll" runat="server" onclick="javascript:SelectAllCheckboxes(this);" />

</HeaderTemplate>

<asp:CheckBox ID="chkSelect" runat="server" />

<asp:HiddenField ID="hdnEmpID" runat="server" Value='<%#Eval("EmployeeID") %>' />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField ItemStyle-HorizontalAlign="Center">

<asp:Label ID="LblEmpName" runat="server" Text="Employee Name"></asp:Label>

</HeaderTemplate>

<%# Eval("EmployeeName")%>

</ItemTemplate>

</asp:TemplateField>

<asp:BoundField DataField="Designation" HeaderText="Designation" ItemStyle-HorizontalAlign="Center" />

<asp:BoundField DataField="Location" HeaderText="Location" ItemStyle-HorizontalAlign="Center" />

<asp:BoundField DataField="CityByColor" HeaderText="City By Color" ItemStyle-HorizontalAlign="Center" />

</Columns>

<div style="width: 100%; height: 24px; background-color: #153E7E; vertical-align: middle;

text-align: center; font-family: Calibri; font-size: 14px; font-weight: bold; color: White">

<asp:Label ID="lblEmpty" runat="server" Text="Sorry ! No Record found."></asp:Label>

</div>

</EmptyDataTemplate>

</asp:GridView>

</div>

<asp:Label ID="lblEmployeeDetails" runat="server"></asp:Label>

</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.Data;

using System.Data.SqlClient;

using System.Configuration;

using System.Text;

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

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

BindGridView();

}

//GridView RowCommand Event For Pop up view of that particular selected row

protected void gdViewEmployeeDetails_RowCommand(object sender, GridViewCommandEventArgs e)

{

if (e.CommandName == "View")

{

lblEmployeeDetails.Text = ShowAttendanceDetails(Convert.ToInt32(e.CommandArgument.ToString()));

ScriptManager.RegisterStartupScript(this, this.GetType(), "popup", "ShowPopUp()", true);

}

//Methods For Binding Data to Gridview

#region Bind Shibashish Carrier Details GridView

public void BindGridView()

{

string connection = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

SqlConnection con = new SqlConnection(connection);

string command = "select * from Employee";

SqlDataAdapter da = new SqlDataAdapter(command, con);

DataSet ds = new DataSet();

da.Fill(ds);

gdViewEmployeeDetails.DataSource = ds;

gdViewEmployeeDetails.DataBind();

//@@@@@ GridView Row Color According to database field @@@@@@@@@@

if (gdViewEmployeeDetails.Rows.Count > 0)

{

foreach (GridViewRow gvr in gdViewEmployeeDetails.Rows)

{

if (gvr.Cells[5].Text == "Green")

{

gvr.BackColor = System.Drawing.Color.DarkGreen;

}

if (gvr.Cells[5].Text == "Yellow")

{

gvr.BackColor = System.Drawing.Color.YellowGreen;

}

if (gvr.Cells[5].Text == "Red")

{

gvr.BackColor = System.Drawing.Color.DarkRed;

}

#endregion

//Show Details of that Row in a label through string Builder by selecting GridView row

private string ShowAttendanceDetails(int Employee_ID)

{

string connection = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

SqlConnection con = new SqlConnection(connection);

string command = "select * from Employee where EmployeeID=" + Employee_ID + "";

SqlDataAdapter da = new SqlDataAdapter(command, con);

DataSet ds = new DataSet();

da.Fill(ds);

StringBuilder sb = new StringBuilder();

if (ds.Tables[0].Rows.Count > 0)

{

sb.Append("<table style='width:100%; border:1px solid #153E7E'>");

sb.Append("<tr style='text-align:center'>");

sb.Append("<td style='height:20px; background-color:#153E7E;font-family:calibri;font-size:16px;font-weight:bold;color:white'>Shibashish Carrier Details</td>");

sb.Append("</tr>");

sb.Append("<tr>");

sb.Append("<td style='width:100%'>");

sb.Append("<table style='width:100%' cellpadding='0' cellspacing='0'>");

sb.Append("<tr style='font-family:Calibri;font-size:12px;background-color:#FDEEF4;height:20px'>");

sb.Append("<td style='text-align:left; padding-right:14px;font-weight:bold;width:40%' colspan='1'>Employee Name </td>");

sb.Append("<td style='padding-left:14px;font-family:calibri;font-size:13px;font-weight:bold;color:red' colspan='3'>" + ds.Tables[0].Rows[0]["EmployeeName"].ToString() + "</td>");

sb.Append("</tr>");

sb.Append("<tr style='font-family:Calibri;font-size:12px;background-color:#C6DEFF;height:20px'>");

sb.Append("<td style='text-align:left; padding-right:14px;font-weight:bold;width:40%' colspan='1'>Designation </td>");

sb.Append("<td style='padding-left:14px;' colspan='3'>" + ds.Tables[0].Rows[0]["Designation"].ToString() + "</td>");

sb.Append("</tr>");

sb.Append("<tr style='font-family:Calibri;font-size:12px;background-color:#FDEEF4;height:20px'>");

sb.Append("<td style='text-align:left; padding-right:14px;font-weight:bold;width:40%' colspan='1'>Location </td>");

sb.Append("<td style='padding-left:14px;' colspan='3'>" + ds.Tables[0].Rows[0]["Location"].ToString() + "</td>");

sb.Append("</tr>");

sb.Append("</table>");

sb.Append("</td>");

sb.Append("</tr>");

sb.Append("</table>");

}

return sb.ToString();

}

Now After running it Will Display As:-

Here I am Clicking View Button By which it will show that Row in pop up , it looks like Below Figure:-

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

Now By Click on Close Button It will Disappear the pop up Row As Below:-

Now you have the basic ideas how to show pop up without using modal pop up control.

Hope you will like this article.

Keep coding……

Thanks Shibashish Mohanty

Labels

Tuesday, September 4

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

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.

No comments:

Post a Comment

.