Drop down with ArcGIS API for Javascript and dgrid

lxd — Thu, 24 Jan 2019 02:20:05 GMT

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.

.....

   // 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
         };

         fLayer.applyEdits({
               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);
            toggle(false);
         });
      }
   });
}

....

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?

Thanks!

topic Drop down with ArcGIS API for Javascript and dgrid in ArcGIS JavaScript Maps SDK Questions

Drop down with ArcGIS API for Javascript and dgrid