Latest Contributions by BillDaigle

There is no built in functionality for this (at least at 3.16).  I had a similar need and ended up extending the featureTable dijit and adding the attributeInspector dijit to create a new row. There is a bunch of extra functionality that you likely won't need, but here is my extended dijit code: define([   'dijit/Dialog',   'dijit/form/Button',   "dijit/Toolbar",   "dojo/dom-class",   'dojo/dom-construct',   'dojo/_base/array',   'dojo/_base/declare',   "dojo/string",   'dojo/_base/lang',   'dojo/on',   "dojo/query",   'dojo/text!./templates/featureTableEditor.htm',   'esri/dijit/AttributeInspector',   'esri/dijit/FeatureTable',   'esri/layers/FeatureLayer',   'esri/tasks/query',   "esri/graphic" ], function(   Dialog,   Button,   Toolbar,   domClass,   domConstruct,   array,   declare,   string,   lang,   on,   dojoQuery,   template,   AttributeInspector,   FeatureTable,   FeatureLayer,   Query,   Graphic ) {   return declare(FeatureTable, {     constructor: function(params, srcNodeRef) {       var _this = this;       this.editableCustom = (params.editable === true) ? true : false;       params.editable = false;       this.newRecordAttributes = params.newRecordAttributes || {};       this.customHeaderText = params.customHeaderText || null;     },     buildRendering: function () {         this.templateString = template;         this.inherited(arguments);     },     postCreate: function() {       var _this = this;       console.debug('fte',this)       this.on('load',this._postGridCreated);       //add the main class       domClass.add(this.domNode, "fwijitsFeatureTable");      this._i18nStrings.loadingData = "Loading Table Data...";      this._i18nStrings.gridHeader = '${gridTitle} (${featureSelectedCount}/${featureCount} selected)';       this.inherited(arguments);     },     /////////////////     //  Functions that override/enhance functionality in the ESRI featureTable     _refreshGrid: function(ids){       //forces a refresh of the dataStore item       var _this = this;       this._createStoreFromDataQuery();       var listener = this.grid.on('dgrid-refresh-complete',function(){         listener.remove();         if (ids){           _this.selectRows(ids);         }       });     },     //override the applyEditsListener     _applyEditsListener: function() {       var listener = on(this.featureLayer, "edits-complete", lang.hitch(this, function(listener) {         this.emit("edits-complete", listener);       }));       return listener;     },     // End Functions that override/enhance functionality in the ESRI featureTable     ///////////////////////////////////////////////////////////////////////////     startup: function() {       this.inherited(arguments);     },     _updateGridHeaderText: function() {       if (this._gridTitleNode){         this._gridTitleNode.innerHTML = string.substitute(this._i18nStrings.gridHeader, {           gridTitle: this.customHeaderText || this.featureLayer.name || this._i18nStrings.untitled,           featureCount: this.featureCount,           featureSelectedCount: this._featureSelectedCount         });       }     },     _postGridCreated: function(){       var _this = this;       //open the row editor on double click       this.grid.on('.dgrid-row:dblclick', function(evt) {         _this.grid.clearSelection();         var row = _this.grid.row(evt);         _this.grid.select(row);         _this._editSelection();         //_this._generateRowEditor(row.id);         //_this._toggleLoadingIndicator('block');       });     //  this._setupEditorButtons();       this.on('row-select',function(row){         _this._updateEditorButtons('select');       });       this.on('row-deselect',function(row){         _this._updateEditorButtons('deselect');       });       //this._addEditorButtons();     },     _editSelection: function(){       //currently only handles single row       this._generateRowEditor(this.selectedRowIds[0]);       this._toggleLoadingIndicator('block');     },     //_deleteSelection: function(){     //     //},     _updateEditorButtons: function(type){       console.debug('running',this.selectedRowIds.length,type)       var disableButtons = false;       if (type == 'deselect' && this.selectedRowIds.length <= 1){         disableButtons = true;       }       this._editSelectionButton.setDisabled(disableButtons);       //this._deleteSelectionButton.setDisabled(disableButtons);     },     _addNew: function() {       var _this = this;       this._toggleLoadingIndicator('block');       this.featureLayer.applyEdits(         [{           'attributes': _this.newRecordAttributes         }],         null,         null,         function(results) {           _this._refreshGrid([results[0].objectId]);           _this._generateRowEditor(results[0].objectId);         },         function(err) {           alert('the add did not work');         }       );     },     // _addEditorButtons: function() {     //  var _this = this;     //     //  var addnewButtonContainer = domConstruct.create("div", {     //    class: 'esri-feature-table-menu-item',     //    style: 'float:left'     //  }, this.gridMenuAnchor.domNode, "after");     //     //  var addnewButton = new Button({     //    label: "Add New"     //  }).placeAt(addnewButtonContainer);     //     //  addnewButton.on('click', function() {     //    _this._toggleLoadingIndicator('block');     //    _this.featureLayer.applyEdits(     //      [{     //        'attributes': _this.newRecordAttributes     //      }],     //      null,     //      null,     //      function(results) {     //        _this._refreshGrid([results[0].objectId]);     //        _this._generateRowEditor(results[0].objectId);     //      },     //      function(err) {     //        alert('the add did not work');     //      }     //    );     //  });     // },     _generateRowEditor: function(rowId) {       var _this = this;       var changeToCommit = false;       var editFields = [];       array.forEach(this.featureLayer.fields, function(field) {         if (_this.hiddenFields.indexOf(field.name) == -1) {           editFields.push({             fieldName: field.name,             isEditable: true,             label: field.alias           });         }       });       var attInspector = new AttributeInspector({         layerInfos: [{           'featureLayer': this.featureLayer,           'isEditable': true,           'fieldInfos': editFields,           showDeleteButton: false // a custom delete button will be added later         }]       }, domConstruct.create("div"));       domClass.add(attInspector.domNode, "fwijitsFeatureTableAttInspector"); console.debug(attInspector)       if (_this.saveButton) {         _this.saveButton.destroy();       }       if (_this.deleteButton) {         _this.deleteButton.destroy();       }       if (this.attrInspDialog) {         _this.attrInspDialog.destroy();       }       var rowQuery = new Query();       rowQuery.where = "ObjectID =" + rowId;       _this.featureLayer.selectFeatures(rowQuery, FeatureLayer.SELECTION_NEW, function(features) {         var updateFeature = features[0];         _this.attrInspDialog = new Dialog({           title: "Update row",           content: attInspector.domNode,           style: "width: 350px",           class:_this.css.dialog,           onHide: function() {             _this.saveButton.destroy();             _this._toggleLoadingIndicator();             //_this.clearSelection();           }         });         _this.attrInspDialog.show();         //add a delete button         _this.deleteButton = new Button({           label: "Delete"         }, domConstruct.create("div"));         domConstruct.place(_this.deleteButton.domNode, attInspector.deleteBtn.domNode, "after");         _this.deleteButton.on("click", function() {           //alert('delete now')           var apply = _this.featureLayer.applyEdits(             null,             null, [updateFeature]           );           apply.then(function(res) {             _this._refreshGrid();           },           function(err) {             alert('delete failed');           });           _this.attrInspDialog.hide();         });         //add a save button         _this.saveButton = new Button({           label: "Save",           disabled: false         }, domConstruct.create("div"));         domConstruct.place(_this.saveButton.domNode, attInspector.deleteBtn.domNode, "after");         _this.saveButton.on("click", function() {           _this.attrInspDialog.hide();           if (changeToCommit === true){           updateFeature.getLayer().applyEdits(             null, [updateFeature],             null,             function(res) {               _this._refreshGrid([rowId]);             },             function(err) {               alert('the update did not work');             }             );           }         });         attInspector.on("attribute-change", function(attr) {           //_this.saveButton.setDisabled(false);           changeToCommit = true;           updateFeature.attributes[attr.fieldName] = attr.fieldValue;         });       });     },     //this is a work in progress     resizeColumnsToContent: function(newSize) {       for (var i in this.grid.columns) {         var col = this.grid.columns;         if (col.hidden == false){           var fieldName = col.field;           var fieldAlias = col.label;           var newWidth = this._getColumnWidth(fieldName,fieldAlias);           this.grid.resizeColumnWidth(col.id, newWidth);         }       }     },     _stripTags: function(HTML) {       var tmp = document.createElement("DIV");       tmp.innerHTML = HTML;       return tmp.textContent || tmp.innerText;     },     _replaceURLWithHTMLLinks: function(text) {       var t = text + "";       var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;       return t.replace(exp, "<a href='$1' target='blank'>View Page</a>");     },     _getColumnWidth: function(fieldName, fieldAlias, data) {       var _this = this;       var longestDataField = "-";       //fetch the field domain       var domain = null;       array.forEach(this.featureLayer.fields,function(fieldInfo){         if (fieldInfo.name == fieldName && fieldInfo.domain){           domain = fieldInfo.domain;         }       });       array.forEach(this.grid.store.data, function(item) {         console.debug('  ',item)         var cellData;         if (item.attributes) {           cellData = item.attributes[fieldName];         } else {           cellData = item[fieldName];         }         //handle domains         if (domain && domain.codedValues){           var cellText = '';           array.forEach(domain.codedValues,function(codedValue){             if (codedValue.code == cellData){               cellText = codedValue.name;             }           });           if (cellText !== ''){             cellData = cellText;           }         }         console.debug('  ',cellData)         //account for empty cells         cellData = (!cellData || cellData === null || cellData === ' ' || cellData === '') ? "-" : cellData;         //Strip any html tags         if (typeof cellData === 'string' && cellData.indexOf('<a') > -1) {           cellData = _this._stripTags(cellData);         } else if (typeof cellData === 'string' && cellData.indexOf('http') > -1 && cellData.indexOf('<a') == -1) {           cellData = _this._stripTags(_this._replaceURLWithHTMLLinks(cellData));         }         //check to see if the current fld is longer than previous flds         if (cellData.length > longestDataField.length) {           longestDataField = cellData;         }       });       //calculate header and cell string length       var resizeFactor = 1.5;       var maxColumnWidth = 30;       var cellLen = longestDataField.length / resizeFactor;       var hdrLen = fieldAlias.length <= 10 ? fieldAlias.length : fieldAlias.length / 1.3;       var columnWidth = hdrLen > cellLen ? hdrLen : cellLen;       columnWidth = columnWidth < 30 ? columnWidth : maxColumnWidth;       return columnWidth*10;     }   }); }); The template: <div class="${baseClass}">   <div id="${gridBorderContainerId}" class="esri-feature-table-border-container" data-dojo-attach-point="_gridBorderContainer" data-dojo-type="dijit.layout.BorderContainer" gutters="false">     <div id="${gridHeaderId}" class="esri-feature-table-content-pane esri-feature-table-menu" data-dojo-attach-point="_gridHeaderNode" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'">       <div class="esri-feature-table-menu-item esri-feature-table-loading-indicator" data-dojo-attach-point="_gridLoadingIndicatorNode" style="display:none;"></div>       <div class="esri-feature-table-menu-item esri-feature-table-title" data-dojo-attach-point="_gridTitleNode"></div>       <div class="esri-feature-table-menu-item esri-feature-table-closer-container">         <a class="esri-feature-table-closer toggleOpened" data-dojo-attach-point="tableCloseButton" href="JavaScript:void(0);" title="Hide Table"></a>       </div>       <div data-dojo-attach-point="_menuNode" class="esri-feature-table-menu-item esri-feature-table-menu-options">         <div id="${gridMenuNodeId}"></div>       </div>     </div>     <div id="${gridContentPaneId}" class="esri-feature-table-content-pane" data-dojo-attach-point="_gridContentPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">       <div id="${gridId}" class="esri-feature-table-grid" data-dojo-attach-point="_gridNode"></div>     </div>     <div class="esri-feature-table-editor-toolbar" data-dojo-attach-point="_gridEditToolbarPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">       <div  data-dojo-attach-point="_gridEditorToolbar" data-dojo-type="dijit/Toolbar">         <div data-dojo-type="dijit/form/Button" data-dojo-attach-event="onClick:_addNew" data-dojo-props="iconClass:'fwijitsFeatureTableEditorIcon fwijitsFeatureTableAdd', showLabel:false">Add</div>         <div data-dojo-type="dijit/form/Button" data-dojo-attach-point="_editSelectionButton" data-dojo-attach-event="onClick:_editSelection" data-dojo-props="iconClass:'fwijitsFeatureTableEditorIcon fwijitsFeatureTableEdit', showLabel:false, disabled:true">Edit Selected</div>         <!--div data-dojo-type="dijit/form/Button" data-dojo-attach-point="_deleteSelectionButton" data-dojo-attach-event="onClick:_deleteSelection" data-dojo-props="iconClass:'fwijitsFeatureTableEditorIcon fwijitsFeatureTableDelete', showLabel:false, disabled:true">Delete Selected</div-->       </div>     </div>   </div> </div> The css: .dgrid {     font-size: 9px; } .fwijitsFeatureTableMapSelectedRows .dgrid-selected {     background-color: #00ffff; } .fwijitsFeatureTableMapSelectedRows .dgrid-row:hover {     border: 2px solid #ff00ff;     background-color: transparent; } .fwijitsFeatureTableMapSelectedRows .dgrid-selected:hover {     border: 2px solid #ff00ff;     background-color: #00ffff; } .fwijitsFeatureTableAttInspector .atiLayerName {   display:none; } .esri-feature-table-editor-toolbar{ } .fwijitsFeatureTable .esri-feature-table-closer-container{   display:none; } .fwijitsFeatureTableAttInspector .atiAttributes .dijitButtonNode{   border-radius:0px !important; } .fwijitsFeatureTableAttInspector .atiField{   padding:0px !important;   margin:2px; } .fwijitsFeatureTableEditorIcon {     background-image: url('images/featureTableEditor/editorIconsEnabled.png'); /* editor icons sprite image for the enabled state */     background-repeat: no-repeat;     width: 18px;     height: 18px;     text-align: center; } .dijitDisabled .fwijitsFeatureTableEditorIcon {     background-image: url('images/featureTableEditor/editorIconsDisabled.png'); /* editor icons sprite image for the disabled state */ } .fwijitsFeatureTableAdd { background-position: 0; } .fwijitsFeatureTableEdit { background-position: -18px; } .fwijitsFeatureTableDelete { background-position: -36px; } At the very least, the javascript code should give you a start. ... View more