3 Replies Latest reply on Mar 31, 2012 1:04 AM by hbostic

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

    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;
         
        },
        • Re: Accessing events for dynamically generated buttons on a grid with in a widget
          hzhu
          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.
          • Re: Accessing events for dynamically generated buttons on a grid with in a widget
            hbostic
            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?
            • Re: Accessing events for dynamically generated buttons on a grid with in a widget
              hbostic
              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);
                 
                 }