Now we want to open a popup  window with the webpage(logic.aspx or any) we have designed with our business logic.

Window Builder

Google announced Window Builder as open source project.WindowBuilder is simplicity used to draw the user interface the way you want it to look, complete with all of the elegant and powerful UI elements built into your favorite GUI platform.

WindowBuilder Pro has more than 10,000 registered users, and more than 30,000 people have downloaded the product.

Read more

Now day’s , important issue with web applications is how quick a wed page is rendered  and how it is animated or  visualized

So for quick reply from server Ajax is the solutions and for some visualizations with server side response we mostly use jquery or javascript.
I this article, for expanding , collapsing and  adding details to gridview row we are going to use AJAX to make call to server and we will visualized it using jquery.

Aim :

1. Getting details of product  by extracting details at the next to current row and before second one.
2. Visualizing  the expanding of rows.
3. No server side postback.
4. Using GridView Control to bind data and simple data binding to table using scriptlet.

Using the Jquery Code :

Expanding Row :

For expanding any row, we need to create an new row  with the serverside details  and then we will add it to the next of current row.

var trindex=0;                        //trindex hold row index created by jquery
$("tr").click(function() {
if ($(this).find("td:first").length > 0) {      //check whether it is header or content row
//row index icreament to assign new row id everytime
trindex++;
//create a row with td colspan 3 to show product description
var row= '><td class="currRow" colspan="3" ><div id="did"><img id="imagepath" src="" style="height: 81px; width: 104px" />  Description :<span id="des">sd</span><p>Cost :<span id="cost">sd</span></p></div></td></tr>';                 

//adding animation to row
var newRow = $("<tr id=tr"+ trindex + row).animate({
height: "140px",
opacity: 0.25,
}, 500);

//adding row to existing table
$(this).after(newRow);

Collapsing  Row :

At the same moment we expand any row, we collapse previous created row, so we need to remember the previous created rowIndex or it’s id.

$("#"+rowName).find('td').removeClass('currRow').addClass('hideRow');
$("#"+rowName).animate({
    height: "0px",
    opacity: 0.25,
    }, 1000, function() {
$("#"+rowNa
me).remove();

$.ajax({
       type: "POST",
       url: "WebService.asmx/HelloToYou",   //webserviceName/methodName
       data: "{'name': '" + $(this).find("td span").text() + "'}",  //passing values to webservice(productid)
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function(msg) {
       //extrating response data to newly created row
       $("#tr"+trindex ).find("td #did p #cost").text(msg.d.id );
       $("#tr"+trindex ).find("td #did  #des").text(msg.d.order);
       $("#tr"+trindex ).find("td #did #imagepath").attr('src', msg.d.order); //$("#myImage").attr("src", "path/to/newImage.jpg");
       },
       error: FailedMessage     //showing error message if failure
       });

public class CollectData
{
public string cost { get; set; }
public string imagePath { get; set; }
public string description { get; set; }
}
Simple queries to the database via WebMethod
[WebMethod()]
public CollectData GetDetails(string name)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
SqlCommand cmd = new SqlCommand("Select cost, imagePath, description from Products where ProductId='" + name + "'",con);
SqlDataReader data;
CollectData c = new CollectData();
try
{
con.Open();
data=cmd.ExecuteReader();
if (data.Read())
{
c.cost= data[0].ToString();
c.imagePath = data[1].ToString();
c.description = data[2].ToString();
return c;
}
else
{
c.cost = "N/A";
c.imagePath = "N/A";
c.description = "N/A";
return c;
}
}
catch (Exception ex)
{
c.cost = "N/A";
c.imagePath = "N/A";
c.description = "N/A";
return c;
}
}

Many designers resist using header tags (H1, H2, etc.) on their Web pages because the spacing around the tags can break a tight page layout.

Heading tags (H1 through to H6) are given more weight by search engines than regular body copy. So they should be used wisely to reinforce the page’s overall keyword theme……By SEO

I have used header tags and applied some css effects, it easy to write with 10-12 line of css and html Output will look like image shown.

Live Demo of CSS Header

First we need to add a div tag to our html page to put header on it.

Css for div:

#container {
	background: #6699FF;
	margin: auto;
	width: 500px;
	height: 700px;
	padding-top: 30px;
	font-family: helvetica, arial, sans-serif;
	}

h1 {
background: red;             /*Background color to header*/
background: -moz-linear-gradient(top, red, FFFFFF);
/*from to colors, I have used simple name it can be replaced by color codes*/
background: -webkit-gradient(linear, left top, left bottom, from(red), to(white));
padding: 10px 20px;
margin-left: -20px;
margin-top: 0;
position: relative;
width: 70%;
/*from droping box shadow at the bottom of header*/
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;
color: #454545;
text-shadow: 0 1px 0 white;
}

Arrow class for dropping shadow.

.arrow {
	 width: 0; height: 0;
	 line-height: 0;
	 border-left: 20px solid transparent;
	 border-top: 10px solid #c8c8c8;
	 top: 104%;
	 left: 0;
	 position: absolute;
}

Now just create a html Page and put a header and you have done assuming that you have written css in separate file named jstyle.css.
Example:

<html >
<head>
    <link rel="Stylesheet" type="text/css" href="jstyle.css" />
	<title>CSS Header</title>
</head>
<body>
	 <div id="container">
		<h1> H1 - Heading <span class="arrow"></span> </h1>
</body>
</html>

1.  Rounded box using div tag and css.

body {
width: 500px;
margin: 60px auto 0;
background: #0099FF;
}
#mainBox {
/* Just a box */
width: 500px;
height: 500px;

/* specify radius of rounded corner and its border size */
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 15px;
border: 2px solid white;

/* specify the multiple border colors for box */
-moz-border-top-colors: #292929 white;
-moz-border-right-colors: #292929 white;
-moz-border-bottom-colors: #292929 white;
-moz-border-left-colors: #292929 white;

/* Compensate for Webkit. Not as nice, but works. */
-webkit-box-shadow: 0 -1px 2px #292929;

/* Background subtle gradient, with fallback to solid color */
background: #e3e3e3;
background: -moz-linear-gradient(top, #782725, #FFFFFF);
background: -webkit-gradient(linear, left top, left bottom, from(#782725), to(#FFFFFF));
}

Add just a div tag with id mainBox in your body tag and you have done..

simple Pdf

gridviewpdf

1.0 Introduction:

Most of the computer users(Clients) are likely to have used PDF Documents. This tutorial is based on creating pdfs in asp.net(C#)

2.0 Using the Code

PdfWriter.GetInstance(doc, new FileStream(“c:/pdf1.pdf”,FileMode.Create));

3.0 Steps to fallow

3.1 Step 1:

Create an instance of the  iTextSharp.text.Document by writing code

iTextSharp.text.Document doc = new iTextSharp.text.Document();

3.2 Step 2:

Create a writer that listen the document you have created and write it to your Stream.

PdfWriter.GetInstance(doc, new FileStream(“c:/pdf1.pdf”, FileMode.Create));

3.3 Step 3:

Open the Document so that you can write your data to it.

doc.Open();

//you can add

Authors, header, subject to your pdf by methods

//Not recommended

doc.AddAuthor(“Bill”);

doc.AddSubject(“Billings”);

doc.AddHeader(“BY jay”, “BigInt”);

3.4 Step 4:
Add Content to the document.

doc.Add(new Paragraph(“Hello this is my first pdf”);

3.5 Step 5:
Close the document.

doc.Close();

3.6  Now result is stored at the location you specified..check it.

4.0 Classes and methods provided by iTextSharp

4.1 iTextSharp.text.Document.

public Document();

public Document(Rectangle Size);

public Document(Rectangle Size,int Left,int Right,int Top, int Bottom);

Size object sets the Pagesize of Pdf Document

You can create your Rectangle object with certain Borders, Backgroundcolor,

Rectangle Size = new Rectangle(144,720);

Size.BackgroundColor = new Color(123, 12, 210);

Document document = new Document(Size);

4.2 PdfWriter

Once the document object is created, we need to create PdfWriter object

PdfWriter.GetInstance(doc, new FileStream(“c:/pdf1.pdf”, FileMode.Create));

4.3. Before writing actual data, you might wish to add some metadata like author, title, subject. Document  has few methods to add medata are as fallows.

doc.AddAuthor(“Bill”);

doc.AddSubject(“Billings”);

doc.AddHeader(“BY jay”, “BigInt”);

doc.AddCreationDate();

doc.AddCreator(“name”);

doc.AddProducer();

doc.AddKeywords(“Keywords”);

4.4. Adding Watermark to report.

Watermark watermark = new Watermark(Image.getInstance(“image.jpg”),

400, 600);

4.5. Cell.

Cell can be add by creating a object of Cell class and add to document using add() method of document object

Cell cell = new Cell(new Phrase(“BigInt Technologies.. “, FontFactory.GetFont(FontFactory.HELVETICA_BOLD,

24)));

cell.HorizontalAlignment = Element.ALIGN_CENTER;

cell.VerticalAlignment = Element.ALIGN_MIDDLE;

cell.Colspan = 3;

cell.Border = 1;

cell.BackgroundColor =

iTextSharp.text.Color.LIGHT_GRAY;  //System.Drawing.Color.Silver;

not work

tableLayout.AddCell(cell);

Another merhod to add cell is

Document.AddCell(“Cell Value”);

5.0 Examples

5.1 Example  which shows a simple pdf with Rectangle and cell values as shown in Figure 1.0

public void ExportSimplePdf()

{

iTextSharp.text.Document doc = new iTextSharp.text.Document();

PdfWriter.GetInstance(doc, new FileStream(“c:/pdf1.pdf”, FileMode.Create));

doc.AddAuthor(“Bill”);

doc.AddSubject(“Billings”);

doc.AddHeader(“BY jay”, ”BigInt”);

doc.Open();

iTextSharp.text.Table tableLayout = new iTextSharp.text.Table(3);

float[] headers = { 10, 70, 40 };

tableLayout.Widths = headers;

tableLayout.WidthPercentage = 100;

Cell cell = new Cell(new Phrase(“BigInt Technologies.. “, FontFactory.GetFont(FontFactory.HELVETICA_BOLD, 24)));

cell.HorizontalAlignment = Element.ALIGN_CENTER;

cell.VerticalAlignment = Element.ALIGN_MIDDLE;

cell.Colspan = 3;

cell.Border = 1;

cell.BackgroundColor = iTextSharp.text.Color.LIGHT_GRAY;  //System.Drawing.Color.Silver; not work

tableLayout.AddCell(cell);

tableLayout.DefaultColspan = 3;

StringBuilder strInfo = new StringBuilder();

strInfo.Append(” ID Name        : Jayant Bramhankar”);

strInfo.Append(Environment.NewLine);

strInfo.Append(” Phone           : 9923748199″);

strInfo.Append(Environment.NewLine);

strInfo.Append(” Adress          : Nagpure”);

strInfo.Append(Environment.NewLine);

strInfo.Append(” Date of Birth  : 14/4/1986           Date: “);

strInfo.Append(DateTime.Now.ToShortDateString());

strInfo.Append(Environment.NewLine);

strInfo.Append(” “);

tableLayout.AddCell(strInfo.ToString());

tableLayout.DefaultColspan = 1;

tableLayout.AddCell(“Sr.No”);

Cell cInc = new Cell(new Phrase(“Incentive Types”, FontFactory.GetFont(FontFactory.HELVETICA, 12)));

cInc.HorizontalAlignment = Element.ALIGN_CENTER;

cInc.VerticalAlignment = Element.ALIGN_MIDDLE;

tableLayout.AddCell(cInc);

// another method to add cell is

// tableLayout.AddCell(“Incentive Types”);

tableLayout.AddCell(“Amount”);

tableLayout.AddCell(“2″);

tableLayout.AddCell(“Silver Zone Incentive”);

tableLayout.AddCell(“2000″);

tableLayout.AddCell(“3″);

tableLayout.AddCell(“Golden Zone Incentive”);

tableLayout.AddCell(“3000″);

tableLayout.AddCell(“4″);

tableLayout.AddCell(“Diamond Incentive”);

tableLayout.AddCell(“4000″);

// doc.Add(new Paragraph(“Hello World”));

doc.Add(tableLayout);

doc.Close();

}

5.2 Example  which shows exporting data to grid and  grid to Pdf

protected void Test2_Click(object sender, EventArgs e)

{

// data to gridview from database

SqlConnection connection = new SqlConnection(@”Data Source=.\SQLEXPRESS;AttachDbFilename=C:\Documents and Settings\Administrator\Desktop\pdf blog\mlm\App_Data\TestPdf.mdf;Integrated Security=True;User Instance=True”);

try

{

connection.Open();

SqlCommand cmd = new SqlCommand(“Select * from  Employee”, connection);

SqlDataAdapter da = new SqlDataAdapter(cmd);

DataSet data = new DataSet();

da.Fill(data);

gridDataToExport.DataSource = data.Tables[0];

gridDataToExport.DataBind();

Button2.Visible = true;

}

catch (SqlException ex) { Response.WriteFile(ex.Message); }

}

protected void Button2_Click(object sender, EventArgs e)

{

iTextSharp.text.Document doc = new iTextSharp.text.Document();

PdfWriter.GetInstance(doc, new FileStream(“c:/pdf2.pdf”, FileMode.Create));

doc.AddAuthor(“Bill”);

doc.AddSubject(“Billings”);

doc.AddHeader(“BY jay”, ”BigInt”);

doc.Open();

doc.Add(ExportGridToPdf());

doc.Close();

}

public PdfPTable ExportGridToPdf()

{

iTextSharp.text.pdf.PdfPTable tableLayout = new iTextSharp.text.pdf.PdfPTable(4);

float[] headers = { 10, 50, 40, 40 };

tableLayout.SetWidths(headers);

tableLayout.WidthPercentage = 100;

//Create header

PdfPCell cellSr = new PdfPCell(new Phrase(“Sr. No “, new Font(Font.HELVETICA, 12, 1, Color.BLUE)));

PdfPCell cellName = new PdfPCell(new Phrase(“Name “, new Font(Font.HELVETICA, 12, 1, Color.BLUE)));

PdfPCell cellQua = new PdfPCell(new Phrase(“Qualifiaction “, new Font(Font.HELVETICA, 12, 1, Color.BLUE)));

PdfPCell cellOcc = new PdfPCell(new Phrase(“Occupation “, new Font(Font.HELVETICA, 12, 1, Color.BLUE)));

//add headers to report

tableLayout.AddCell(cellSr);

tableLayout.AddCell(cellName);

tableLayout.AddCell(cellQua);

tableLayout.AddCell(cellOcc);

tableLayout.DefaultCell.BorderWidth = 1;

try{

int index=1;

foreach(GridViewRow row in gridDataToExport.Rows)

{

if (index % 2 == 0)

{

tableLayout.DefaultCell.BackgroundColor = iTextSharp.text.Color.LIGHT_GRAY;

}

else{tableLayout.DefaultCell.BackgroundColor = iTextSharp.text.Color.WHITE;}

tableLayout.AddCell(row.Cells[0].Text);

tableLayout.AddCell(row.Cells[1].Text);

tableLayout.AddCell(row.Cells[2].Text);

tableLayout.AddCell(row.Cells[3].Text);

index++;

}

return tableLayout;

}

catch (SqlException ex)

{

Response.Write(ex.Message);

return tableLayout;

}

}

How to use

The type safety of delegates requires the function you pass as a delegate to have the same signature as the delegate declaration.

See the fallowing program for more information on using delegates.

namespace delegates

{

//Create a new category

public delegate int MyDelegate(int x, int y);

public class MyDelegateProgram

{

public static int FunAdd(int x, int y)

{

return x + y;

}

public static int FunMultiply(int x, int y)

{

return x * y;

}

}

class Program

{

static void Main(string[] args)

{

//instance and initialization

MyDelegate DelAdd = new MyDelegate(MyDelegateProgram.FunAdd);

MyDelegate DelMul = new MyDelegate(MyDelegateProgram.FunMultiply);

//invoking function using delegates

Console.WriteLine(“Addition : ” + DelAdd(4, 5));

Console.WriteLine(“Multiplication : ” + DelMul(4, 5));

//array of Delegates———–

Console.WriteLine(“Using Array of Delegate”);

MyDelegate[] arrDelegates;

arrDelegates = new MyDelegate[2]; //size of delegate array

arrDelegates[0] = new MyDelegate(MyDelegateProgram.FunAdd);

arrDelegates[1] = new MyDelegate(MyDelegateProgram.FunMultiply);

foreach (MyDelegate item in arrDelegates)

{

Console.WriteLine(item(4, 5));

}

Console.ReadKey();

}

}

}

Gridview with javascript

Most of the time client wants fast calculation in gridview (no postback) e.g calculating cost of items or products for specified quantity.
So we can solve this by using javascript, so  all the calculations will be done at client side only and then we can get all values from gridview for other purpose.

Below code goes in aspx page.

<asp:GridView ID="GridView1" runat="server" AllowPaging="True"

AllowSorting="True" AutoGenerateColumns="False"  Width="100%" BackColor="White" BorderColor="#3366CC" BorderStyle="None"

BorderWidth="1px" CellPadding="4" Font-Size="Smaller" >

<FooterStyle BackColor="#99CCCC" ForeColor="#003399" />

<RowStyle BackColor="White" ForeColor="#003399"  />

<Columns>

<asp:TemplateField >

<ItemStyle Font-Names="Tahoma" Font-Size="14pt" HorizontalAlign="Left" Width="70" />

<HeaderStyle Font-Names="Tahoma" Font-Size="14pt" HorizontalAlign="Left" />

<HeaderTemplate >

Product

</HeaderTemplate>

<ItemTemplate >

<asp:Label runat="server" ID="txtname" Text='<%# DataBinder.Eval(Container.DataItem,"name") %>' Width="50px"></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<ItemStyle Font-Names="Tahoma" Font-Size="14pt" HorizontalAlign="Left" Width="170" />

<HeaderStyle Font-Names="Tahoma" Font-Size="14pt" HorizontalAlign="Left" />

<HeaderTemplate >

Cost

</HeaderTemplate>

<ItemTemplate>

<asp:TextBox runat ="server" id="ttCost" ReadOnly="true" visible="true" Text='<%# DataBinder.Eval(Container.DataItem,"Cost") %>' />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<ItemStyle HorizontalAlign="Left" Width="30" BorderWidth="0" />

<HeaderStyle Font-Names="Tahoma" Font-Size="14pt" HorizontalAlign="Left" />

<HeaderTemplate >

No. of Pins

</HeaderTemplate>

<ItemTemplate>

<input type="text" runat ="server" id="ttPin" visible="true" value='0' onblur="validateField(this)" />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<ItemStyle HorizontalAlign="Left" Width="30" BorderWidth="0" />

<HeaderStyle Font-Names="Tahoma" Font-Size="14pt" HorizontalAlign="Left" />

<HeaderTemplate >

Total Amount

</HeaderTemplate>

<ItemTemplate>

<input type ="text" runat ="server" id="total" ReadOnly="true" visible="true" value='0' />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField >

<ItemStyle Font-Names="Tahoma" Font-Size="0pt" HorizontalAlign="Left" Width="0" />

<HeaderStyle Font-Names="Tahoma" Font-Size="0pt" HorizontalAlign="Left" />

<HeaderTemplate >

Product

</HeaderTemplate>

<ItemTemplate >

<asp:Label runat="server" ID="pid" Text='<%# DataBinder.Eval(Container.DataItem,"ProductId") %>' Width="0px"></asp:Label>

</ItemTemplate>

</asp:TemplateField>

</Columns>

<PagerStyle ForeColor="#003399" HorizontalAlign="Left" BackColor="#99CCCC" />

<SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />

<HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />

</asp:GridView>

Bind data to gridview from Database

public void ComboLoad()

{

DataAccess da = new DataAccess();

DataSet ds = new DataSet();

ds=da.GetDataTable("Select Name, Cost, ProductId from NProducts");

GridView1.DataSource = ds;

GridView1.DataBind();

}

Javascript Code

This javascript code will perform clientside actions.

function validateField ( fieldname )

{

if ( ( fieldname.value ) &&

( ! fieldname.value.match ( " " ) ) )

{

var str=fieldname.id;

document.getElementById(fieldname.id.replace("ttPin", "total")).value=fieldname.value * document.getElementById(fieldname.id.replace("ttPin", "ttCost")).value ;

}

}

Now you can read all values from grid view to perform database operations by using following code

for (int i = 0; i < GridView1.Rows.Count; i++) //loop to coun rows

{

HtmlInputText tt1 = HtmlInputText)GridView1.Rows[i].FindControl("ttPin"); //getting rowwise texbox value

HtmlInputText tt2 = (HtmlInputText)GridView1.Rows[i].FindControl("total");

Label tt3 = (Label)GridView1.Rows[i].FindControl("pid"); //reading product name from label used in gridview.

string pid = tt3.Text;

string tpin = tt1.Value;

string tot = tt2.Value;

da.ExecuteNonQuery("Insert into DB values('"+Rid+"', '"+pid+"', '"+tpin+"', '"+tot+"')");
}

Step1. Write a class for user defined textbox as shown below or drag from VSIDE and add event handler to textbox

Step2. Nothing rather than enjoying..

class NumbersOnly:TextBox
{
      public NumbersOnly()
      {
          this.KeyPress += new KeyPressEventHandler(text_numberhandle);
      }
      private void text_numberhandle(object sender, KeyPressEventArgs e)
      {
            if (!char.IsDigit(e.KeyChar) && !char.IsControl(e.KeyChar))
            { e.Handled = true; }
      }
}

Second Method..
You can add textbox handler to  Designer.cs file and call it from Form source file as mentioned below

// textBox1
//

this.textBox1.Location = new System.Drawing.Point(92, 62);
this.textBox1.Name = "textBox1";
this.textBox1.Size = new System.Drawing.Size(100, 20);
this.textBox1.TabIndex = 0;
this.textBox1.KeyPress += new System.Windows.Forms.KeyPressEventHandler(
                           text_numberhandle);

and then call it from your Form1 code.

//Form1.cs
private void text_numberhandle(object sender, KeyPressEventArgs e)
{
      if (!char.IsDigit(e.KeyChar) && !char.IsControl(e.KeyChar))
      {
            e.Handled = true;
      }
}

Happy .Neting