Accessing events for dynamically generated buttons on a grid with in a widget

[HaroldBostic]

Hello, I have a grid defined in my widget.  for each row, I have an image that I want to act as the remove button.  How do I set the html, so that I know when the button/image is clicked.
I've tried variations of the commented and uncommented code in DeleteFormatter.   Any help would be gladly appreciated

Here's a subset of my class

startup: function() {
   console.log("DisplaySearchGridWidget startup");
   this.inherited(arguments);
   
   //grid structure
   var layout = {
    cells:[
     {
      field:"value",
      name:"Results",
      width:'85%',
      height:'100%'
      
     },
     {
      field:"remove",
      name:"Delete",
      width:'15%',
      height:'100%',
      formatter:this.DeleteFormater
      
     }
     
    ]
   };
   this._searchGrid.set("structure",layout);
   dojo.connect(this._searchGrid,"onRowClick",dojo.hitch(this,this.RowClicked));
   dojo.subscribe("displaySearchGridEvent",this,"DisplayCurrentSearch");
  },
  RowClicked : function(e){
   
   var item = this._searchGrid.getItem(e.rowIndex);
   var graphic = this._searchGrid.store.getValue(item,'graphic');
   this.DisplayItem(graphic);
   this.PublishItem(this._searchGrid.getItem(e.rowIndex).searchPrefix,this._searchGrid.getItem(e.rowIndex).value,graphic);
   
  },
  DeleteFormater: function (remove){
   "<img src='../assets/images/icons/minimize.png' alt='Ring' 'width='16' height='16'>"
   
   /*var delButton = "<div dojoType=\"dijit.form.Button\"><img src=\"../assets/images/icons/minimize.png\"";
    delButton = delButton + " width=\"16\" height=\"16\"";
    delButton = delButton + " onClick=\"DeleteItem('"+remove+"')\"></div>";
    return delButton; */
    
    var delButton = "<button type=\"button\" data-dojo-type=\"dijit.form.Button\" data-dojo-props=\"iconClass:'DeleteIcon'";
    delButton += "onClick:function(){dojo.publish('searchItemClicked', ["+ remove + "]);}\"></button>";
    return delButton;
   
  },

[HemingZhu]

Hello, I have a grid defined in my widget.  for each row, I have an image that I want to act as the remove button.  How do I set the html, so that I know when the button/image is clicked.
I've tried variations of the commented and uncommented code in DeleteFormatter.   Any help would be gladly appreciated

Here's a subset of my class

startup: function() {
   console.log("DisplaySearchGridWidget startup");
   this.inherited(arguments);
   
   //grid structure
   var layout = {
    cells:[
     {
      field:"value",
      name:"Results",
      width:'85%',
      height:'100%'
      
     },
     {
      field:"remove",
      name:"Delete",
      width:'15%',
      height:'100%',
      formatter:this.DeleteFormater
      
     }
     
    ]
   };
   this._searchGrid.set("structure",layout);
   dojo.connect(this._searchGrid,"onRowClick",dojo.hitch(this,this.RowClicked));
   dojo.subscribe("displaySearchGridEvent",this,"DisplayCurrentSearch");
  },
  RowClicked : function(e){
   
   var item = this._searchGrid.getItem(e.rowIndex);
   var graphic = this._searchGrid.store.getValue(item,'graphic');
   this.DisplayItem(graphic);
   this.PublishItem(this._searchGrid.getItem(e.rowIndex).searchPrefix,this._searchGrid.getItem(e.rowIndex).value,graphic);
   
  },
  DeleteFormater: function (remove){
   "<img src='../assets/images/icons/minimize.png' alt='Ring' 'width='16' height='16'>"
   
   /*var delButton = "<div dojoType=\"dijit.form.Button\"><img src=\"../assets/images/icons/minimize.png\"";
    delButton = delButton + " width=\"16\" height=\"16\"";
    delButton = delButton + " onClick=\"DeleteItem('"+remove+"')\"></div>";
    return delButton; */
    
    var delButton = "<button type=\"button\" data-dojo-type=\"dijit.form.Button\" data-dojo-props=\"iconClass:'DeleteIcon'";
    delButton += "onClick:function(){dojo.publish('searchItemClicked', ["+ remove + "]);}\"></button>";
    return delButton;
   
  },

Adding formatter on datagrid th is the right choice. The basic idea is to dynamically create a button and passed rowid to its onclick function.  Here is the sample i did for POC a while ago. It is a modified version of one of the ESRI sample. Hope it helps.

[HaroldBostic]

Thanks for the response.......I do pass the id to my formatter function, I call it remove rather than id.  This all works well in the global context, however, I need this to work in my widget.  the button I make in the formatter is not aware of my dijits context, therefore my delete function never gets executed.  Do you have any ideas for that?

[HaroldBostic]

i just do this inside the row clicked event and it solves my issue

e.stopPropagation();
   var item = this._searchGrid.getItem(e.rowIndex);
   
   if(item == null){return;}
   if(e.cell.index == 1 && e.rowIndex == item.index[0])
   {//remove item
    var graphic = this._searchGrid.store.getValue(item,'graphic');
    this.RemoveDisplayItem(graphic);
    this._searchGrid.store.deleteItem(item);
   }
   else{
    //var item = this._searchGrid.getItem(e.rowIndex);
    var graphic = this._searchGrid.store.getValue(item,'graphic');
    this.DisplayItem(graphic);
    this.PublishItem(this._searchGrid.getItem(e.rowIndex).searchPrefix,this._searchGrid.getItem(e.rowIndex).value,graphic);
   
   }