DataGrid with Checkbox: Need both OnCheckedChanged and onclick client script

[Homa]

Hi,

I have a Datagrid that uses as a shopping cart and have a checkbox
template column in it. I can't add both OnCheckedChanged Event and
onclick client script for it.


I want to do two things:

1. I want the checkbox fires CheckedChanged event. I did this as
follows:

In the DataGrid:
<templateColumn>
....
<asp:CheckBox id="chk" runat="server" AutoPostBack=True
OnCheckedChanged="handler" />
....
</templateColumn>

This works fine.....by itself

2. I want to show a confirm box:

In the same CheckBox:
<asp:CheckBox ... onclick="javascript:return confirm('Are you
Sure?');" />

This again, works fine by itself.

But when these two code goes together. Only the confirm button will
show without doing the postback.

When I look that the source, I saw both of them use the onclick,
resulting both javascript combined together:


name="dg:_ctl2:chk"
language="javascript"
onclick="Javascript:return confirm('Are you
sure?');__doPostBack('dg$_ctl2$chk','')"


Can anyone give me some idea about how to solves this?

Thanks,
Homa Wong

 

[Dave Moore]

Hi -
I'm actually trying to solve this same problem. Has anyone found any
solution to this? It's driving me nuts!
Thanks!

 

[James Friesen]

I ran into the same problem, and couldn't find a solution here, so I
managed to find a workaround.

You are correct that .net seems to combine the two functions into one
which creates the problem.

My stategy here was to manually call the autopostback.
First, I set the autopostback on the checkbox to false.

Note: If you now have no controls on the form with sutopostback set
to true, then the __doPostBack function will not be autogenerated.

The easy solution to this is to create a control (give it height=0 and
width=0) with autopostback=true

Or you can copy and paste a __doPostBack method by viewing the source
before you remove the autopostback, but I personally would just create
an extra control

In my .vb file

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles MyBase.Load
Me.CheckBox1.Attributes.Add("OnClick", "javasctipt:CheckConfirm();")
End Sub

Protected Sub Blah(ByVal Sender As Object, ByVal E As
System.EventArgs)
'do whatever
'Me.Label1.Text = "Blah"
End Sub


In my .aspx file

<script language="javascript">
function CheckConfirm() {

if (confirm("Are you Sure?"))
__doPostBack('CheckBox1','');
}
</script>

<asp:CheckBox OnCheckedChanged="blah" id="CheckBox1" style="Z-INDEX:
102; LEFT: 31px; POSITION: absolute; TOP: 28px"
runat="server"></asp:CheckBox>


Hope that helps
James

P.S. I have by hotmail filter set to junk all emails which are not in
my address book, so if you have any questions, please reply to the
newsgroup

 

[nchavan]

Hi

Below is the Solution:

The major part is : at the time of binding data to grid, you have to attache function that will be invoked when you select / deselect cheched box and the function must have parameters as HeaderCheckBox Name and the rowcheckbox name

In .aspx, the grid should be

<asp:GridView ID="gdChange" runat="server" CellPadding="1" CellSpacing="1"
BorderWidth="0" AutoGenerateColumns="false"
onrowdatabound="gdChange_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="Select" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" >
<HeaderTemplate>
<asp:CheckBox ID="chkHeader" runat="server"/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox id="chkSelect" runat="server"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblLastName" runat="server" Text='<% # Bind("LAST_NAME") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>


in .aspx.cs, you can have RowBound Event:

protected void gdChange_RowDataBound(object sender, GridViewRowEventArgs e)
{
try
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
CheckBox chkBxHeader = (CheckBox)this.gdChange.HeaderRow.FindControl("chkHeader");
chkBxHeader.Attributes.Add("onclick", "javascript:selectDeselectALL('" + chkBxHeader.ClientID + "');");

CheckBox chkItems = (CheckBox)e.Row.FindControl("chkSelect");
chkItems.Attributes.Add("onclick", "javascript:checkUncheck('" + chkBxHeader.ClientID + "','" + chkItems.ClientID + "');");
}
}
catch (Exception ex)
{

}
}

In .aspx , you can have the javascript code as

The function selectDeselectALL(), performs task of selecting / deselecting all child checkboxes.

The function checkUncheck(), detects and then does select/deselect of header checkbox

<script language="javascript" type="text/javascript">
function selectDeselectALL(objCheck) {
var chkHeader = document.getElementById(objCheck);

var inputCtrls = document.getElementsByTagName("input");
if (chkHeader.checked == true) {
// Iterate through loop in order to search input controls
for (var i = 0; i != inputCtrls.length; i++) {
if (inputCtrls.id.indexOf("_chkSelect") != -1) {
inputCtrls.checked = true;
}
}
}
else if (chkHeader.checked == false) {
// Iterate through loop in order to search input controls
for (var i = 0; i != inputCtrls.length; i++) {
if (inputCtrls.id.indexOf("_chkSelect") != -1) {
inputCtrls.checked = false;
}
}
}
}

function checkUncheck(objHeader, objItem) {
var isFound = false;
var objHeaderCheck = document.getElementById(objHeader);
var objSelect = document.getElementById(objItem);

var inputCtrls = document.getElementsByTagName("input");

for (var i = 0; i != inputCtrls.length; i++) {
if (inputCtrls.id.indexOf("_chkSelect") != -1) {
if (inputCtrls.checked) {
isFound = true;
break;
}
}
}

if (isFound == true) {
objHeaderCheck.checked = true;
}
else {
objHeaderCheck.checked = false;
}
}

</script>

I hope, this will solve your problem.

Thanks
Nikhil Chavan