How can I get rid of the digit separator (comma thousands separator) in Attribute Inspector

[JesseOsborne1]

I have a web-editing app (v3.16) using the attribute inspector for editing features. In the attribute inspector popup window, there is an attribute field called ‘Time_Manual’; it is a data type ‘long’ integer and the problem is that the attribute inspector is auto-formatting with a comma as a thousands-separator. When opening the popup, the editable field is showing a comma as a thousands-separator (e.g. 8,413 instead of 8413) but when clicking the field (in focus) the comma goes away.

I am trying to get rid of the comma separating thousands-separator all together so that it never displays (in or out of focus) but haven’t had any luck. I don’t even really understand how the formatting is being done and was wondering if you could shed some light on the matter. Here’s a snippet from the code containing the array that’s being passed in. In it, I’m trying to convert the value to a string but it doesn’t seem to affect the display (not sure if this is the best way of going about it...)

var editorLayerInfos = [
    {
        'title': "TSM Cell {USNG}",
        'featureLayer': cellFeatureLayer,
        'showAttachments': false,
        'isEditable': true,
        'fieldInfos': [
            { 'fieldName': 'USNG', 'label': 'USNG', 'isEditable': false, 'tooltip': "", 'visible': true },
            { 'fieldName': 'SEC_NAME', 'label': 'Sector', 'isEditable': false, 'tooltip': "", 'visible': true },
            { 'fieldName': 'STA_NAME', 'label': 'Station', 'isEditable': false, 'tooltip': "", 'visible': true },
            { 'fieldName': 'Time_Auto', 'label': 'System Generated Time (mins)', 'isEditable': false, 'tooltip': "", 'visible': true },
            { 'fieldName': 'Time_Manual', 'label': 'User-Specified Time (mins)', 'isEditable': true, 'tooltip': "Enter a value between 12 - 1,440", 'visible': true, 'stringFieldOption': 'textbox' },
            {
                'fieldName': 'Dest_Manual', 'label': 'User-Specified Destination', 'isEditable': true, 'tooltip': "Enter an existing destination name", 'visible': true, 'format': {
                    'integer': function () {
                        this.toLocaleString();}
                }}
        ]
    }
];

attInspector = new AttributeInspector({
    layerInfos: editorLayerInfos
}, domConstruct.create('div', { style: 'height: ' + 9000 }));

[thejuskambi · Accepted solution]

That is the behaviour of the the NumberTextBox dijit used within the AttributeInspector for all fields with data type as integer or double. Unfortunately, ESRI has not provided any options to format the displayed value. The PopupTemplate has option to format the values, but not with AttributeInspector.

There are 2 options for you. One create your own AttributeInspector or hack into the AttributeInspector instance and update the dijit. To do the later, you need to know certain things. like the dijit is distoryed and create each time a new record is displayed so you would need to handle all possilble events like show, next, previous etc.

the AttributeInspector has property layerInfos, which has the fieldInfos collection with dijit and other information related to the field. make sure you get the right control.

            var lInfo = attInspector.layerInfos[0];      // get the correct layerInfo
            var f = lInfo.fieldInfos[4];                 // get the required field from the LInfo.fieldInfos
            if(f.dijit){
                f.dijit.constraints && (f.dijit.constraints.pattern = "#");
                f.dijit.setValue(feature.attributes[f.fieldName]);
            }

Once the pattern is changed, you need to set the value again so that it updates the formatting.

Not a good solution but it works.