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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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'"
PMI ACP® Project Management

Prepare for the PMI Agile Certified Practitioner (PMI-ACP)® exam, which formally recognizes your knowledge of agile principles and your skill with agile techniques.

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>
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>
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>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
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.
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
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.
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)
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')"

GavinMannionCommented:
Try

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

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.