How to add client script to a pushbutton in datagrid

[VancouverMike]

Hi there,

I hope I post this question to a right place. If not, please let me know.

I am using a datagrid in my asp.net web app to show a user list. I put a
pushbutton (could be linkbutton as well) for each row in the grid. I would
like to have a javascript function linked to each button, so when user clicks
the button, another pupup window shows up to show an image of the selected
user in the list. I am looking for a way to add client side javascript
function to each button and passing the each user's key to the function.

Thanks in advance.
Mike

 

[Steven Cheng[MSFT]]

Hi Mike,

Welcome to the ASPNET newsgroup.

As for the adding script behavior on buttons in datagrid rows, are you
developing the page through ASP.NET 1.x or the new ASP.NET 2.0? I assume
that you're using ASP.NET 1.x(Since datagrid is mostly replaced by GridView
in 2.0). For ASP.NET 1.x, if you want to do some customization on the sub
controls(like a button) in datagrid row, I suggest you consider using
TemplateColumn since this can allow us to do much customization. And to add
client-side script behavior for a certain control in the templatecolumn,
there exists serveral approachs:

1. directly embeded the script in template through databinding
expression(if the embeded script is not too complex to handle in
databinding expression. e.g:

===========================
<aspataGrid id="dgGrid" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="Text" HeaderText="Text"></asp:BoundColumn>
<asp:BoundColumn DataField="Value"
HeaderText="Value"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="Ops">
<HeaderTemplate>

</HeaderTemplate>
<ItemTemplate>
<INPUT type="button" value="Button" onclick='pop_up("<%#
DataBinder.Eval(Container.DataItem,"Value") %>");'/>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</aspataGrid>
===============================

=======code behind========
private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
if(!IsPostBack)
{
ListItemCollection items = new ListItemCollection();
for(int i=0;i<10;i++)
{
items.Add("item_" + i);
}

dgGrid.DataSource = items;
dgGrid.DataBind();
}
}
===========================

In above code I bind the grid with a simple ListItemcollection. and use
some databindig expression to add the script behavior for the html button
element(let it open a modeless dialog display the certain show picture
page, by passing the userid).

2. we can use the datagrid's ItemDataBound or ItemCreated event to
programmatically locate sub controls from DataGrid Cell and do some
customization on them. e.g:


================
private void dgGrid_ItemCreated(object sender,
System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType ==
ListItemType.AlternatingItem)
{
TextBox txt = e.Item.Cells[0].FindControl("txtXXX") as TextBox;
//......
}
}
====================

I use the ItemCreated event to locate a textbox control I defined in the
datagrid's column 0


Hope this helps. If there's anything unclear, please feel free to let me
know.


Regards,

Steven Cheng
Microsoft Online Community Support


==================================================

When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.

==================================================


This posting is provided "AS IS" with no warranties, and confers no rights.

 

[VancouverMike]

Hi Steven,

Thanks a lot for your reply. Yes, you are right, I am using asp.net 1.1 and
VS.NET 2003.

I tried your solution and it works perfect. I just have another small
question. As in my datagrid, for each user there might not be an image linked
to it. If the user has an image, I would like to put a button there so you
can click it to show the image. If the user doesn't have an image, I would
like to hide the button or disable the button. I tried the following but it
didn't work:

<INPUT type="button" class="Button"
disable="<%#DataBinder.Eval(Container.DataItem,"ImageId").ToString() == "" ?
"false" : "true";%> value="View ID Image"
onclick='ViewIDImage("<%#DataBinder.Eval(Container.DataItem,"ImageId")%>");'/>

I also tried the following and it didn't work either:

<%#DataBinder.Eval(Container.DataItem,"ImageId").ToString() == ""){%>
<INPUT type="button" class="Button" value="View ID Image"
onclick='ViewIDImage("<%#DataBinder.Eval(Container.DataItem,"ImageId")%>");'/>
<%}%>

As you can see, I have problem getting hold of the ImageId value. Any
suggestion?

Thanks,
Mike

Hi Mike,

Welcome to the ASPNET newsgroup.

As for the adding script behavior on buttons in datagrid rows, are you
developing the page through ASP.NET 1.x or the new ASP.NET 2.0? I assume
that you're using ASP.NET 1.x(Since datagrid is mostly replaced by GridView
in 2.0). For ASP.NET 1.x, if you want to do some customization on the sub
controls(like a button) in datagrid row, I suggest you consider using
TemplateColumn since this can allow us to do much customization. And to add
client-side script behavior for a certain control in the templatecolumn,
there exists serveral approachs:

1. directly embeded the script in template through databinding
expression(if the embeded script is not too complex to handle in
databinding expression. e.g:

===========================
<aspataGrid id="dgGrid" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="Text" HeaderText="Text"></asp:BoundColumn>
<asp:BoundColumn DataField="Value"
HeaderText="Value"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="Ops">
<HeaderTemplate>

</HeaderTemplate>
<ItemTemplate>
<INPUT type="button" value="Button" onclick='pop_up("<%#
DataBinder.Eval(Container.DataItem,"Value") %>");'/>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</aspataGrid>
===============================

=======code behind========
private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
if(!IsPostBack)
{
ListItemCollection items = new ListItemCollection();
for(int i=0;i<10;i++)
{
items.Add("item_" + i);
}

dgGrid.DataSource = items;
dgGrid.DataBind();
}
}
===========================

In above code I bind the grid with a simple ListItemcollection. and use
some databindig expression to add the script behavior for the html button
element(let it open a modeless dialog display the certain show picture
page, by passing the userid).

2. we can use the datagrid's ItemDataBound or ItemCreated event to
programmatically locate sub controls from DataGrid Cell and do some
customization on them. e.g:


================
private void dgGrid_ItemCreated(object sender,
System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType ==
ListItemType.AlternatingItem)
{
TextBox txt = e.Item.Cells[0].FindControl("txtXXX") as TextBox;
//......
}
}
====================

I use the ItemCreated event to locate a textbox control I defined in the
datagrid's column 0


Hope this helps. If there's anything unclear, please feel free to let me
know.


Regards,

Steven Cheng
Microsoft Online Community Support


==================================================

When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.

==================================================


This posting is provided "AS IS" with no warranties, and confers no rights.

 

[Steven Cheng[MSFT]]

Hi Mike,

Thanks for your response.

As for the "disabled" attribute, if we put it on the html element, that
element will be disabled, it is not used as true/false pair. So you can try
using the following code to make the element disabled conditionally:

============================
<asp:TemplateColumn HeaderText="Ops">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<INPUT type="button" value="Button"
<%# HasImage(DataBinder.Eval(Container.DataItem,"Value")) %>
onclick='pop_up("<%# DataBinder.Eval(Container.DataItem,"Value") %>");'/>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</aspataGrid>
=====================

# "HasImage" is a custom helper function I defined in code behind(see below)

======code behind==========
protected string HasImage(object obj)
{
string val = obj.ToString();


if(val.IndexOf("3") > -1)
{
return "disabled";
}

return string.Empty;
}
===================================

Hope this also helps.

Regards,

Steven Cheng
Microsoft Online Community Support


==================================================

When responding to posts, please "Reply to Group" via your newsreader so
that others may

learn and benefit from your issue.

==================================================


This posting is provided "AS IS" with no warranties, and confers no rights.

 

[VancouverMike]

Hi Steve,

This is excellent! It works perfect.

Thanks very much.
Mike

 

[Steven Cheng[MSFT]]

You are welcome Mike,

Have a good day!

Regards,

Steven Cheng
Microsoft Online Community Support


==================================================

When responding to posts, please "Reply to Group" via your newsreader so
that others may

learn and benefit from your issue.

==================================================


This posting is provided "AS IS" with no warranties, and confers no rights.