Print GridView selected record(s) using JQuery and Context help.

The following example demonstrates, another way to print, selected records in a GridView, using jquery.
It also uses the JQuery plugin from “abeautifulsite.net”, to print a single GridView row , using “mouse right click”.

PrintMultipleRecords[1]

PrintSingleRecordUsingContextHelp[1]
Here’s the complete code sample.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PrintGVSelectedRecords.aspx.cs" Inherits="PrintGVSelectedRecords" %>

<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> 
<script src="http://labs.abeautifulsite.net/projects/js/jquery/contextMenu/demo/jquery.contextMenu.js" type="text/javascript"></script> 
<link href="http://labs.abeautifulsite.net/projects/js/jquery/contextMenu/demo/jquery.contextMenu.css" rel="stylesheet" type="text/css" /> 

<style type="text/css"> 
   th 
   { 
      text-align:left; 
   } 
   .headerRow 
   { 
      background-color: #000000; 
      color:White; 
      font-weight:bold; 
   } 
   .highlightRow 
   { 
      background-color: #dadada; 
      cursor: pointer; 
      border:solid 1px black; 
   } 
   .selectedRow 
   { 
      background-color: #808080; 
      cursor: pointer; 
      border:solid 1px black; 
      color:White; 
   } 
</style> 


<script type="text/javascript" >
function PrintGridViewSelectedRows() {        
var strContent = "<html><head>";
strContent = strContent + "<title" + ">Print Preview</title>";
strContent = strContent + "<link href=\"App_Themes/Default/Default.css\" type=\"text/css\" rel=\"stylesheet\" />";
strContent = strContent + "</head><body>";
strContent = strContent + "<div>";

strContent = strContent + "<div style='width:100%;text-align:right;'>";
strContent = strContent + "<input type='button' id='btnPrint' value='Print' style='width:100px' onclick='window.print()' />";
strContent = strContent + "<input type='button' id='btnCancel' value='Cancel' style='width:100px' onclick='window.close()' />";
strContent = strContent + "</div>";

strContent = strContent + "<table>";
        
var GridViewContent = "";
$(':input:checked').closest('tr').each(function (i, item) {
    GridViewContent += "<tr>"+$(item)[0].innerHTML+"</tr>";
});
if (GridViewContent == "") {
    GridViewContent = "Please select a row to print";
}
strContent = strContent + GridViewContent;
strContent = strContent + "</table>";
strContent = strContent + "</div>";
strContent = strContent + "</body>";
strContent = strContent + "</html>";

printWindow = window.open("", "mywindow", "location=0,status=0,width=500,height=500,scrollbars=1,resizable=1");
printWindow.document.write(strContent);
printWindow.document.close();
printWindow.focus();
}


function PrintGridViewCurrentRow(CurrRow) {
var strContent = "<html><head>";
strContent = strContent + "<title" + ">Print Preview</title>";
strContent = strContent + "<link href=\"App_Themes/Default/Default.css\" type=\"text/css\" rel=\"stylesheet\" />";
strContent = strContent + "</head><body>";
strContent = strContent + "<div>";

strContent = strContent + "<div style='width:100%;text-align:right;'>";
strContent = strContent + "<input type='button' id='btnPrint' value='Print' style='width:100px' onclick='window.print()' />";
strContent = strContent + "<input type='button' id='btnCancel' value='Cancel' style='width:100px' onclick='window.close()' />";
strContent = strContent + "</div>";
strContent = strContent + "<table>";
strContent = strContent + "<tr>" + CurrRow + "</tr>";
strContent = strContent + "</table>";
strContent = strContent + "</div>";
strContent = strContent + "</body>";
strContent = strContent + "</html>";

printWindow = window.open("", "mywindow", "location=0,status=0,width=500,height=500,scrollbars=1,resizable=1");
printWindow.document.write(strContent);
printWindow.document.close();
printWindow.focus();
}
</script>


<script type="text/javascript">
$(document).ready(function () {
$("[id$=GridView1] input[type=checkbox][id*=CheckBoxPrint]:checked").css("background-color", "gray");
$("[id$=GridView1] input[type=checkbox][id*=CheckBoxPrint]").click(function () {
if ($(this).attr("checked"))
    $(this).closest('tr').css("background-color", "gray");
else
    $(this).closest('tr').css("background-color", "");
});
});
</script>

<script type="text/javascript">
    $(document).ready(function () {
        $('[id$=GridView1] tbody tr').mouseover(function () {
            $(this).addClass('highlightRow');
        }).mouseout(function () {
            $(this).removeClass('highlightRow');
        });
    });
</script>

<script type="text/javascript">
$(document).ready(function () {
var navigationText = "";
var prev;
$("table tr").contextMenu({
    menu: 'myMenu'
}, function (action, el, pos) {
    PrintGridViewCurrentRow(el[0].innerHTML);
});
}); 
</script> 
</head>
<body>


<form id="form1" runat="server">
<div>
<ul>
    <b><ul>Two ways to print any record(s):</ul></b>
    <li>To print multiple records, click on the checkbox of desired records and hit Print button.</li>
    <li>To print a single record, right Click on the row, to print, using context help.</li>
</ul>

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="Print">
        <ItemTemplate>
            <asp:CheckBox ID="CheckBoxPrint" runat="server" Enabled="true" />
        </ItemTemplate>
</asp:TemplateField> 
<asp:BoundField DataField="ItemDescription" HeaderText="ItemDescription"  />
<asp:BoundField DataField="ItemPrice" HeaderText="ItemPrice"  />
</Columns>
</asp:GridView>
<ul id="myMenu" class="contextMenu"> 
<li class="copy"><a href="#">Print</a></li> 
</ul> 
</div>
<br />
<input id="btnPrint" type="button" value="Print" onclick="PrintGridViewSelectedRows()" />
</form>
</body>
</html>
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;

public partial class PrintGVSelectedRecords : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GridView1.DataSource = CreateData();
            GridView1.DataBind();
        }
    }

    private DataTable CreateData()
    {
        DataTable t = new DataTable();
        t.Columns.Add(new DataColumn("id", typeof(int)));
        t.Columns.Add(new DataColumn("ItemDescription", typeof(string)));
        t.Columns.Add(new DataColumn("ItemPrice", typeof(decimal)));
        DataRow r = t.NewRow();
        r["id"] = 1;
        r["ItemDescription"] = "Item1";
        r["ItemPrice"] = 1.11;
        t.Rows.Add(r);
        r = t.NewRow();
        r["id"] = 2;
        r["ItemDescription"] = "Item2";
        r["ItemPrice"] = 2.22;
        t.Rows.Add(r);
        r = t.NewRow();
        r["id"] = 2;
        r["ItemDescription"] = "Item3";
        r["ItemPrice"] = 3.33;
        t.Rows.Add(r);
        r = t.NewRow();
        r["id"] = 2;
        r["ItemDescription"] = "Item4";
        r["ItemPrice"] = 4.44;
        t.Rows.Add(r);
        return t;
    }
    protected void Button1_Click(object sender, EventArgs e)
    {

    }
}

Hope this helps. Thanks for reading.

Advertisements
This entry was posted in JQuery. Bookmark the permalink.

One Response to Print GridView selected record(s) using JQuery and Context help.

  1. tester says:

    Very useful article

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s