Popupcontrolforgrd

ASP.
Net C# Microsoft Professional

ASP.Net,C#,AJAX,VB.net,.Net,SQL, Silverlight, Framework,WCF,WPF,WWF,Programming, Articles,Free, Tutorial,FAQ,Book, Tips, Interview Question,Previous Year Papers,Admissions, Articles, Placement Papers, Educational News,Architecture,Atlas,ASPX,Jquery, Linq,Web 2.0,Net 3.5,Agile,Visual Studio, Debug, Framework .Net,Web Design,VB.Net,2.0 .Net,Web site,Sql Server,ASP Code, Sql Database,Web services,Reporting services,Sql query,Sql reporting,Software Development,Web Development,Internet Services.
y y y y y y y y y y y
ASP.Net C# SQL Server HR Glamour Lifestyle News Video Forum Blog Twitter
ASP.Net C# Microsoft Professional
Thursday, December 3, 2009

DataGrid Popup picture on mouse over event in ASP.Net
<!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>Popup picture Page</title> <script type="text/javascript"> function get_(div_) { div_=div_.id+"1"; document.getElementById(div_).style.display="block"; } function get_1(div_) { div_=div_.id+"1";
document.getElementById(div_).style.display="none"; } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:GridView ID="GridViewPicBox" runat="Server" AutoGenerateColumns="False"> <Columns> <asp:BoundField DataField="Id" HeaderText="MovieId" /> <asp:BoundField DataField="Name" HeaderText="MovieName" /> <asp:TemplateField HeaderText="MovieDescription"> <ItemTemplate> <asp:LinkButton ID="lnk" runat="server" Text="Picture" onmouseover="get_(this);" onmouseout="get_1(this);" /> <div id="lnk1" runat="server" style="display: none; position: absolute; background-color: #FEFFB3; width: 150px"> <p> <strong>Image Name</strong></p> <p> <img src='<%#Eval("MovieImagePath")%>' runat="Server" id="ImgPopUp" /></p> </div> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> </form> </body> </html>
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class MouseOverGrid : System.Web.UI.Page
{ protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { GridViewPicBox.DataSource = GetData(); GridViewPicBox.DataBind(); } } public DataSet GetData() { DataSet ds = new DataSet(); DataTable dt = new DataTable("Movie"); DataRow dr; dt.Columns.Add(new DataColumn("MovieId", typeof(Int32))); dt.Columns.Add(new DataColumn("MovieName", typeof(string))); dt.Columns.Add(new DataColumn("MovieImagePath", typeof(string))); for (int i = 1; i <= 5; i++) { dr = dt.NewRow(); dr[0] = i; dr[1] = "MovieName" + i.ToString(); dr[2] = "~/images/"+i.ToString()+".jpeg"; dt.Rows.Add(dr); } ds.Tables.Add(dt); Session["dt"] = dt; return ds; } } Posted by Rajiv at 4:45 AM Labels: Asp.net, DataGrid, Event, Popup
2 type
VB VB C++ C++
JAVA JAVA C C PHP PHP J2EE J2EE VB.NET VB.NET C#.NET C#.NET ASP.NET ASP.NET
Web Web System System Network Network Database Database
Language Language
Technology Technology
ProjectRequest ProjectRequest ContactUs ContactUs
School School College College Master Master Bachelor Bachelor
CS CS IT IT Electrical Electrical Electronics Electronics
Program Program
Stream Stream
y y y y y y y
Home Projects Seminars Blog Articles Contact Us Testimonial PROJECTS BY LANGUAGE

y y y y y y y y y
VB Projects C++ Projects JAVA Projects C Projects PHP Projects J2EE Projects VB.NET Projects C#.NET Projects ASP.NETProject
SOURCE CODE PHP Code JAVA Code .NET Code Matlab Code C & C++ Code U Miss any Code?
y y y y y y
Video Tutorials
PROJECTS BY TECHNOLOGY Web Technology System Technology Network Technology Database Technology
y y y y
Please use our contact us form or send email to Support@srishtis.com. Display GridView Row Details using ASP.NET AJAX Popup Control Introduction When you display records using ASP.NET GridView control it displays all the columns on the page and often you want to display only few columns in GridView due to the available space on the page. You can easily achieve this functionality by adding your own columns declaratively in the GridView control. But if you want to display other columns in a popup window for each row in the GridView control you need to use AJAX Popup Control with the GridView. In this tutorial I will show you how you can display GridView row details using ASP.NET AJAX Popup control extender.
To start this tutorial, create a new website in Visual Studio 2008 and add ScriptManager control on the page. This control is required to use any AJAX functionality on ASP.NET page. <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
Next you need to add GridView control on the page that has AutoGenerateColumns property set to false to stop ASP.NET to generate columns automatically. You also need to attach OnRowCreated event handler with the grid which I will use later in this tutorial to attach some JavaScript events with a magnify icon to display popup window on mouse over. Following is the complete markup of the GridView control. <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BorderColor="#336699" BorderStyle="Solid" BorderWidth="1px" CellPadding="3"Font-Names="Verdana"Font-Size="10pt" onrowcreated="GridView1_RowCreated"> <Columns> <asp:BoundField DataField="ProductID" HeaderText="Product ID" /> <asp:BoundField DataField="ProductName" HeaderText="Product Name" /> <asp:TemplateField ItemStyle-Width="40" ItemStyle-HorizontalAlign="Right"> <ItemTemplate> <asp:Image ID="Image1" runat="server" ImageUrl="~/images/magnify.gif" /> <ajax:PopupControlExtender ID="PopupControlExtender1" runat="server" PopupControlID="Panel1" TargetControlID="Image1" DynamicContextKey='<%# Eval("ProductID") %>' DynamicControlID="Panel1" DynamicServiceMethod="GetDynamicContent"Position="Bottom"> </ajax:PopupControlExtender> </ItemTemplate> </asp:TemplateField> </Columns> <HeaderStyle BackColor="#336699" ForeColor="White" /> </asp:GridView> The most important thing in the above markup is the TemplateField column definition in which I have used an image control to display magnify icon and ASP.NET AJAX Popup Control Extender. The PopupControlID property needs the id of the control you want to use as a popup window with AJAX Popup Control in this case I have used Panel control. The TargetControlID property needs the id of the control that will display the popup window in this case I have used Image1 control that shows magnify icon in the GridView column. The DynamicServiceMethod property needs the name of the web service method you want to call for every popup window to load additional details from the database. The DynamicContextKey property needs the dynamic value you want to pass to the dynamic web service method. In this example I am passing ProductID to load more details of the product in the popup window dynamically. In the end you need a Panel control on the page which will be used as a popup window by the
PopupControlExtender control. <asp:Panel ID="Panel1" runat="server"> </asp:Panel> The code behind file of the ASP.NET page that has Page Load event to bind data with the GridView control as shown below: protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { LoadData(); } } private void LoadData() { string constr = "ServerTestServer;Database=SampleDatabase;uid=test;pwd=test;"; string query = "SELECT ProductID, ProductName FROM Products"; SqlDataAdapter da = new SqlDataAdapter(query, constr); DataTable table = new DataTable(); da.Fill(table); GridView1.DataSource = table; GridView1.DataBind(); } Next you need the OnRowCreated event definition that will perform two operations during the creation of every data row of the GridView control. First it will find the Popup Extender Control using the FindControl method and will add a unique behavior id with each popup control. Secondly it will find Image control in every row and will attach showPopup() and hidePopup() script with the image onmouseover and onmouseout events. This is required to display popup window on mouse over and hide popup window on mouse out automatically.
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { PopupControlExtender pce= e.Row.FindControl(""PopupControlExtender1") as PopupControlExtender; string behaviorID = "pce_" + e.Row.RowIndex; pce.BehaviorID = behaviorID; Image img = (Image)e.Row.FindControl("Image1"); string OnMouseOverScript = string.Format("$find('{0}').showPopup();", behaviorID);
string OnMouseOutScript = string.Format("$find('{0}').hidePopup();", behaviorID); img.Attributes.Add("onmouseover", OnMouseOverScript); img.Attributes.Add("onmouseout", OnMouseOutScript); } }

In the end, you need the definition of GetDynamicContent service method that will be called by every ASP.NET AJAX Popup Control Extender to load dynamic data from the database and to display additional details in the popup window. The first few lines in the method below are loading additional columns from the Products table in database. The StringBuilder object is created to build html string for the tabular output in the popup window. You can build any type of html for display such as bullets, paragraphs, links etc. [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()] public static string GetDynamicContent(string contextKey) { string constr = "Srishtis;Database=SampleDatabase;uid=sa;pwd=sa;"; string query = "SELECT UnitPrice, UnitsInStock, Description FROM Products WHERE ProductID = " + contextKey; SqlDataAdapter da = new SqlDataAdapter(query, constr); DataTable table = new DataTable(); da.Fill(table); StringBuilder b = new StringBuilder(); b.Append("<table style='background-color:#f3f3f3; border: #336699 3px solid; "); b.Append("width:350px; font-size:10pt; font-family:Verdana;' cellspacing='0' cellpadding='3'>"); b.Append("<tr><td colspan='3' style='background-color:#336699; color:white;'>"); b.Append("<b>Product Details</b>"); b.Append("</td></tr>"); b.Append("<tr><td style='width:80px;'><b>Unit Price</b></td>"); b.Append("<td style='width:80px;'><b>Stock</b></td>"); b.Append("<td><b>Description</b></td></tr>"); b.Append("<tr>"); b.Append("<td>$" + table.Rows[0]["UnitPrice"].ToString() + "</td>"); b.Append("<td>" + table.Rows[0]["UnitsInStock"].ToString() + "</td>"); b.Append("<td>" + table.Rows[0]["Description"].ToString() + "</td>"); b.Append("</tr>"); b.Append("</table>"); return b.ToString(); }
Job or extra money for students Search Engine Rank of your blog or websites
Copyright 2008 Srishti IT Consultancy. All Rights Reserved. Designed by Srishti Team. Privacy Policy | Terms of Use | Admin

Popupcontrolforgrd

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Popupcontrolforgrd

Caricato da

Copyright:

Formati disponibili

ASP.

Net C# Microsoft Professional

ASP.Net C# Microsoft Professional

Thursday, December 3, 2009

Web Web System System Network Network Database Database

ProjectRequest ProjectRequest ContactUs ContactUs

School School College College Master Master Bachelor Bachelor

CS CS IT IT Electrical Electrical Electronics Electronics

Home Projects Seminars Blog Articles Contact Us Testimonial PROJECTS BY LANGUAGE

string OnMouseOutScript = string.Format("$find('{0}').hidePopup();", behaviorID); img.Attributes.Add("onmouseover", OnMouseOverScript); img.Attributes.Add("onmouseout", OnMouseOutScript); } }

Potrebbero piacerti anche