Thursday, 1 September 2016

Maintaining State of CheckBoxes to checked While Paging in a GridView Control

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Maintaining State of CheckBoxes to checked  While Paging in a GridView Control</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView runat="server" ID="gvdetails" AllowPaging="true" AllowSorting="true" AutoGenerateColumns="false" onpageindexchanging="gvdetails_PageIndexChanging" PageSize="8" DataKeyNames="UserId">
<RowStyle BackColor="#EFF3FB" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="UserId" HeaderText="UserId" />
<asp:BoundField DataField="UserName" HeaderText="UserName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="Location" HeaderText="Location" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
 ---------------
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
BindGridData();
}
}
//This method is used to bind the gridview
protected void BindGridData()
{
SqlConnection con = new SqlConnection("Data Source=.;Integrated Security=true;Initial Catalog=MySampleDB");
SqlCommand cmd = new SqlCommand("select * from UserInfo", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
gvdetails.DataSource = ds;
gvdetails.DataBind();
}
protected void gvdetails_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
SaveCheckedValues();
gvdetails.PageIndex = e.NewPageIndex;
BindGridData();
PopulateCheckedValues();
}
//This method is used to populate the saved checkbox values
private void PopulateCheckedValues()
{
ArrayList userdetails = (ArrayList)Session["CHECKED_ITEMS"];
if (userdetails != null && userdetails.Count > 0)
{
foreach (GridViewRow gvrow in gvdetails.Rows)
{
int index = (int)gvdetails.DataKeys[gvrow.RowIndex].Value;
if (userdetails.Contains(index))
{
CheckBox myCheckBox = (CheckBox)gvrow.FindControl("chkSelect");
myCheckBox.Checked = true;
}
}
}
}
//This method is used to save the checkedstate of values
private void SaveCheckedValues()
{
ArrayList userdetails = new ArrayList();
int index = -1;
foreach (GridViewRow gvrow in gvdetails.Rows)
{
index = (int)gvdetails.DataKeys[gvrow.RowIndex].Value;
bool result = ((CheckBox)gvrow.FindControl("chkSelect")).Checked;

// Check in the Session
if (Session["CHECKED_ITEMS"] != null)
userdetails = (ArrayList)Session["CHECKED_ITEMS"];
if (result)
{
if (!userdetails.Contains(index))
userdetails.Add(index);
}
else
userdetails.Remove(index);
}
if (userdetails != null && userdetails.Count > 0)
Session["CHECKED_ITEMS"] = userdetails;
}
 

Monday, 15 February 2016

Simple JavaScript/CSS Lightbox

 JavaScript Lightbox script

CSS Code:
body
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
}
#outer
{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100‰;
    height: 100‰;
    background-color:#000000;
    z-index:1001;
    -moz-opacity: 0.7;
    opacity:.7;
    filter: alpha(opacity=70);
    padding:10px;
}
#inner
{
    display: none;
    position: fixed;
    top: 100px;
    left: 300px;
    width: 50‰;
    height: 50‰;
    padding: 5px;
    border: 10px solid #FF8000;
    background-color: white;
    z-index:1002;
    overflow: auto;
}
#content
{
    font-size:24px;
    color:#CCCCCC;
}
#close
{
    float:right;
    width:20px;
    height:20px;
    top:0;
    cursor:pointer;
    text-align:center;
    vertical-align:middle;
    font-weight:bold;
}
 
JavaScript Code:
function showId(id)
{
    var obj = document.getElementById(id);
    obj.style.display = 'block';
    return false;
}
function hideId(id)
{
    var obj = document.getElementById(id);
    obj.style.display = 'none';
    return false;
}
function showLightBox()
{
    showId('outer');
    showId('inner');
}
function hideLightbox()
{
    hideId('inner');
    hideId('outer');
}   
 
HTML Body Content:
<div id="outer"></div>
<div id="inner">
    <div id="close" onclick="hideLightbox()">X</div>
    <span id="content">Content Will Come Here</span>
</div>
<a href="javascript: void(0);" onclick="showLightBox();">Click Here</a> to view Lightbox