Solved

ItemCommand event not propogating on ImageButton click

Posted on 2006-11-16
28
579 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
Comment Utility
Did you try adding an event handler to button when it is defined?

Bob
0
 
LVL 5

Author Comment

by:steve_bagnall
Comment Utility
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
Comment Utility
I was thinking that it would probably be easier in the DataGrid.ItemCreated or DataGrid.ItemDataBound event handlers.

Bob
0
 
LVL 5

Author Comment

by:steve_bagnall
Comment Utility
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
Comment Utility
Steve,

Is this an ItemTemplate or EditItemTemplate?

Bob
0
 
LVL 5

Author Comment

by:steve_bagnall
Comment Utility
ItemTemplate
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
What does the generated HTML <table> look like?

Bob
0
 
LVL 5

Author Comment

by:steve_bagnall
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
eguilherme, my comment before last was not to you, but my last one was
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
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
Comment Utility
sorry guys - the button is undefined in DataBinding too
0
 
LVL 5

Author Comment

by:steve_bagnall
Comment Utility
Any ideas, should that have worked?
0
 
LVL 10

Expert Comment

by:eguilherme
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks eguilherme
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Can you show me the ItemDataBound event handler, please?

Bob
0
 
LVL 5

Author Comment

by:steve_bagnall
Comment Utility
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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
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 demo shows you how to set up the containerized NetScaler CPX with NetScaler Management and Analytics System in a non-routable Mesos/Marathon environment for use with Micro-Services applications.
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

762 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now