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