OnClick

Hi Experts,

I am trying to create a web page where users can select one of too teams and place a bet.

The following is an example of the first column in the table where I would like to click.

Currently when I click It fails and says ColA_Click is undefined.

Also I would like to pass Command Arguments to ColA_Click but I don't know how.

This is ColAClick in my code behind file

    Public Sub ColA_Click(ByVal sender As Object, ByVal e As EventArgs)
        lblInfo.Text = "INSIDE A"
    End Sub
 

And this is the column example.



<asp:TemplateColumn  HeaderText="&lt;b&gt;Team 1&lt;/b&gt;" ItemStyle-Width="140px">
<ItemTemplate>
<Table id="ColA"  width="180pt" style="cursor: hand; cursor: pointer;">
  <tr>
    <td onclick="ColA_Click"  onmouseover="bgColor='#FFE682'"  onmouseout="bgColor='Silver'" bgcolor='Silver' >
    <table border="0" class="item">
      <tr>
        <td width="120pt" class="label" align="left">
          <%# Container.DataItem("TeamA") %>
        </td>
        <td width="60pt" class="odd" align="right">
          <%# Container.DataItem("OddsA") %>
        </td>
      </tr>
    </table>
    </td>
  </tr>
</Table>
</ItemTemplate>
</asp:TemplateColumn>
LVL 6
MafaldaAsked:
Who is Participating?
 
bsdotnetCommented:
You can change to this,

<asp:TemplateField >
<ItemTemplate>
<Table id="ColA"  width="180pt" style="cursor: hand; cursor: pointer;">
  <tr>
    <td onclick="ColA_Click('<%# Container.DataItem("col1") %>','<%# Container.DataItem("col2") %>')"  onmouseover="bgColor='#FFE682'"  onmouseout="bgColor='Silver'" bgcolor='Silver' >
    <table border="0" class="item">
      <tr>
        <td width="120pt" class="label" align="left">
          <%# Container.DataItem("col1") %>
        </td>
        <td width="60pt" class="odd" align="right">
          <%# Container.DataItem("col2") %>
        </td>
      </tr>
    </table>
    </td>
  </tr>
</Table>
</ItemTemplate>
</asp:TemplateField>

and then use the javascript to pass selected items to same page or different page:
    <script language=javascript>
        function ColA_Click(A,B) {
            document.location.href='gridview3.aspx?col1=' + A + '&col2=' + B;                
        }
    </script>
0
 
existenz2Commented:
Use a <asp:Table> instead of a normal table and <asp:tablecolumn> instead of <td> etc... and add a runat="server" too it.

Here's a nice tutorial on using tables in asp.net: http://www.c-sharpcorner.com/asp/Controls/TableControlPSD.asp
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
MafaldaAuthor Commented:
Well, it is ok to switch to asp:Table if I can acomplish at least the same I am accomplishing now.
At the moment I am using onclick, onmouseover and onmouseout in HTML table
Looking at the documentation I don't see a way to do that with asp:Table.
I am sure there is a way, I just can't find it ...

After switching to asp:Table the code includes

<asp:Table>, <asp:TableRow> and <asp:TableCell> instead of <table> <tr> and <td>


I lost all the "mouse movement " colors and pointer functionality and I still cant find a way to click ...

onclick="ColA_Click"  onmouseover="bgColor='#FFE682'"  onmouseout="bgColor='Silver'"
0
 
MafaldaAuthor Commented:
Currently this is how it looks like.
I have the ColA_Click subroutine but it is not called.
In addition on VisualStudio I could see the bounded cells in design mode and now they dissapeared.

<asp:TemplateColumn HeaderText="&lt;b&gt;Team 1&lt;/b&gt;" ItemStyle-Width="140px">
<ItemTemplate>
  <asp:Table id="ColA" width="180pt" style="cursor: hand; cursor: pointer;" runat="server">
    <asp:TableRow>
      <asp:TableCell>
        <asp:Table id="item" BorderWidth="0">
          <asp:TableRow>
            <asp:TableCell Width="120pt" HorizontalAlign="Left">
               <%# Container.DataItem("TeamA") %>
           </asp:TableCell>
           <asp:TableCell Width="60pt" HorizontalAlign="Right">
              <%# Container.DataItem("OddsA") %>
          </asp:TableCell>
        </asp:TableRow>
      </asp:Table>
    </asp:TableCell>
  </asp:TableRow>
</asp:Table>
</ItemTemplate>
</asp:TemplateColumn>
0
 
bsdotnetCommented:
(i am referring to the code in your question), you need to put your event in javascript instead,  
for example,
    <script language=javascript>
        function ColA_Click() {
            alert("a");
        }
    </script>
0
 
MafaldaAuthor Commented:
1) I saw javascripts implementations, I was sure MS will have a VB alternative way to do it.
I will try the javascript approach.

2) Is there a way to implement onmouseover, onmouseout and onclick using a <asp:Table> instead of a <table>

Thanks,
Maf
0
 
GavinMannionCommented:
Are you just trying to get your click event handled in the codebehind?

Then I would recommend changing the whole embedded table onclick idea and just set the labels to be link buttons. Then catch the onlick of the link button.
0
 
MafaldaAuthor Commented:
I need the table cells to be clickable and formatable.
I shouldnt use buttons if possible.
Those are the requirements of the project.
I saw this done all over (javascript included inside) in web sites.

It seems absurd to use 3 languages to accomplish a misserable task ... presenting a table with clickable formattable cells.

Also maintaining such an application gets more complicated.

I would like to use VB.NET and HTML (avoid it as much as I can) only.

Maf
0
 
GavinMannionCommented:
the onclick command on tables is for client side javascript.
To just get a table cell that can be clicked on... I think I would ue javascript.

Sorry I don't know of a nicer way around that.
0
 
MafaldaAuthor Commented:
Sorry for the pause, but I needed to step out from the project for 2 weeks.
Im back now and I trirf to implement the javascript solution/workaround

I get the following message (debugging message):
error BC30201: Expression expected.
target.SetDataBoundString(1, System.Convert.ToString(Container.DataItem('OddsB')))

The code change I made is as follows:

First I added the javascript function

<script language=javascript>     
function ColB_Click2(A,B)
{
  document.location.href='Games2.aspx?A=' + A + '& B=' + B;
}
</script>

Then I changed the code as follows


<ItemTemplate>
  <Table id="ColB" onclick="ColB_Click2('<%#Container.DataItem('TeamB')%>','<%#Container.DataItem('OddsB')%>')" width="180pt" style="cursor: hand; cursor: pointer;">
    <tr>
      <td  onmouseover="bgColor='#FFE682'"  onmouseout="bgColor='Silver'" bgcolor='Silver' >
        <table border="0" class="item">
          <tr>
            <td width="120pt" class="label" align="left">
            <%# Container.DataItem('TeamB') %>
           </td>
          <td width="60pt" class="odd" align="right">
           <%# Container.DataItem('OddsB') %>
          </td>
        </tr>
      </table>
     </td>
   </tr>
  </Table>
</ItemTemplate>

Same error appears if i try to change it to

onclick="ColB_Click2(<%#Container.DataItem('TeamB')%>,<%#Container.DataItem('OddsB')%>)"

omitting hte quotes

Using double quotes is a syntax error with a suggestion to change the quotes type (my guess from double to single)
0
 
MafaldaAuthor Commented:
Ok a few more remarks/corrections

The code for the cells is
            <td width="120pt" class="label" align="left">
            <%# Container.DataItem("TeamB") %>
           </td>
          <td width="60pt" class="odd" align="right">
           <%# Container.DataItem("OddsB") %>
using double quotes.

In addiiton and more important changing the code to pass strings work.
e.g.
onclick="ColB_Click2('A', 'B')"

0
 
GavinMannionCommented:
Try

onclick="ColB_Click2('" + <%#Container.DataItem('TeamB')%>+ "','" +<%#Container.DataItem('OddsB')%> + "')"

0
 
MafaldaAuthor Commented:
Well the following seems to be the right sysmtax to do it

<Table id="ColB" onclick="ColB_Click2('<%#Container.DataItem("ID")%>','<%#Container.DataItem("TeamB")%>','<%#Container.DataItem("OddsB")%>')" width="180pt" style="cursor: hand; cursor: pointer;">

Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.