Nested GridView with JS

January 31, 2008

Nested GridView with JS

<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Nested GridView</title>

<script type=”text/C#” runat=”server”>

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if(e.Row.RowType == DataControlRowType.DataRow)
{
GridView gv = (GridView)e.Row.FindControl(“GridView2″);
SqlDataSource dbSrc = new SqlDataSource();
dbSrc.ConnectionString = ConfigurationManager.ConnectionStrings["LoginCon"].ConnectionString;
dbSrc.SelectCommand = “SELECT * FROM Orders WHERE CustomerID = ‘” + GridView1.DataKeys[e.Row.RowIndex].Value + “‘ ORDER BY OrderDate”;
gv.DataSource = dbSrc;
gv.DataBind();
}
}

</script>

<script type=”text/javascript”>

function ShowChildGrid(obj)
{
var div = document.getElementById(obj);
var img = document.getElementById(‘img’ + obj);
var theFlag = div.style.display == “none”;
div.style.display = (theFlag) ? “inline” : “none”;
img.src = (theFlag) ? “Images/arrowdown.jpg” : “Images/arrowright.jpg”;
}

</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:GridView ID=”GridView1″ runat=”server”
AllowPaging=”True”
AutoGenerateColumns=”False”
DataKeyNames=”CustomerID”
DataSourceID=”SqlDataSource1″
PageSize=”20″
OnRowDataBound=”GridView1_RowDataBound”>

<HeaderStyle CssClass=”dataTable” />
<RowStyle CssClass=”dataTable” />
<AlternatingRowStyle CssClass=”dataTableAlt” />

<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href=”javascript:ShowChildGrid(‘div<%# Eval(“CustomerID”) %>’);”>
<img id=”imgdiv<%# Eval(“CustomerID”) %>” alt=”Click to show/hide orders” border=”0″ src=”Images/arrowright.jpg” />
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField=”CompanyName” HeaderText=”CompanyName” SortExpression=”CompanyName” />
<asp:BoundField DataField=”ContactName” HeaderText=”ContactName” SortExpression=”ContactName” />
<asp:BoundField DataField=”Address” HeaderText=”Address” SortExpression=”Address” />
<asp:BoundField DataField=”City” HeaderText=”City” SortExpression=”City” />
<asp:BoundField DataField=”PostalCode” HeaderText=”PostalCode” SortExpression=”PostalCode” />
<asp:BoundField DataField=”Phone” HeaderText=”Phone” SortExpression=”Phone” />
<asp:TemplateField>
<ItemTemplate>
</td></tr>
<tr>
<td colspan=”100%”>
<div id=”div<%# Eval(“CustomerID”) %>” style=”display:none;position:relative;left:25px;” >
<asp:GridView ID=”GridView2″ runat=”server”
AutoGenerateColumns=”false”
DataKeyNames=”OrderID”
EmptyDataText=”No orders for this customer.”
Width=”80%”>
<HeaderStyle CssClass=”dataTable” />
<AlternatingRowStyle CssClass=”dataTableAlt” />
<RowStyle CssClass=”dataTable” />
<Columns>
<asp:BoundField DataField=”OrderDate” HeaderText=”Order Date” DataFormatString=”{0:MMM-dd-yyyy}” HtmlEncode=”False” />
<asp:BoundField DataField=”ShippedDate” HeaderText=”Shipped Date” DataFormatString=”{0:MMM-dd-yyyy}” HtmlEncode=”False” />
<asp:BoundField DataField=”ShipCity” HeaderText=”Shipped To” />
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server” ConnectionString=”<%$ ConnectionStrings:LoginCon %>”
SelectCommand=”SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City], [PostalCode], [Phone] FROM [Customers]“>
</asp:SqlDataSource>

</div>
</form>
</body>
</html>

Create two tables Customers and Orders with the relationship field (Foreign Key) “CustomerID”.
P.S Dont forget to find two images appropriate images

Images arrowright arrowdown

Leave a Comment » | .NET, JavaScript | Permalink
Posted by naveenj

Image from DB as ToolTip in GridView(IE only)

January 9, 2008

Image from DB as ToolTip in GridView(IE only)

In ASPX

<html xmlns=”http://www.w3.org/1999/xhtml” >
<head id=”Head1″ runat=”server”>
<title>Untitled Page</title>
<script type=”text/javascript”>
<!–
var browserName, browserVersion, isInternetExplorer, theDiv, myPath;
var tempX = 0;
var tempY = 0;
var bFlag = false;

function GetBrowser()
{
browserName=navigator.appName;
browserVersion=parseInt(navigator.appVersion)
isInternetExplorer = (browserName == “Microsoft Internet Explorer”) ? true : false;
}

function DisplayToolTip(row,path)
{
bFlag = true;
myPath = path;
// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;
}

function HideToolTip()
{
bFlag = false;
if (browserVersion >= 4)
{
theDiv.style.visibility = “hidden”;
theDiv.innerHTML =”";
}
}

function getMouseXY(e)
{
if (isInternetExplorer)
{
// grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
}
else
{
// grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (browserVersion >= 4 && bFlag)
{
theDiv =document.getElementById(“picdiv”);
theDiv.innerHTML = ‘<img src=’ + myPath + ‘ height=”30px” width=”30px”/>’;
theDiv.style.top = tempY + ‘px’;
theDiv.style.left = tempX + ‘px’;
theDiv.style.visibility = “visible”;
}
}
window.onresize=GetBrowser;

//–>
</script>
</head>

<body onload=”GetBrowser();”>
<form id=”form1″ runat=”server”>
<div>
<div id=”picdiv” style=”position: absolute; visibility: hidden; width:30px”>
</div>
<table style=”margin-left:auto;margin-right:auto;”>
<tr>
<td>
<asp:GridView ID=”GridView1″ runat=”server”
OnRowDataBound=”GridView1_RowDataBound”>
</asp:GridView>
</td>
</tr>
</table>
</div>
</form>
</body>

</html>

In ASPX.CS

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
bind();
}

private void bind()
{
DataTable table = new DataTable();
table.Columns.Add(“booktitle”);
table.Columns.Add(“tooltip”);

DataRow dr = table.NewRow();
dr["booktitle"] = “aaaaa”;
dr["tooltip"] = “AJAX.gif”;
table.Rows.Add(dr);

dr = table.NewRow();
dr["booktitle"] = “sheldon”;
dr["tooltip"] = “Image/sheldon.jpg”;
table.Rows.Add(dr);

dr = table.NewRow();
dr["booktitle"] = “archer”;
dr["tooltip"] = “Image/archer.jpg”;
table.Rows.Add(dr);

dr = table.NewRow();
dr["booktitle"] = “click”;
dr["tooltip"] = “Image/click.jpg”;
table.Rows.Add(dr);

this.GridView1.DataSource = table;
GridView1.DataBind();
}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
DataRowView drv = ((DataRowView)e.Row.DataItem);
string path = drv["tooltip"].ToString();
e.Row.Attributes.Add(“onmouseover”, “DisplayToolTip(this,’” + path + “‘)”);
e.Row.Attributes.Add(“onmouseout”, “HideToolTip()”);
}
}

Leave a Comment » | .NET, JavaScript | Permalink
Posted by naveenj

To Display Image thats stored as Type Image in DB

January 9, 2008

To Display Image thats stored as Type Image in DB

ASPX Page

<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:GridView ID=”gvwImages” runat=”server”
AutoGenerateColumns=”false”
DataSourceID=”dsImages”>
<%–DataSourceID=”dsImages”–%>
<Columns>

<asp:TemplateField HeaderText=”Name”>
<ItemTemplate>
<%–//field img_name is the name given to image–%>
<asp:Label ID=”lblName” runat=”server” Text=’<%#Eval(“img_name”) %>’>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText=”Image”>
<ItemTemplate>
<%–//here field img_id is the id of the image–%>
<asp:Image ID=”Image1″ runat=”server”
ImageUrl=’<%# “Handler.ashx?id=” + Eval(“img_id”) %>’ />
</ItemTemplate>
</asp:TemplateField>

</Columns>

</asp:GridView>
<asp:SqlDataSource ID=”dsImages” runat=”server”
ConnectionString=’<%$ConnectionStrings: LoginCon %>’
SelectCommand=”Select img_id,img_name from Images”>
</asp:SqlDataSource>
</div>
</form>
</body>
</html>

In Handler.ashx

<%@ WebHandler Language=”C#” Class=”Handler” %>

using System;
using System.Web;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

public class Handler : IHttpHandler
{

public bool IsReusable
{
get {return false;}
}
public void ProcessRequest(HttpContext context)
{
SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["LoginCon"].ConnectionString);
myConnection.Open();
//here field img_data is the content of the image (type image in DB)
//field img_contenttype is the type of the image (optional)
string sql = “Select img_data,img_contenttype from Images where img_id=@ImageId”;
SqlCommand cmd = new SqlCommand(sql, myConnection);
cmd.Parameters.Add(“@ImageId”, SqlDbType.Int).Value = context.Request.QueryString["id"];
cmd.Prepare();
SqlDataReader dr = cmd.ExecuteReader();
dr.Read();
context.Response.ContentType = dr["img_contenttype"].ToString();
context.Response.BinaryWrite((byte[])dr["img_data"]);
}

}

Leave a Comment » | .NET | Permalink
Posted by naveenj

Flip DataSet

January 4, 2008

public DataSet FlipDataSet(DataSet my_DataSet)
{
DataSet ds = new DataSet();
foreach (DataTable dt in my_DataSet.Tables)
{
DataTable table = new DataTable();
for (int i = 0; i <= dt.Rows.Count; i++)
{
table.Columns.Add(Convert.ToString(i));
}
DataRow r = null;
for (int k = 0; k < dt.Columns.Count; k++)
{
r = table.NewRow();
r[0] = dt.Columns[k].ToString();
for (int j = 1; j <= dt.Rows.Count; j++)
r[j] = dt.Rows[j - 1][k];
table.Rows.Add(r);
}

ds.Tables.Add(table);
}
return ds;
}

Leave a Comment » | .NET | Permalink
Posted by naveenj