AnsweredAssumed Answered

AttributeInspector with customField is not working correctly

Question asked by dcastano on Feb 1, 2013
Latest reply on May 23, 2014 by RYANBOSLEY
Problem:
Require the AttributeInspector to display number values without commas.  For example a number value looks as so with the "out of the box" TextBox (11,245) however I need them to look like ID values with NO commas (11245).

Solution:
Create a custom dijit NumberTextbox, set the pattern to display numbers with no commas and set the fieldInfo customField property for the desired attribute field.

Issue:
At first it appears as though the customField that was specified for the desired field displays correctly (no commas). However, after several times of displaying the attributeInspector, the link between the data and customField gets lost and the data for the customField is no longer displayed.

Background:
The following is the constructor for the AttributeInsector:  esri.dijit.AttributeInspector(params, srcNodeRef)
The params input allows you to specify a set of Options including layerInfos. 
Within the layerInfos options, you can specify the fieldInfos of interest for each featureLayer.
Within the fieldInfos options, you can specify field information such as name, label, isEditable, etc...
There is an additiona fieldInfos option called customField.  This option allows you to specify a custom dojo dijit for the selected field.
I essentially followed the similar example as posted on the esri samples page http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/ed_attributeinspectorvalidate

The steps that I followed are:
1) instantiate the FeatureLayer
2) after "onLayersAddResult" I call the initializeEditor code
3) within the initializeEditor method I create the custom digit (see code below)
4) create the fieldInfos array
5) set up the layerInfos and passing in the fieldInfos
6) instantiate the attributeInspector object and passing in the layerInfos

At first everything looked great.  The AttributeInspector is configured as I indicated. 
The customField that I created looks great.
The number/text within the custom dijit NumberTextbox is formated to my specifications, etc... 
However, once I close the AttributeInspector and open it again, the customField is no longer visible. 
There is no height .. it just looks like a line. So I figured that I would go ahead and add some CSS to fix the issue, initially I added the class: "atiField" option so that the NumberTextbox renders like all the other textboxes. Then I did a quick "hack" by specifying the following CSS

.esriAttributeInspector .dijitNumberTextBox { width:30em;height:5em;}

This was done to force the NumberTextBox to have a height but there was no data.

I seems to me like at some point the link between the data and the customField gets "lost". 
All the other fields that are NOT custom look great .. no problems.
I have tried different ways to force the refresh of the customField and attributeInspector but have had the same results. 
I even tried the AMD method of creating the dijit ... nothing.

If I refresh the entire application, and display the AttributeInspector, all looks great again. 
But once the AttributeInspector is closed and opened again with new data I get the same issue.

Does anyone have suggestions on what could be causing this? Has anyone encountered a similar issue?
Currently the only solution that I can find is to DESTROY the AttributeInspector
each time it is closed and create it again .. though I think this is very "heavy handed" and would prefer not to have to do this.

Below is the pertinent code that I used to set up the fieldInfos for the AttributeInspector:

  var fieldInfos = [];     var props = {       class: "atiField",       constraints: { 'pattern': "#", 'places':0, 'max':999999999999999, 'min':0 }     };          fieldInfos.push({ 'fieldName': 'GAZ_ID',               'isEditable': true,               'label': 'GAZ ID',               'customField': new dijit.form.NumberTextBox(props)}           );     fieldInfos.push({ 'fieldName': 'NAME', 'isEditable': true, 'label': 'Name' });      var layerInfos = { 'featureLayer': flayer,         'fieldInfos': fieldInfos,         'isEditable': true,         'showDeleteButton': true }          //set up the attribute inspector     var attInspector = new esri.dijit.AttributeInspector({       layerInfos: layerInfos     }, "attributeDiv"); 

Outcomes