Modalpopup and print: ModalPopup + Gridview + images

Hello Guys!!! First I'm sorry for my english Embarrassed

I found this code in this forum and I try for see images from gridview and modalpopup, but, the images in gridview is clickable and i can go inside the panel, in this panel I want see the image big, but in gridview I have image small.

Any idea or some script different?

Thank you some much!!!!

<%@dotnet.itags.org.PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2" %><!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><scriptrunat="server">

protectedvoid Page_Load(object sender,EventArgs e){

//Attach a Javascript funtion to the GridViewRow.

GridViewRow myGridViewRow;

for (int i = 0; i < GridView1.Rows.Count; i++){

myGridViewRow = (GridViewRow)GridView1.Rows[i];myGridViewRow.Attributes.Add("onclick","shopModalPopup('" + GridView1.Rows[i].Cells[0].Text +"');return false;");

}

</script><htmlxmlns="http://www.w3.org/1999/xhtml"><headid="Head1"runat="server"><title>Untitled Page</title>

<style>

.modalBackground {background-color:Gray;filter:alpha(opacity=70);opacity:0.7;}

.modalPopup {background-color:#FFD9D5;border-width:3px;border-style:solid;border-color:Gray;padding:3px;width:250px;}

</style></head><body><formid="form1"runat="server"><ajaxToolkit:ToolkitScriptManagerID="ScriptManager1"runat="server"></ajaxToolkit:ToolkitScriptManager>

<asp:GridViewID="GridView1"runat="server"AutoGenerateColumns="False"DataKeyNames="id_product"

DataSourceID="SqlDataSource1">

<asp:BoundFieldDataField="id_product"HeaderText="id_product"InsertVisible="False"ReadOnly="True"SortExpression="img_b">

<ItemStyleWidth="0px"/>

</asp:BoundField>

<asp:BoundFieldDataField="titolo"HeaderText="titolo"SortExpression="titolo"/>

<asp:BoundFieldDataField="numero"HeaderText="numero"SortExpression="numero"/>

<asp:BoundFieldDataField="colore"HeaderText="colore"SortExpression="colore"/>

<asp:TemplateField>

<asp:ImageButtonID="LinkButton1"runat="server"ImageUrl='<%# Eval("img_s") %>'/>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

<asp:SqlDataSourceID="SqlDataSource1"runat="server"ConnectionString="<%$ ConnectionStrings:cn_superexport %>"ProviderName="<%$ ConnectionStrings:cn_superexport.ProviderName %>"SelectCommand="SELECT * FROM [product]"></asp:SqlDataSource>

<asp:PanelID="Panel1"runat="server"CssClass="modalPopup"Height="200px"Width="300px"style="display:none">

<asp:UpdatePanelID="UpdatePanel1"runat="server">

EmployeeID:<asp:TextBoxID="tbEmployeeID"runat="server"></asp:TextBox><br/>

image:<asp:ImageID="image"runat="server"ImageUrl='<%# Eval("img_s") %>'></asp:image>

</ContentTemplate>

</asp:UpdatePanel>

<asp:ButtonID="btnCancel"runat="server"Text="Cancel"/>

</asp:Panel>

<divstyle="display: none">

<asp:ButtonID="Button1"runat="server"Text="Button"/></div>

<ajaxToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"TargetControlID="Button1"

PopupControlID="Panel1"CancelControlID="btnCancel"BackgroundCssClass="modalBackground">

</ajaxToolkit:ModalPopupExtender>

<scripttype="text/javascript"language="javascript">

function shopModalPopup(id_product){

//show the ModalPopupExtender

$get("<%=tbEmployeeID.ClientID %>").value = id_product;$find("<%=ModalPopupExtender1.ClientID %>").show();

}

</script></form></body></html>

Hello,

Is it that you want the image in panel1, which is the same as the image in the grid, to be full sized when it pops up?

If so, try to specify a width and height for the image in panel1.

<asp:ImageID="image"Width="200px"Height="440px"runat="server"ImageUrl='<%# Eval("img_s") %>'></asp:image>

Thanks,

Louis

Thank you for solution but still not work. Maybe I need different script...What you think? You have some solution?

Guys is possible click in button image from gridview and this open ModalPopupExtender for see the same image but more big, so different filed?

Please Help me!!

OK,

I think I have something for you. I used the gridview image example on MSDN :http://msdn2.microsoft.com/en-us/library/aa479350.aspx to make my grid.

Basically, I use javascript to add a click event to the row when the grid binds. You could do it on the image itself, its pretty straightforward.

When you click the row, I get the image path and put that path into the image inside the modal panel, where the image size is expanded, then I show the modal.

ASPX Page:

<%@.PageLanguage="C#"AutoEventWireup="true"CodeFile="LousTest.aspx.cs"Inherits="TestPages_LousTest" %>

<%@.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>Untitled Page</title>

<scripttype="text/javascript">

function onSelect(elem) {

var sc = elem.cells[3].children[0].src;

//put this src path inot the images src...

var imager = document.getElementById("Image1");

imager.src = sc;

$find('a_modal').show();

}

</script>

</head>

<body>

<formid="form1"runat="server">

<asp:ScriptManagerID="sc1"runat="server"/>

<div>

<asp:GridViewID="GridView1"Runat="server"DataSource='<%# GetData() %>'

AutoGenerateColumns="False"

BorderWidth="1px"BackColor="White"OnRowDataBound="On_RowDataBound"CellPadding="3"BorderStyle="None"

BorderColor="#CCCCCC"Font-Names="Arial">

<FooterStyleForeColor="#000066"BackColor="White"></FooterStyle>

<PagerStyleForeColor="#000066"HorizontalAlign="Left"

BackColor="White"></PagerStyle>

<HeaderStyleForeColor="White"Font-Bold="True"

BackColor="#006699"></HeaderStyle>

<asp:BoundFieldHeaderText="Picutre ID"DataField="PictureID">

<ItemStyleHorizontalAlign="Center"

VerticalAlign="Middle"></ItemStyle>

</asp:BoundField>

<asp:BoundFieldHeaderText="Title"DataField="Title"></asp:BoundField>

<asp:BoundFieldHeaderText="Date Added"DataField="DateAdded"

DataFormatString="{0:d}">

<ItemStyleHorizontalAlign="Center"></ItemStyle>

</asp:BoundField>

<asp:ImageFieldDataImageUrlField="PictureURL"></asp:ImageField>

</Columns>

<SelectedRowStyleForeColor="White"Font-Bold="True"

BackColor="#669999"></SelectedRowStyle>

<RowStyleForeColor="#000066"></RowStyle>

</asp:GridView>

<asp:LinkButtonID="lnkAddAlert"runat="server"style="display:none"/>

<br/>

<cc1:ModalPopupExtenderID="ModalPopupExtender1"runat="server"PopupControlID="Panel1"

TargetControlID="lnkAddAlert"BehaviorID="a_modal"OkControlID="cancel"BackgroundCssClass="modalBackground">

</cc1:ModalPopupExtender>

<asp:PanelID="Panel1"runat="server"Height="316px"Width="737px">

<asp:LinkButtonID="cancel"Text="close"runat="server"></asp:LinkButton>

<asp:ImageID="Image1"runat="server"Height="315px"Width="734px"/>

</asp:Panel>

</div>

</form>

</body>

</html>

And the code behind:

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;

publicpartialclassTestPages_LousTest : System.Web.UI.Page

{

protectedvoid Page_Load(object sender,EventArgs e)

{

Page.DataBind();

}

protectedDataTable GetData()

{

// This method creates a DataTable with four rows. Each row has the

// following schema:

// PictureID int

// PictureURL string

// Title string

// DateAdded datetime

DataTable dt =newDataTable();

// define the table's schema

dt.Columns.Add(newDataColumn("PictureID",typeof(int)));

dt.Columns.Add(newDataColumn("PictureURL",typeof(string)));

dt.Columns.Add(newDataColumn("Title",typeof(string)));

dt.Columns.Add(newDataColumn("DateAdded",typeof(DateTime)));

// Create the four records

DataRow dr = dt.NewRow();

dr["PictureID"] = 1;

dr["PictureURL"] = ResolveUrl("~/images/construction.png");

dr["Title"] ="Blue Hills";

dr["DateAdded"] =newDateTime(2005, 1, 15);

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["PictureID"] = 2;

dr["PictureURL"] = ResolveUrl("~/images/construction.png");

dr["Title"] ="Sunset";dr["DateAdded"] =newDateTime(2005, 1, 21);

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["PictureID"] = 3;

dr["PictureURL"] = ResolveUrl("~/images/construction.png");

dr["Title"] ="Water Lilies";dr["DateAdded"] =newDateTime(2005, 2, 1);

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["PictureID"] = 4;

dr["PictureURL"] = ResolveUrl("../images/construction.png");

dr["Title"] ="Winter";dr["DateAdded"] =newDateTime(2005, 2, 18);

dt.Rows.Add(dr);

return dt;

}

protectedvoid On_RowDataBound(object sender,GridViewRowEventArgs e)

{

if (e.Row.RowType ==DataControlRowType.Pager)

{

return;

}

try

{

e.Row.Attributes.Add("onClick","onSelect(this);");

}

catch (Exception ex)

{

throw (newApplicationException(ex.Message));

}

Please mark as answer if it works for you and good luck.

-Louis

Oh mamma mia! I change:

<asp:GridViewID="GridView1"Runat="server"DataSource='<%# GetData() %>' ........

<asp:GridViewID="GridView1"Runat="server"DataSourceid="sqlsource1" ............ and all field but not worl the javascript

In original script everythin is ok, but when change for put database,don't work the error say:cells.3.children : is null or not object.

So I change in:

var sc = elem.cells[3].Rows[0].src; --> not work

var sc = elem.Rows[3].Cells[0].src; --> not work

and I delete allprotectedDataTable GetData() {........................} all delete, and

delete this line command: Page.DataBind();

But not work............Why?

Hello,

You need to do a few things if you attach a new Datasource to the grid.

Frist - find the new index of the column that holds the image path url. That column index is the new index of ele.Rows[X].Cells[columnindex].src;

Second, make sure you handle on row databound. If you post the schema of your resulting table, I can help.

Thanks,

Louis

Wednesday, March 21, 2012

ModalPopup + Gridview + images

No comments:

Post a Comment

Modalpopup and print

Blog Archive

About Me