hbostic

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

Discussion created by hbostic on Mar 12, 2012
Latest reply on Mar 31, 2012 by hbostic
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;
   
  },

Outcomes