Combo with image

Suite and Optimus Suite 5
#1

I like the combo a lot and the ability to filter the results.

The only thing is when the combo’s value is set with a valid value and then you open the option list, you can’t see any other values. This makes logical sense, the filtering is removing the entries which do not match, so only 1 value is shown.

This confuses my users as they do not realize it is possible to backspace and remove the value.

Hope this makes sense…

Is there a setting which would show all of the values in this case?

If not, I am thinking of adding an image to the right of the combo which when clicked will clear the selected value. I am wondering if this is a good candidate for a custom item.

#2

I was able to do this using a template.

#3

Here is a sample of using images in combo:
dhtmlx.com/docs/products/dht … tions.html

#4

I needed a “clear” image to the right of the combo:

Here’s how I did it, note that this code is generic and can be used with any combo in a dhtmlx form:

    {type: "block", offsetLeft:20, list: [
	    {type: "settings", position: "label-left", labelWidth:70, inputWidth:210, labelAlign: "right"},
      {type:'combo',      label:"Apex EDI",   name:'claim_payer_id', inputWidth:350, filtering:1, readonly:0},
      {type:'newcolumn'},
      {type:'template', format:'comboClearIcon', labelWidth:70, inputWidth:20,}
    ]},
dhtmlXForm.prototype.prevComboName = function(){ 
  var last
  this.forEachItem(function(name, radioValue){
    last = name
  })
  return last			
}
function comboClearIcon(name, value) {
  // this is called as the form is being built, so the last item will be the combo
  var frm      = this.getForm()
  var combo  = frm.getCombo( frm.prevComboName() )
  this.onclick = function( e ) {
    combo.unSelectOption()
    combo.setComboValue('')
  }
  return '<a href="javascript:void(0)"><img border="0" style="position:relative;top:-2px;" src="'/whereever/clear_field_24.png"></a>'
}

Here’s the imgae:

This took a few hours to figure out and make generic (and conserve memory). I think the image could be a little nicer. I am going to use this on all of the combos which filter.

#5

By shifting the image left, it looks pretty cool:

function comboClearIcon(name, value) {
  var frm       = this.getForm()
  var combo     = frm.getCombo( frm.prevComboName() )
  this.onclick = function( e ) {
    combo.unSelectOption()
    combo.setComboValue('')
  }
  return '<a href="javascript:void(0)"><img border="0" style="position:relative;top:-2px;left:-45px" src="' + app.img('clear_field_24') + '"></a>'
}
#6

One quick change (in case anyone is copying this code):

The needs to be shifted instead of teh imgae inside the anchor:

  return '<a href="javascript:void(0)" style="position:relative;top:-2px;left:-45px"><img border="0" src="' + app.img('clear_field_24') + '"></a>'
#7

After changing the icon, here’s the final result:

#8

Awesome addition! I could use this.

#9

One more tweek…after the clear icon is pressed, the focus is placed in to the combo:

Here a recap with all updates:

{type: "block", offsetLeft:20, list: [ {type: "settings", position: "label-left", labelWidth:70, inputWidth:210, labelAlign: "right"}, {type:'combo', label:"Apex EDI", name:'claim_payer_id', inputWidth:350, filtering:1}, {type:'newcolumn'}, {type:'template', format:'comboClearIcon', inputWidth:20} ]}

var app = {
  icon16: '/cache/img/'
}
app.img16 = function(img){ return app.icon16  + img + '.png' }
dhtmlXForm.prototype.lastFieldName = function(){
  var last
  this.forEachItem(function(name, radioValue){last=name})
  return last			
}
function comboClearIcon(name, value) {
  var frm      = this.getForm()
  var combo    = frm.getCombo( frm.lastFieldName() )
  this.onclick = function( e ) {
    combo.unSelectOption()
    combo.setComboValue('')
    combo.DOMelem_input.focus();
  }
  return '<a href="javascript:void(0)" style="position:relative;top:3px;left:-42px"><img border="0" src="' + app.img16('selection_delete') + '"></a>'
}
#10

Last and final tweek to save a bit of memory because this onclick function is a closure:

dhtmlXForm.prototype.lastFieldName = function(){
  var last
  this.forEachItem(function(name, radioValue){last=name})
  return last			
}

dhtmlXCombo.prototype.clearAndFocus=function(){
  this.unSelectOption()
  this.setComboValue('')
  this.DOMelem_input.focus();
}
function comboClearIcon(name, value) {
  var frm      = this.getForm()
  var combo    = frm.getCombo( frm.lastFieldName() )
  this.onclick = function( e ) { combo.clearAndFocus() }
  return '<a href="javascript:void(0)" style="position:relative;top:3px;left:-42px"><img border="0" src="' + app.img16('selection_delete') + '"></a>'
}