Suitable replacement for dgrid with 4.29?

[luckachi]

I am trying to update to 4.29 from 4.24 I am not able to do so because I am using a dojo dgrid to display query results and then have the ability to click on a row and zoom to that point. It doesn't look like the FeatureTable widget works with graphics layers so I and curious how I can push the query results to the table and be able to interact with the map in order to update to 4.29.

Any help would be appreciated.

[MatthewDriscoll]

This is how I did it. The feature tables are vaadin-grids.

        // Attach the event listener 
          const grid = featureTable.container.querySelector("vaadin-grid");
          if (grid) {
            grid.addEventListener("cell-activate", cellActivateHandler);
          } else {
            console.log("Feature table grid not found.");
          };
          grid.removeEventListener("cell-activate", cellActivateHandler);
          grid.addEventListener("cell-activate", cellActivateHandler);

   // Define the cellActivateHandler function
    function cellActivateHandler(e) {
      // Important to remove the event listener or it will hold on to the last query and iterate the next one.
      // Then add it back so it can continue to listen on same table.
      
     
      const feature = e.detail.model.item.feature;
      
      const permitNump = feature.attributes.fldpermitnum;
      const pidBPp = feature.attributes.fldcamanum_1_txt;
      const datedatap = feature.attributes.fld_permitdate;
      const newdatep = new Date(datedatap);
      const finYearp = newdatep.getFullYear();
     
      
      const query = new Query({
        where: "PID = '" + pidBPp + "'",
        outFields: ["*"],
        returnGeometry: true,
      });

      // Check if the feature table is ready
      if (featureTable && featureTable.container) {
        if(BPhighlights){
          BPhighlights.remove();
        };
        parcelLayer.queryFeatures(query).then(function (result){
          if(result.features.length === 0){
              alert("The PID for this permit no longer exists!")
              return
          };
          

          BPhighlights = parcelLayerViewBP.highlight(result.features);

          // Create a highlight graphic and add it to the graphics layer
          result.features.forEach(function (feature){
            var parcelExtent = feature.geometry.extent.clone().expand(1.5);     
            theView.goTo({
              target: parcelExtent,
              zoom: 15.75
            });
          });
            
        });
      } else {
        // Feature table is not ready, handle accordingly
        console.log("Feature table is not ready.");
      };      
    }

[luckachi]

@MatthewDriscoll  Thank you for your reply, this is helpful. Just a question that came up while looking at this.

Here is a section of code that handles one of the query options on the page I'd like to update. Each of the search criteria has a separate block of code similar to this. I'm thinking that I may just be able to get away with reworking the few lines grid.set and grid.on towards the bottom of the code to use push the results to the vaadin grid or something similar?

/*** SEARCH BY PROJECT ***/

      /* Query features from the observation layer */
      view
        .when(function () {
          return obsLayer.when(function () {
            var query = new Query();
            query.where = "1=1";
            query.outFields = ["PROJECT"];
            query.returnDistinctValues = true;
            query.orderByFields = ["PROJECT"];
            return obsLayer.queryFeatures(query);
            document.getElementById("doBtn").addEventListener("click", doQuery);
          });
        })

      /* Call doQuery() each time the button is clicked */
      view.when(function () {
        // view.ui.add("optionsDiv", "top-right"); ****removed 6/22 CEP already added on line 790
        document.getElementById("doBtn").addEventListener("click", doQuery);
      });

      /* Executes each time the button is clicked.
      Clears results from prev. query then builds a new query.
      Executes query and calls getResults() once promise is resolved. */
      function doQuery() {
        resultsLayer.removeAll();
        params.where = "PROJECT =" + "'" + prjSelect.value + "' AND (VERIFIED = 1 OR VERIFIED = 2)";
        loader.active = true;
        obsLayer.queryFeatures(params).then(getResults).catch(promiseRejected);
       }

      /* Called each time promise is resolved.
      Loop through each results and assign symbol and PopupTemplate */
      function getResults(response) {
        var prjResults = response.features.map(function (feature) {
          feature.symbol = sym;
          feature.popupTemplate = popupTemplate;
          return feature;
        });
        resultsLayer.addMany(prjResults);

        /* Populate DGrid Table at bottom of page with query results*/
        var items = prjResults
        var TableFeatures = []
        array.forEach(items, function (feature) {
         var TableAttributes = {}
         var TableFields = Object.keys(feature.attributes)
         for (var i = 0; i < TableFields.length; i++) {
             TableAttributes[TableFields[i]] = feature.attributes[TableFields[i]]
         }
         TableFeatures.push(TableAttributes)
        })

        // array empty or does not exist
        if (TableFeatures === undefined || TableFeatures.length == 0) {
          loader.active = false;
          myAlert.show();
        }

        var prjmemStore = new Memory({
          data: TableFeatures,
          idProperty: "OBJECTID"
        });
        grid.set("collection", prjmemStore);
        grid.set("sort", "OBJECTID", true) // sorts objectID column - shows most recent 1st
        grid.on("dgrid-select", selectedOBS);
        grid.on('dgrid-deselect', clearonChange);

      /* Zoom to Extent */
        var AOI = response.features;
        view.goTo(AOI);
      }

      /* Called each time promise is rejected */
      function promiseRejected(error) {
        console.error("Promise rejected: ", error.message);
      }

[MatthewDriscoll · Accepted solution]

What I did was add  the highlight ids and filtered that.  Below is a bigger picture. 

        let queryBP = bldPermLayer.createQuery();
        queryBP.where = finQueryBP 
        queryBP.outFields = ["*"];

        // do the query 
        bldPermLayer
          .queryFeatures(queryBP)
          .then((response) => {
            const graphics = response.features;
            //console.log(response.features.length);
            if(response.features.length === 0){
                alert("Search query found no results.");
                return
            }else{
              for(let iii=0; iii < response.features.length; iii++){
                featureTable.highlightIds.add(response.features[iii].attributes.objectid);
                featureTable.filterBySelection();
                console.log("this is the search")
              }
            };
            tabContain.style.visibility = "visible";
            bpContain.style.display = "none";
            
            
          });
          // Attach the event listener outside of the featureTable.when callback
          const grid = featureTable.container.querySelector("vaadin-grid");
          if (grid) {
            grid.addEventListener("cell-activate", cellActivateHandler);
          } else {
            console.log("Feature table grid not found.");
          };
          grid.removeEventListener("cell-activate", cellActivateHandler);
          grid.addEventListener("cell-activate", cellActivateHandler);

[luckachi]

@MatthewDriscoll thank you! Just need to make some changes to how the table functions but this is a great start.

Out of curiosity, is it possible to "hide" the records from the layer that the featureTable use so its visibly empty when the page first loads? Or use two layers for the featureTable?

[MatthewDriscoll]

Sorry, I have not tried either one of those things. 

[luckachi]

No worries at all, thought I would ask 😀 Thanks again for your assistance!