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 ?


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.


Solution overview

 

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


My Database  Design is like Below:-
Table Structure


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


My Table Data :-

Table Data



Now  We have to provide connectionstrigs in web.config.

Here I am providing My connection strings :-

<?xml version="1.0"?>
<configuration>
 <configuration>
 < 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    function SelectAllCheckboxes(chk) {
       $('#<%=gdViewEmployeeDetails.ClientID ').find("input:checkbox").each(function () {
                if (this != chk) {
                    this.checked = chk.checked;
                }
            });
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.popupBoxClose').click(function () {
                $('#popup_div').fadeOut(500);
            });
        });
        function ShowPopUp() {
            $('#popup_div').fadeIn(500);
        }
       
    </script>
    <style type="text/css">
        .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>
<form id="form1" runat="server">
<div>
   <div class="Internaldiv">
    <asp:GridView ID="gdViewEmployeeDetails" runat="server" AutoGenerateColumns="false"
                CssClass="gridview" OnRowCommand="gdViewEmployeeDetails_RowCommand">
                <Columns>
                    <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                       <HeaderTemplate>
                         <asp:Image ID="ImgView" runat="server" ImageUrl="~/images/SearchButton.gif" />
                        </HeaderTemplate>
                        <ItemTemplate>
               <asp:LinkButton ID="lnkEmpID" runat="server" CommandArgument='<%# Eval("EmployeeID") %>'
                                CommandName="View" Text="View"></asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                        <HeaderTemplate>
      <asp:CheckBox ID="chkSelectAll" runat="server" onclick="javascript:SelectAllCheckboxes(this);" />
                        </HeaderTemplate>
                        <ItemTemplate>
                  <asp:CheckBox ID="chkSelect" runat="server" />
                      <asp:HiddenField ID="hdnEmpID" runat="server" Value='<%#Eval("EmployeeID") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                        <HeaderTemplate>
                            <asp:Label ID="LblEmpName" runat="server" Text="Employee Name"></asp:Label>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <%# 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>
                <EmptyDataTemplate>
 <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>
        <div class="Internaldiv">
            <div id="popup_div" class="div_popup_">
                <a id="popupBoxClose" class="popupBoxClose" style="margin-top: 8px; margin-right: 8px">
                    <img src="images/CloseTab2.jpg" alt="Close" /></a>
                <asp:Label ID="lblEmployeeDetails" runat="server"></asp:Label>
            </div>
        </div>
    </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:-
Running View




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

Popup View



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

Popup With Close Button View

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

After Close Popup View


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


No comments:

Post a Comment

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

ShibashishMnty
shibashish mohanty