+ Reply to Thread
Results 1 to 4 of 4

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

  1. #1
    Harold Bostic
    Join Date
    Apr 2010
    Posts
    174
    Points
    3
    Answers Provided
    0


    0

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

    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
    Code:
    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;
    			
    		},

  2. #2
    Heming Zhu

    Join Date
    May 2010
    Posts
    514
    Points
    47
    Answers Provided
    7


    0

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

    Quote Originally Posted by hbostic View Post
    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
    Code:
    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.
    Attached Files

  3. #3
    Harold Bostic
    Join Date
    Apr 2010
    Posts
    174
    Points
    3
    Answers Provided
    0


    0

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

    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?

  4. #4
    Harold Bostic
    Join Date
    Apr 2010
    Posts
    174
    Points
    3
    Answers Provided
    0


    0

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

    i just do this inside the row clicked event and it solves my issue
    Code:
    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);
    			
    			}

+ Reply to Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts