i have a question. I have a gridview which is populated from a sql query from code behind. in one of the columns called Title i want to be able to call a javascript function called showImage from clicking on the Title field in the gridview. I was wondering
if this was possible to do?
the idea is that when someone clicks on a title (which should be a hyperlink or a link) it will run the javascript fucntion, which simply displays the image in a pop up window.
im just struggling as to how to create a link to each title field in the gridview e.g.
foreach (GridViewRow row in GridView1.Rows)
{
//get the values of the row from the gridview for the row that was checked.
String bookid = Convert.ToString(GridView1.DataKeys[row.RowIndex].Value);
String _title = row.Cells[2].Text;
now for this title, i want to be able to create a link that calls my javascript fucntion such as:
Thanks fro replying. im a bit confused. youre asking me to find a hyperlink control but i dont have one in my gridview?
their is a column called "Title" in my gridview and I want to be able to add a hyperlink to it and im populating my gridview from code behind.
so if the title is in: String strTitle = row.cells[1].text
then i want to create this text title into a hyperlink and then i can add the attributes bit on. i dont want to create another column or add another button, i just want to use the existing column and add a hyperlink to each cell in that column.
the idea is that when someone clicks on a title (which should be a hyperlink or a link) it will run the javascript fucntion, which simply displays the image in a pop up window.
im just struggling as to how to create a link to each title field in the gridview e.g.
Your main purpose is to call the javascript function on Title Click...
so i think you dont need to create Title & Link separate...
Take HyperLink control set its Text Property...i mean bind your Title field to Text property...
As i mentioned in the previous code jst call the javascript on "OnClick" event in the code-behind..
Let me know if still confuse.
Thanks & With Best Regards
====================================
Pushkar
hi, thanks for replying, i did what youve asked me to do but i have another question. each title is now displayed as a hyperlink. i have a javascript function that displays some data. I liked this fucntion as its more visually appealing than having a pop
up window. im trying to call this function on the click event of the hyperlink just created, however it does not display the image associated with that title, just an image with a red cross on it??
the javascript fucntion is:
var
tipTimer;
//End dHTML Tooltip Timer
<!--
function locateObject(n, d) {
//v3.0
var p,i,x;
if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=locateObject(n,d.layers[i].document);
return x;
and this displays the picture fine, howver when i try to do it in the code behind (as below) it doesnt display anything, just does a postback on the page?
mrssm
Member
603 Points
230 Posts
add "onclick" attribute to gridview data row.
Jul 09, 2008 08:26 AM|LINK
i have a question. I have a gridview which is populated from a sql query from code behind. in one of the columns called Title i want to be able to call a javascript function called showImage from clicking on the Title field in the gridview. I was wondering if this was possible to do?
the idea is that when someone clicks on a title (which should be a hyperlink or a link) it will run the javascript fucntion, which simply displays the image in a pop up window.
im just struggling as to how to create a link to each title field in the gridview e.g.
foreach (GridViewRow row in GridView1.Rows)
{
//get the values of the row from the gridview for the row that was checked.
String bookid = Convert.ToString(GridView1.DataKeys[row.RowIndex].Value);
String _title = row.Cells[2].Text;
now for this title, i want to be able to create a link that calls my javascript fucntion such as:
_title.Attributes.Add("onclick", "showImage(#,#,#,#,#);");
any help appreciated.
Pushkar
Contributor
5747 Points
1111 Posts
Re: add "onclick" attribute to gridview data row.
Jul 09, 2008 09:11 AM|LINK
<asp:HyperLink ID="hypLink" runat="server" NavigationUrl="#">
CODE BEHIND
RowDataBound Event
Find the Reference of the HyperLink Control using FindControl method.
protected void gdvBlogEntry_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
HyperLink hypLink = (HyperLink)e.Row.FindControl("hypLink");
hypLink.Attributes.Add("onClick", "javascript:showimage(" PARAM ");");
}
}
====================================
Pushkar
ziomdk
Member
266 Points
58 Posts
Re: add "onclick" attribute to gridview data row.
Jul 09, 2008 09:13 AM|LINK
You could create an Templatefield instead like this.
<asp:TemplateField ItemStyle-Width=50px >
<ItemTemplate ><span onclick="showImage(#,#,#,#,#);"></span>
</ItemTemplate> </asp:TemplateField>Please click on 'Mark as Answer' if this post answered your question!
hareshmca
Member
351 Points
67 Posts
Re: add "onclick" attribute to gridview data row.
Jul 09, 2008 09:14 AM|LINK
make one ImagePopUp.aspx form for display Image as popup
<asp:GridView ID="gv" runat="server" OnRowDataBound="gv_RowDataBound">
<Columns>
<asp:BoundField DataField="bookid" HeaderText="ID" />
<asp:TemplateField HeaderText="Title">
<ItemTemplate>
<asp:LinkButton ID="lbtnTitle" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Title") %>'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
((LinkButton)e.Row.FindControl("lbtnTitle")).Attributes.Add("onclick", "javascript:return window.open('ImagePopUp.aspx?Image=" + ((LinkButton)e.Row.FindControl("lbtnTitle")).Text + "','','')");
}
}
Take one Image in ImagePopup.aspx page
In Query string your will get Image=ImageName
assign that Imagename to Image by checking if its exist or not in particular folder
Click here to Visite My Site
If you want to be successful, be shameless
If this will not help you out from your problem then please do not Mark As Answer
mrssm
Member
603 Points
230 Posts
Re: add "onclick" attribute to gridview data row.
Jul 09, 2008 09:25 AM|LINK
Thanks fro replying. im a bit confused. youre asking me to find a hyperlink control but i dont have one in my gridview?
their is a column called "Title" in my gridview and I want to be able to add a hyperlink to it and im populating my gridview from code behind.
so if the title is in: String strTitle = row.cells[1].text
then i want to create this text title into a hyperlink and then i can add the attributes bit on. i dont want to create another column or add another button, i just want to use the existing column and add a hyperlink to each cell in that column.
Pushkar
Contributor
5747 Points
1111 Posts
Re: add "onclick" attribute to gridview data row.
Jul 09, 2008 09:37 AM|LINK
Your main purpose is to call the javascript function on Title Click...
so i think you dont need to create Title & Link separate...
Take HyperLink control set its Text Property...i mean bind your Title field to Text property...
As i mentioned in the previous code jst call the javascript on "OnClick" event in the code-behind..
Let me know if still confuse.
====================================
Pushkar
hareshmca
Member
351 Points
67 Posts
Re: add "onclick" attribute to gridview data row.
Jul 09, 2008 09:39 AM|LINK
design your hyperlink as i said in grid
it will work as you want
Click here to Visite My Site
If you want to be successful, be shameless
If this will not help you out from your problem then please do not Mark As Answer
mrssm
Member
603 Points
230 Posts
Re: add "onclick" attribute to gridview data row.
Jul 09, 2008 10:53 AM|LINK
hi, thanks for replying, i did what youve asked me to do but i have another question. each title is now displayed as a hyperlink. i have a javascript function that displays some data. I liked this fucntion as its more visually appealing than having a pop up window. im trying to call this function on the click event of the hyperlink just created, however it does not display the image associated with that title, just an image with a red cross on it??
the javascript fucntion is:
var
tipTimer;//End dHTML Tooltip Timer
<!--
function locateObject(n, d) { //v3.0 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=locateObject(n,d.layers[i].document); return x;
}
function
hideTooltip(object){
if (document.all)
{
locateObject(object).style.visibility="hidden"
locateObject(object).style.left = 1;
locateObject(object).style.top = 1;
return false
}
else
if (document.layers){
locateObject(object).visibility="hide"
locateObject(object).left = 1;
locateObject(object).top = 1;
return false
}
elsereturn true
} function showTooltip(object,e, tipContent, backcolor, bordercolor, textcolor, displaytime)
{ //window.clearTimeout(tipTimer)
if (document.all)
{ locateObject(object).style.top=document.body.scrollTop+event.clientY+20
locateObject(object).innerHTML=
'<table style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 8px; border: '+bordercolor+'; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; background-color: '+backcolor+'" width="15" border="0" cellspacing="1" cellpadding="1"><tr><td nowrap><font style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; color: '+textcolor+'">'+unescape(tipContent)+'</font></td></tr></table> ' if ((e.x + locateObject(object).clientWidth) > (document.body.clientWidth + document.body.scrollLeft)){
locateObject(object).style.left = (document.body.clientWidth + document.body.scrollLeft) - locateObject(object).clientWidth-10;
} else
{
locateObject(object).style.left=document.body.scrollLeft+event.clientX
}
locateObject(object).style.visibility="visible" //tipTimer=window.setTimeout("hideTooltip('"+object+"')", displaytime);
window.setTimeout("hideTooltip('"+object+"')", displaytime);
}
else if (document.layers)
{
'<table width="15" border="0" cellspacing="1" cellpadding="1"><tr bgcolor="'+bordercolor+'"><td><table width="15" border="0" cellspacing="0" cellpadding="2"><tr bgcolor="'+backcolor+'"><td nowrap><font style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 8px; color: '+textcolor+'">'+unescape(tipContent)+'</font></td></tr></table><td></tr></table>') locateObject(object).document.close()locateObject(object).document.write(
locateObject(object).top=e.y+20
if ((e.x + locateObject(object).clip.width) > (window.pageXOffset + window.innerWidth))
{
elselocateObject(object).left = window.innerWidth - locateObject(object).clip.width-10;
}
{
locateObject(object).left=e.x;
}
locateObject(object).visibility="show" //tipTimer=window.setTimeout("hideTooltip('"+object+"')", displaytime);
window.setTimeout("hideTooltip('"+object+"')", displaytime);
}
else
{
return true
}
}
<
DIV id="dHTMLToolTip1" style="Z-INDEX: 1000; LEFT: 0px; WIDTH: 15px; POSITION: absolute; TOP: 0px; HEIGHT: 15px"></DIV><script language="javascript">
and im calling it via:
<asp:HyperLink ID="HyperLink1" runat="server"><a href="#" onclick="showTooltip('dHTMLToolTip1', event, '<IMG SRC=http://ecx.images-amazon.com/images/I/513TRFBGN5L._SL160_.jpg', '#ffffe1', '#000000', '#DFDFAB', '20000')">HyperLink</a></asp:HyperLink><br />
if i type in the address of the image in a web browser it displays it correctly but not if i click on the link?
Pushkar
Contributor
5747 Points
1111 Posts
Re: add "onclick" attribute to gridview data row.
Jul 09, 2008 11:25 AM|LINK
Do you want to show image on the Hover Event of the Link Button..?..i think so
====================================
Pushkar
mrssm
Member
603 Points
230 Posts
Re: add "onclick" attribute to gridview data row.
Jul 09, 2008 11:42 AM|LINK
hi, thanks for replying. yeah thats what i want to. my javascript function works as ive tested it with a hyperlink seperately e.g.:
in the aspx page i wrote the following:
<asp:HyperLink ID="HyperLink1" runat="server"><a href="#" onclick="showTooltip('dHTMLToolTip1', event, '<IMG SRC=http://ecx.images-amazon.com/images/I/513TRFBGN5L._SL160_.jpg>', '#ffffe1', '#000000', '#DFDFAB', '20000')">HyperLink</a></asp:HyperLink><br />and this displays the picture fine, howver when i try to do it in the code behind (as below) it doesnt display anything, just does a postback on the page?
HyperLink1.Attributes.Add(
"onclick", "showTooltip('dHTMLToolTip1', event, '<IMG SRC=http://ecx.images-amazon.com/images/I/513TRFBGN5L._SL160_.jpg', '#ffffe1', '#000000', '#DFDFAB', '20000');");any ideas?