Solved

ItemCommand event not propogating on ImageButton click

Posted on 2006-11-16
28
588 Views
Last Modified: 2010-07-27
Sorry for the stingy point allocation, it's all I have left!  I have a datagrid with a dynamically generated template column below that contains an ImageButton.  I would like for when the button is clicked, the ItemCommand event is raised on the datagrid.  In the following code, this does not happen.  Is there a way to get this to work?  

Cheers, Steve.

public class DGTempColumn : System.Web.UI.Page
{
      protected System.Web.UI.WebControls.DataGrid DataGrid1;

      private void Page_Load(object sender, System.EventArgs e)
      {
            DataSet ds = new DataSet();
            DataTable dt = new DataTable();
            ds.Tables.Add(dt);
            dt.Columns.Add(new DataColumn("test 1"));
            dt.Columns.Add(new DataColumn("test 2"));

            DataRow dr = dt.NewRow();
            dr["test 1"] = "test 1 1";
            dr["test 2"] = "test 2 1";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["test 1"] = "test 1 2";
            dr["test 2"] = "test 2 2";
            dt.Rows.Add(dr);

            DataGrid1.DataSource = ds;
            DataGrid1.DataBind();
      }

      private void Handle_DataGrid1ItemCommand(object sender, DataGridCommandEventArgs args)
      {
            string test = args.CommandName;      // NOT HIT
      }

      #region Web Form Designer generated code
      override protected void OnInit(EventArgs e)
      {
            TemplateColumn tmView = new TemplateColumn();
            tmView.HeaderTemplate = new AddColumn(ListItemType.Header, Page);
            tmView.ItemTemplate = new AddColumn(ListItemType.Item, Page);
            DataGrid1.Columns.Add(tmView);

            DataGrid1.ItemCommand += new DataGridCommandEventHandler(Handle_DataGrid1ItemCommand);
            InitializeComponent();
            base.OnInit(e);
      }

      /// <summary>
      /// Required method for Designer support - do not modify
      /// the contents of this method with the code editor.
      /// </summary>
      private void InitializeComponent()
      {    
            this.Load += new System.EventHandler(this.Page_Load);
      }
      #endregion
}

public class AddColumn : ITemplate
{
      private ListItemType templateType;
      private Page parentPage;

      public AddColumn(ListItemType type, Page page)
      {
            templateType = type;
            parentPage = page;
      }

      public void InstantiateIn(System.Web.UI.Control container)
      {
            switch(templateType)
            {
                  case ListItemType.Header:
                        break;
                            case ListItemType.Item:
                        ImageButton imgPlus = new ImageButton();
                        imgPlus.CommandName = "Add";
                        imgPlus.Width = 10;
                        imgPlus.ImageUrl = @"~/images/plus.gif";
                        imgPlus.ToolTip = "Click to add or insert.";
                        container.Controls.Add(imgPlus);
                        break;
            }
      }
}

0
Comment
Question by:steve_bagnall
  • 15
  • 9
  • 4
28 Comments
 
LVL 96

Expert Comment

by:Bob Learned
ID: 17955152
Did you try adding an event handler to button when it is defined?

Bob
0
 
LVL 5

Author Comment

by:steve_bagnall
ID: 17955358
And raise an event in the template column you mean?  If so do you know how I attach an event handler to the template?

Cheers, Steve
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 17955378
I was thinking that it would probably be easier in the DataGrid.ItemCreated or DataGrid.ItemDataBound event handlers.

Bob
0
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
LVL 5

Author Comment

by:steve_bagnall
ID: 17955467
The ImageButton control doesn't seem to exist yet when I try and attach an event handler to it on either of those events.  Any other ideas?

Steve
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 17955524
Steve,

Is this an ItemTemplate or EditItemTemplate?

Bob
0
 
LVL 5

Author Comment

by:steve_bagnall
ID: 17955575
ItemTemplate
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 17955589
What does the generated HTML <table> look like?

Bob
0
 
LVL 5

Author Comment

by:steve_bagnall
ID: 17955657
This is with the original code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
      <HEAD>
            <title>DGTempColumn</title>
            <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
            <meta name="CODE_LANGUAGE" Content="C#">
            <meta name="vs_defaultClientScript" content="JavaScript">
            <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
      </HEAD>
      <body MS_POSITIONING="GridLayout">
            <form name="Form1" method="post" action="DGTempColumn.aspx" id="Form1">
<input type="hidden" name="__VIEWSTATE" value="<VIEWSTATE>" />

                  <table cellspacing="0" rules="all" border="1" id="DataGrid1" style="border-collapse:collapse;Z-INDEX: 101; LEFT: 232px; POSITION: absolute; TOP: 184px">
      <tr>
            <td></td><td>test 1</td><td>test 2</td>
      </tr><tr>
            <td><input type="image" name="DataGrid1:_ctl2:_ctl0" title="Click to add or insert the first divert." src="images/expandingdatagrid_plus.gif" alt="" border="0" style="width:10px;" /></td><td>test 1 1</td><td>test 2 1</td>
      </tr><tr>
            <td><input type="image" name="DataGrid1:_ctl3:_ctl0" title="Click to add or insert the first divert." src="images/expandingdatagrid_plus.gif" alt="" border="0" style="width:10px;" /></td><td>test 1 2</td><td>test 2 2</td>
      </tr>
</table>
            </form>
      </body>
</HTML>
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 17955763
I see the ImageButton here:
   <input type="image" name="DataGrid1:_ctl2:_ctl0"

The control doesn't seem to have an ID assigned, so that you could use FindControl("id") to get a reference to the ImageButton.

Bob
0
 
LVL 10

Expert Comment

by:eguilherme
ID: 17955810
if im correct the ItemCommand event only fires for the Button control.. any1 else u have to manually add the handler (might be wrong)

so at the ItemCreated event of the DataGrid try like this

(ps. in VB.NET )

Private Sub DataGrid1_ItemCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles DataList1.ItemCreated
                    Dim chk As ImageButton = e.Item.FindControl("ImageButtonID")
                    AddHandler chk.Clicked, AddressOf Chk_Click
                End Sub

Private Sub Chk_Click(ByVal sender As Object, ByVal e As System.EventArgs)
  'here it will fire wenever the imagebutton is clicked
end sub


not tested but should work with minor changes
0
 
LVL 5

Author Comment

by:steve_bagnall
ID: 17955840
Giving the Image button an ID of "badger" produces the following

<input type="image" name="DataGrid1:_ctl2:badger" id="DataGrid1__ctl2_badger" title="Click to add or insert the first divert." src="images/expandingdatagrid_plus.gif" alt="" border="0" style="width:10px;" />

and,

<input type="image" name="DataGrid1:_ctl3:badger" id="DataGrid1__ctl3_badger" title="Click to add or insert the first divert." src="images/expandingdatagrid_plus.gif" alt="" border="0" style="width:10px;" />

Are you saying that I need to predict these IDs in some way?
0
 
LVL 10

Expert Comment

by:eguilherme
ID: 17955856
u saying to me ?

if the imageid is badger then:

  Dim chk As ImageButton = e.Item.FindControl("badger")

.NET knows who's who (at least in the itemCreated)

0
 
LVL 5

Author Comment

by:steve_bagnall
ID: 17955910
eguilherme,

The image button doesn't seem to exist at create, chk in your code is null when I attempt to add the event handler to it having added an ID property to the image and using args.Item.FindControl("ID").

Steve
0
 
LVL 5

Author Comment

by:steve_bagnall
ID: 17955926
eguilherme, my comment before last was not to you, but my last one was
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 17955963
Yeah, the control won't exist until the grid is bound to the DataSource--use ItemDataBound event handler instead.

Bob
0
 
LVL 5

Author Comment

by:steve_bagnall
ID: 17956011
sorry guys - the button is undefined in DataBinding too
0
 
LVL 5

Author Comment

by:steve_bagnall
ID: 17956671
Any ideas, should that have worked?
0
 
LVL 10

Expert Comment

by:eguilherme
ID: 17956699
are u sure the ImageButton Control Id is "ID" ?

args.Item.FindControl("ID")

well when i get home i ll try to make a workin example to show u..

btw.. are u using asp.net 1 or 2 ??

0
 
LVL 5

Author Comment

by:steve_bagnall
ID: 17956841
The ID is actually "badger", but I am also using args.Item.FindControl("badger") (I use args instead of e for some reason!)
Yeah I am using .NET 1.1
0
 
LVL 10

Assisted Solution

by:eguilherme
eguilherme earned 85 total points
ID: 17957300
that must be the reason for not workin i guess =/
i dont know how the events work and their order on .NET 1.1 (altho should be the same but who knows) cant u use .NET 2.0 ? :P

anyway when i get home i will make try to make on 1.1
0
 
LVL 5

Author Comment

by:steve_bagnall
ID: 17957376
Thanks eguilherme
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 17957403
If you put a breakpoint in ItemDataBound event handler, is it going into that?  Also, you can check the controls for each cell for the DataGridItem.

Bob
0
 
LVL 5

Author Comment

by:steve_bagnall
ID: 17957478
Bob,

I've tried putting a breakpoint in the event handler, that's how I know that the ImageButton object is null.  Also, the first method I used to try and access the ImageButton was to get the right cell in the e.Item.Cells collection, then access the Controls property (which was empty), before I used the FindControl method.  So I'm pretty sure that it's not working as planned.  I wouldn't have thought this would be so difficult, perhaps I'm missing something obvious!

Steve
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 17957518
Steve,

This should work as advertised.  I see this:

   <td><input type="image"

That means that you have an HTML table cell, and a control for the cell.

Bob
0
 
LVL 5

Author Comment

by:steve_bagnall
ID: 17957574
I know, but it doesn't seem to exist at the time of either DataBind or ItemCreate, are you saying that it should?
0
 
LVL 96

Accepted Solution

by:
Bob Learned earned 85 total points
ID: 17957595
Can you show me the ItemDataBound event handler, please?

Bob
0
 
LVL 5

Author Comment

by:steve_bagnall
ID: 17957642
private void Handle_DataGrid1ItemDataBound(object sender, DataGridItemEventArgs args)
{
      ImageButton btn = (ImageButton)args.Item.FindControl("badger");
      btn.Command += new CommandEventHandler(Handle_btnCommand);
}
0
 
LVL 5

Author Comment

by:steve_bagnall
ID: 17959875
Sorry guys solved it (it is pretty simple too) - the DataBind for the DataGrid needs to go in a if(!IsPostBack), cause it resets everything - doh!  Thanks both for your help though - I'll share the points as there aren't many and I'm sure you helped me get there.
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
This Micro Tutorial will give you a basic overview how to record your screen with Microsoft Expression Encoder. This program is still free and open for the public to download. This will be demonstrated using Microsoft Expression Encoder 4.
This video shows how to use Hyena, from SystemTools Software, to bulk import 100 user accounts from an external text file. View in 1080p for best video quality.

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question