AttributeInspector with customField is not working correctly

[DianaBenedict]

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"); 

[DianaBenedict]

Hi,

Has anyone solved this yet? Diana? 

I am having the same problem using api v3.5 ValidationTextBox (plus am unable to control whether the box is editable or not)...

Thanks,
Arth.

No, it looks like it is still an ESRI bug and does not appear to be fixed in JS api 3.5 either. I had to resort to a different work around since it seems to me like the CSS is getting all messed up when using the customField option. From what I can see, the CSS for ReadOnly properties is not honored with any fields in the AttibuteInspector FieldInfos that implement the customField poperty.  I hope ESRI can post a fix soon. I had to change my UI and add a "label" to accomodate for that bug.

[ArthurAbbie]

No, it looks like it is still an ESRI bug and does not appear to be fixed in JS api 3.5 either. I had to resort to a different work around since it seems to me like the CSS is getting all messed up when using the customField option. From what I can see, the CSS for ReadOnly properties is not honored with any fields in the AttibuteInspector FieldInfos that implement the customField poperty.  I hope ESRI can post a fix soon. I had to change my UI and add a "label" to accomodate for that bug.

Ok, not what I hoped to hear but thanks for replying Diane 🙂

I've decided to give up on the attributeInspector, now just using dijit/form/validationtextbox etc directly with the feature.attributes.  Next to replace will be the attachmentEditor.

So much time wasted on faffing around with things we're led to believe will work out-of-the-box but either they don't or the implementation is naff... sigh :rolleyes:.

Arth.

[AmericanData]

Same problem here.  Using a dojox.widgit.ColorPicker and tracking input via the events.  The data is being placed into the value property correctly.  But never gets to the Graphic's corresponding attribute value.  Something to do with pushing the update to the graphic.

I've noticed that Dojo's documentation is off in many ways though.  This could be a bug based on how ESRI gets the value.  Some dijits work well with...

myDijit.set('value', somevalue);

...while others prefer...

myDijit.value = somevalue;

...and still others like...

myDijit.attr('value', somevalue);

And the documentation is very unreliable.  For instance, ColorPicker doc says to use attr('value') to assign values.  But in truth, only value = somevalue works.

It's no wonder this breaks the link in the AttributeInspector.  Which way does ESRI get/set the value?  Luckily the set TO the dijit works.  Dodgy consistency.

[DavidBlanchard]

Just an update for those finding this forum thread in 2013, it is still a bug; but at least it now logged as an official bug (NIM089109). It appears to have been assigned but no resolution yet.

[AlexMerkulov]

Hi all,

The problem is in AttributeInpector.js, in _destroyAttributeTable() function, in line "this._attributes && h.destroy(this._attributes)". The _attributes contains custom widgets you created. Just comment this line and it will work.

Alex Merkulov

[AlexMerkulov]

There is one more problem with AttributeInspector.js. No matter if field editable or not, the custom control always will be editable.
Two bugs in one *.js. Thanks God I can change it!!!!

[MatthewMiller]

Hi all,

The problem is in AttributeInpector.js, in _destroyAttributeTable() function, in line "this._attributes && h.destroy(this._attributes)". The _attributes contains custom widgets you created. Just comment this line and it will work.

Alex Merkulov

Is this line in the AttributeInspector.js for the JavaScript API Version 3.8?  I have downloaded AttributeInspector.js and can't find it.  The closest I can find is the line:

            if (this._attributes) {
                _9.destroy(this._attributes);
            }

That line is part of the _destroyAttributeTable function.

Thanks!

[deleted-user-YYhuCJuuEn9L]

@alexmarkolov

Thanks! That solved the issue for me.

[deleted-user-YYhuCJuuEn9L]

I spoke too soon. Commenting out this code:

if (this._attributes) {
         _9.destroy(this._attributes);
}

Working in Chrome but not IE. It seems that when a custom field is added it's DOM is being wiped out during the _createTable method with this line:

this.attributeTable.innerHTML = "";

Only the parentNode remains. To get around this I had to assign the layerInfo.customField to a function and make the following changes in the _createField method:

if (c.customField) {
       if (typeof(c.customField)==='function') {                           
               f=c.customField();
               h.place(f.domNode, h.create("div", null, b), "first");
       }
       else {
               h.place(c.customField.domNode || c.customField, h.create("div", null, b), "first"), f = c.customField;
       }                                              
}

This worked form me with some custom DateTextBoxes. For number formatting without commas, I made the following changes to the _createIntField method:

return new s({
      "class": "atiField",
      constraints: {
            places: 0
      },
      _formatter: function (value) { return value; },
      invalidMessage: this.NLS_validationInt,
      trim: !0
}, h.create("div", null, c))

Hope this helps