Make dropdown on attribute inspector readonly

4401
3
05-09-2013 06:42 AM
CharmaleeSandanayake
New Contributor III
I have been working on a simple editing application and I would like to customize the dropdown that appears in the editor infowindow/attribute inspector. I already have domains so I would like to make it impossible to type anything into the textbox. The code of interest that creates the dropdown is (from Firebug):

<input type="text" aria-haspopup="true" role="textbox" data-dojo-attach-point="textbox,focusNode" autocomplete="off" 
class="dijitReset dijitInputInner" aria-required="true" tabindex="0" id="dijit_form_FilteringSelect_0" value="" aria-disabled="false" 
aria-invalid="true" aria-owns="dijit_form_FilteringSelect_0_popup">


Can I manipulate this code to make a dropdown in which no text can be typed in?
This would be really helpful on an iPad because as soon as you select the dropdown, the keyboard pops up and obscures the screen.

Thanks for any input.
3 Replies
CharmaleeSandanayake
New Contributor III
I found a sort of messy workaround to this.  I enlarged the width of the dropdown arrow button to be just less than the text input box and made the input box white so it can't be seen. That way, on the iPad, there is a large button to press to activate the dropdown and the keyboard doesn't pop up every time I want to adjust an attribute. However the dropdown button obscures the text input field so you can't see what value the attribute really is. This only really works if you are only editing one field and you can see the actual value through symbology.  I have been working off this sample and modifed the css:
http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/widget_attributeinspectorpane.html

The css for the dropdown arrow is (width must be adjusted depending on your text box size):
.claro .dijitComboBox .dijitArrowButtonInner {
    border: 1px solid #464A46;
width: 161px;
opacity:0.1;
background-color: #464A46;
}

The  css for the textbox is:
      .esriAttributeInspector .dijitTextBox { width:7em;font-size:18pt;z-index:-100;border: 1px solid #FFFFFF; background-color: #FFFFFF;}

Since I am only editing one field I removed the field name:
.esriAttributeInspector .atiLabel {display:none;}

I also changed the text size in the dropdown to make it easier to select on the iPad:
.claro .dijitComboBoxMenu .dijitMenuItem {
   font-size:18pt;
}

There is probably a better way to do this, i.e. changing the dropdown from dojo.form.FilteringSelect to dojo.form.Select. However, I haven't found a way to get that to work.
0 Kudos
by Anonymous User
Not applicable

Thanks for posting this I have had a similar problem with the keyboard popping up on a domain pick. The increased button size is a good idea but when editing multiple fields it seems to tab to the next field rather than the dropdown button which causes the keyboard to popup.

0 Kudos
CharmaleeSandanayake1
New Contributor III

After looking at this thread: combobox in attribute inspector via 'customField' doesn't work I ended up changing the attribute inspector type to a dijit/form/Select and creating a custom digit for the attribute inspector.

Under the  require section I put in a "dijit/form/Select" and function (Select)

I created a custom Dijit:

var myDijit = new dijit.form.Select({

name:"mySelect"});

then in the layerinfos section I added the customField:

var layerInfos = [{

          featureLayer: operationalLayer,

          isEditable: true,

          showDeleteButton: false,

          fieldInfos: [

       

            { fieldName: "fieldname", label: "Status:", isEditable: true, customField:myDijit }

          ]

        }

        ];

0 Kudos