Drop down with ArcGIS API for Javascript and dgrid

01-23-2019 06:20 PM
New Contributor III

In my application, I am displaying a table with one field, that user can edit. I am using ArcGIS API for Javascript and dgrid library. I'd like to have a drop down for this editable field.  If editable field  has editor set to "text", all works fine. 

Once I change it to 'Select' and add all other piece from dgrid to have drop down, i get this: 

Here are the parts of the code, related to drop down.

Function that adds table to the page. Drop down part is towards the end. 


function createGrid(fields) {
  var columns = fields.filter(function (field, i) {
    if (gridFields.indexOf(field.name) !== -1) {
        return field;
  }).map(function (field) {
     if (field.name === "OBJECTID") {
        return {
            field: field.name,
            label: field.name,
            sortable: true,
            hidden: true
     } else if (field.name === "WAL_Value") {
      return {
            field: field.name,
            label: field.name,
            sortable: true,
            // editor: 'text',
            editor: Select,
            editorArgs: {
            store: optionsDataStore
         editOn: 'click'
      } else {
         return {
               field: field.name,
               label: field.name,
               sortable: true,
               editable: true

   // create a new onDemandGrid with its selection and columnhider extensions
   grid = new (OnDemandGrid.createSubclass([Selection, ColumnHider, Editor]))({
         columns: columns
   }, "grid");

   grid.on("dgrid-select", populateTable(fLayer));


   // highlight corresponding feature on the map if row was selected

   grid.on("dgrid-select", selectFeatureFromGrid);

   // check if field value was updated and if it was, send update to the flayer
   grid.on("dgrid-datachange", function (evt) {

      if (evt.oldValue !== evt.value) {
         var updated = evt.value;
         var attributes = {};
         attributes["WAL_Value"] = evt.value;
         attributes["OBJECTID"] = evt.cell.row.data.OBJECTID;


         var updateFeatures = {
               attributes: attributes

               updateFeatures: [updateFeatures]

   // this part is not working as drop down is not created... 
   grid.on(".dgrid-cell:click", function (evt) {
         var cell = grid.cell(evt);

         if (cell.column.field === "WAL_Value") {
            //only need drop down if clicked this column. Creating drop down
            dropDown.on('dgrid-select', function (event) {
            var node = renderItem(event.rows[0].data);
            domConstruct.place(dropDown.domNode, node);


other related functions:


function renderItem(item) {
   var divNode = domConstruct.create('div', {
      className: item.name
   domConstruct.place(document.createTextNode(item.name), divNode);
   return divNode;

var dropDown = new DropDown({
   selectionMode: 'single',
   collection: store,
   renderRow: renderItem

There is css class for the drop down. However  I wasn't able to add it to anywhere. I guess in this part:

var node = renderItem(event.rows[0].data)

I could add " use this css for a new element". All ways that I tried to do it, did not change the outcome (image below).

Have anyone succeeded in creating drop down with ArcGIS API for Javascript and dgrid? 

How did you do it?


0 Kudos
0 Replies