Adding javascript event to datagrid control

[Sjaakie Helderhorst]

Hello,
I need to add a Javascript event (onClick) to a servercontrol
(asp:checkbox). Checkbox is named 'cbDoMail'.
Assumed that 'cbDoMail.Attributes.Add("onClick", "doJavascriptThing()")
would do the job, unfortunately it didn't.

Can anyone point me in the right direction?

Thanks!

 

[Shiva]

Hi,

You can directly add the onClick attribute to the checkbox as in
<asp:CheckBox onClick="doJavascriptThing()" runat=server>

Hello,
I need to add a Javascript event (onClick) to a servercontrol
(asp:checkbox). Checkbox is named 'cbDoMail'.
Assumed that 'cbDoMail.Attributes.Add("onClick", "doJavascriptThing()")
would do the job, unfortunately it didn't.

Can anyone point me in the right direction?

Thanks!

 

[Shiva]

Hi Eliyahu,

For a CheckBox server control, onClick attribute hooks a client-side JS
event handler.

This will add a server-side event. If a client-side one is needed,
Attributes is the way to go.

Eliyahu

 

[Eliyahu Goldin]

This should be fine. Where is the datagrid mentioned in the subject?

Eliyahu

 

[Eliyahu Goldin]

This will add a server-side event. If a client-side one is needed,
Attributes is the way to go.

Eliyahu

 

[Shiva]

onClick event-handler for a server-side CheckBox runs on the client-side
(yes, you are right that check boxes do not have server-side Click event).
As I understand from the original post, the requirement is to run a JS
script on click of a checkbox; so onClick can be used.

What do you mean? Where will doJavascriptThing() run? In your example it
will run on server after a postback. By the way, there is no server event
OnClick for CheckBox control in the first place.

Eliyahu

 

[Sjaakie Helderhorst]

This should be fine. Where is the datagrid mentioned in the subject?

Eliyahu

Sorry forgot to specifically mention the Datagrid...
Simply adding 'onClick="doJavascriptThing()"' ends up with '<span
onClick="doJavascriptThing()"><input type="checkbox"...' which is not very
useful.
Whenever I put 'cbDoMail.Attributes.Add("onClick", "doJavascriptThing()")'
in onLoad-event it throws an 'Object reference not set to an instance of an
object'.

Design-code:
<asp:TemplateColumn HeaderText="Mail">
<ItemTemplate>
<asp:CheckBox ID="cbDoMail" Visible="true" enabled="true"
Runat="server" Checked='<%# DataBinder.Eval(Container.DataItem, "DoMail")
%>'></asp:CheckBox>
</ItemTemplate>
</asp:TemplateColumn>

Code-behind:
Protected WithEvents cbDoMail As System.Web.UI.WebControls.CheckBox

Private Sub Page_Load(......)
cbDoMail.Attributes.Add("onClick", "doJavascriptThing()")
....

Hope this this is more clear...

 

[Eliyahu Goldin]

What do you mean? Where will doJavascriptThing() run? In your example it
will run on server after a postback. By the way, there is no server event
OnClick for CheckBox control in the first place.

Eliyahu

 

[Shiva]

Hi,

Change the checkbox markup in the template column as:

<asp:CheckBox ID="cbDoMail" Visible="true" enabled="true"
Runat="server" Checked='<%# DataBinder.Eval(Container.DataItem, "DoMail")
%>' onClick='alert("Clicked");'></asp:CheckBox>

I have put alert() just for demo purpose. Of course, you can have your own
JS script here.

Another option is to handle the ItemDataBound event of the grid: Get the
reference to the checkbox control in the row being bound, and do
<chkbox>.Attributes.Add(..)

This should be fine. Where is the datagrid mentioned in the subject?

Eliyahu

Sorry forgot to specifically mention the Datagrid...
Simply adding 'onClick="doJavascriptThing()"' ends up with '<span
onClick="doJavascriptThing()"><input type="checkbox"...' which is not very
useful.
Whenever I put 'cbDoMail.Attributes.Add("onClick", "doJavascriptThing()")'
in onLoad-event it throws an 'Object reference not set to an instance of an
object'.

Design-code:
<asp:TemplateColumn HeaderText="Mail">
<ItemTemplate>
<asp:CheckBox ID="cbDoMail" Visible="true" enabled="true"
Runat="server" Checked='<%# DataBinder.Eval(Container.DataItem, "DoMail")
%>'></asp:CheckBox>
</ItemTemplate>
</asp:TemplateColumn>

Code-behind:
Protected WithEvents cbDoMail As System.Web.UI.WebControls.CheckBox

Private Sub Page_Load(......)
cbDoMail.Attributes.Add("onClick", "doJavascriptThing()")
....

Hope this this is more clear...

 

[Eliyahu Goldin]

You forgot to mention the most important thing! That is that the whole story
is taking place in a TemplateColumn.
The solution is simple. Just do cbDoMail.Attributes.Add("onClick",
"doJavascriptThing()") in ItemDataBound event handler rather than in the
PageLoad one. On page load stage there are no items. They are created and
populated on databind stage.

Eliyahu

 

[Sjaakie Helderhorst]

I tried:

Private Sub gridItems_ItemDataBound(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.DataGridItemEventArgs) Handles
gridItems.ItemDataBound
Dim cb As CheckBox
cb = e.Item.FindControl("cbDoMail")
cb.Attributes.Add("onClick", "doJavascriptThing()")
End Sub

Result: 'Object reference not set to an instance of an object'.

Since this is my first ItemDataBound event-handling, I might be doing
something wrong...

 

[Sjaakie Helderhorst]

Hi,

Change the checkbox markup in the template column as:

<asp:CheckBox ID="cbDoMail" Visible="true" enabled="true"
Runat="server" Checked='<%# DataBinder.Eval(Container.DataItem, "DoMail")
%>' onClick='alert("Clicked");'></asp:CheckBox>

I have put alert() just for demo purpose. Of course, you can have your own
JS script here.

This DID do the trick... apparently the single-quotes made sense to the
compiler, double quotes didn't
Thanks!

 

[Sjaakie Helderhorst]

Not sure, maybe it just adds all unknown parameters to the input-tag.
Would cover all future tags...

 

[Sjaakie Helderhorst]

Thanks for the support.
Learned some things today!

Thanks again!

 

[Shiva]

No hacking! It is not in the documentation may be because its a client-side
event.

I am very surprised. Is that a sort of hacking thing? OnClick is NOT
documented for checkbox.

Eliyahu

 

[Eliyahu Goldin]

You need to ignore items of types Header, Footer and Pager. The reason for
the message is that the first item is the header, and there is no checkbox
over there.

Also, item represents a row and your checkbox is in a cell. Therefore, you
should use e.Item.Cell{index).FindControl("cbDoMail"), where index is the
index of the TemplateColumn with the checkbox.

Eliyahu

 

[msnews.microsoft.com]

Shiva is right. VS.NET will complain that it's not a valid server control
attribute, but it normally shows up just fine when run.

-Max

 

[Eliyahu Goldin]

I am very surprised. Is that a sort of hacking thing? OnClick is NOT
documented for checkbox.

Eliyahu

 

[Eliyahu Goldin]

And you can setup all other client events in the same way? If it is not
documented, you can't guarantee it will be there in the next version.

Eliyahu

 

[Shiva]

Hi,
What I meant was that onClick is not described in the CheckBox control
documentation. But, it is up there in the HTML/DHTML documentation for
client-side events. Also, this event is part of the HTML standard
(http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/re
ference/events/onclick.asp)

And, I dont think this event will be removed in any future versions of
CheckBox control.

And you can setup all other client events in the same way? If it is not
documented, you can't guarantee it will be there in the next version.

Eliyahu