You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard

Unsupported browser

You are using a browser that is not supported. JavaScript API works on the latest versions of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. Use one of these browsers and provide your feedback through GeoNet, the Esri Community.

  • {}
  • Firefox
  • Safari
  • undefined

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample shows how a FeatureEffect can be used to highlight features in the CSVLayerView and display the corresponding attribute information in dgrid. A polgyon is drawn on the view using the SketchViewModel. Features that intersect a polygon remain unaffected while features that all outside of the polygon have the following excludedEffect applied to look blurry.

csvLayerView.effect = {
  filter: {
    geometry: query.geometry,
    distance: query.distance,
    units: query.units
  excludedEffect: "blur(5px) grayscale(80%)"

The view zooms to the selection. It also displays the attributes of selected graphics in an OnDemandGrid. Users then can click on a row in the OnDemandGrid and the corresponding hurricane feature will be selected on the view.

 * fires when user clicks a row in the grid
 * get the corresponding graphic and select it
function selectFeatureFromGrid(event) {
  // close view popup if it is open
  // get the ObjectID value from the clicked row
  const row = event.rows[0];
  const id =;

  // setup a query by specifying objectIds
  const query = {
    objectIds: [parseInt(id)],
    outFields: ["*"],
    returnGeometry: true

  // query the csvLayerView using the query set above
    .then(function (results) {
      const graphics = results.features;
      // remove all graphics to make sure no selected graphics;

      // create a new selected graphic
      const selectedGraphic = new Graphic({
        geometry: graphics[0].geometry,
        symbol: {
          type: "simple-marker",
          style: "circle",
          color: "orange",
          size: "12px", // pixels
          outline: {
            // autocasts as new SimpleLineSymbol()
            color: [255, 255, 0],
            width: 2 // points

      // add the selected graphic to the view
      // this graphic corresponds to the row that was clicked;

Sample search results