how to get a HTML Label tag for formitem title for ContainerItem and SelectItem?

[martintaal]

Hi,
I noticed that some formitems use the html label tag for the title, this is great as a click on the title then puts focus in the field. There are however two cases where this does not happen:
- containeritem
- selecitem

For the first case the containeritem I can change the getTitleHTML to use a label tag, this seems to work fine (see the code below). Is this something which can be added to/changed in Smartclient by Isomorphic?

For the selectitem I have trouble finding the correct element id to use in the FOR attribute of the Label tag. Do you have a tip what to use there? Or is this something which can be changed in Smartclient by Isomorphic, or maybe the api to get the correct elementid can be made unobfiscated (i.e. not start with an underscore)?

Thanks for any guidance on this!

Here is the implementation I use for the ContainerItem.getTitleHTML:

  getTitleHTML: function(){
    var elementID, focusableItem;
    var title = this.getTitle();
    
    if (!this.getCanFocus()) {
      return title;
    }
    
    if (this.accessKey != null) {
      title = isc.Canvas.hiliteCharacter(title, this.accessKey);
    }
    
    for (var i = 0; i < this.items.length; i++) {
      if (this.items[i].getCanFocus() && this.items[i].hasDataElement()) {
        focusableItem = this.items[i];
        break;
      }
    }
    
    if (!focusableItem) {
      return title;
    }
    
    return isc.SB.concat("<LABEL FOR=", focusableItem.getDataElementId(), ">", title, "</LABEL>");
  }

gr. Martin

[Isomorphic]

Thanks for the patch code, Martin - we've incorporated it into the framework and it'll be present in the next nightly build.

Supporting this HTML Label type behavior on the SelectItem is trickier as our SelectItems are not based on native HTML form input elements.
We'll keep this in mind as a feature request, but it's probably not going to make it into the framework right away

Thanks
Isomorphic Software

[martintaal]

Thanks, my main current use case is that I would like to support clicking on the label of a selectitem and then putting the cursor in the selectitem.

would it be easier/possible to simulate an onclick event when clicking on the label of a selectitem? So not try to do focus?

Is this somehow feasible and something I can try myself? (I don't really have an idea on how to get to the correct html element, finding the correct element id).

gr. Martin

[Isomorphic]

Hi
The reason it won't work readily with the <label ...> approach is that the focus element written out for a SelectItem is not necessarily a native form item type element (It varies by browser), and as such is not a valid target for a label tag.

However we have a 'titleClick' notification method on form items which you can use to achieve this. The method has been present for a long time but unexposed. We've decided to go ahead and make it public from this point forward.
titleClick takes 2 parameters - "item" (the item) and "form" (the dynamicForm), and can be defined as a string or a method.

You should be able to get the behavior you want by adding a titleClick handler to your item which explicitly calls 'focusInItem' on the item - something like this:

isc.DynamicForm.create({
    items:[
        {name:"test", type:"select", valueMap:["a","b","c"],
         titleClick:"item.focusInItem()"}
    ]
});

Let us know if this doesn't work for you

Thanks
Isomorphic Software

[martintaal]

Ha, I should have found this function myself...

Thanks this works great!

gr. Martin