How to retrieve the values of a row of the Grid

2756
11
Jump to solution
03-22-2021 05:58 AM
ShaningYu
Frequent Contributor

I created FeatureTable dynamically, as below:

contx.myTable = new mv.esriModules.FeatureTable({

layer: contx.crimeFeatureLayer,

visibleElements: { selectionColumn: false },

fieldConfigs: _fieldsConfig,

container: contx.gridTbl[0] //document.getElementById("tableDiv")

});

The FetaureTable's data are populated in a Grid (container: contx.gridTbl[0]).  Now I click a row of the Grid.  I want to retrieve this row's value.  How can it be done?  Thanks if you can help.

 

0 Kudos
3 Solutions

Accepted Solutions
KenBuja
MVP Esteemed Contributor

The 'selection-change' event is fired when you click the checkbox for a row. The event.added property adds the rows selected to an array and the event.remove adds the removed rows to another array. In this example, I have a master array that contains one attribute of the current selected records for the table, adding and removing rows as they are selected or unselected.

  let filterArray: number[];
  featureTable.on('selection-change', (event) => {
    if (event.added.length > 0) filterArray.push(event.added[0].feature.attributes[valueString]);
    if (event.removed.length === 1) {
      const i = filterArray.indexOf(event.removed[0].feature.attributes[valueString]);
      filterArray.splice(i, 1);
    } else if (event.removed.length > 0) {
      filterArray = [];
    }
    //do things with the filterArray as the selection changes
  });

 

View solution in original post

0 Kudos
KenBuja
MVP Esteemed Contributor
visibleElements: {selectionColumn: true}

View solution in original post

0 Kudos
KenBuja
MVP Esteemed Contributor

visibleElements is a property of the FeatureTable, not a CSS element. You use that in your original post.

View solution in original post

11 Replies
KenBuja
MVP Esteemed Contributor

The 'selection-change' event is fired when you click the checkbox for a row. The event.added property adds the rows selected to an array and the event.remove adds the removed rows to another array. In this example, I have a master array that contains one attribute of the current selected records for the table, adding and removing rows as they are selected or unselected.

  let filterArray: number[];
  featureTable.on('selection-change', (event) => {
    if (event.added.length > 0) filterArray.push(event.added[0].feature.attributes[valueString]);
    if (event.removed.length === 1) {
      const i = filterArray.indexOf(event.removed[0].feature.attributes[valueString]);
      filterArray.splice(i, 1);
    } else if (event.removed.length > 0) {
      filterArray = [];
    }
    //do things with the filterArray as the selection changes
  });

 

0 Kudos
ShaningYu
Frequent Contributor

Dear Ken: Thanks for your quick response.  In my Grid, there is no "Checkbox" column.  How can the column be turned on to display by setting the css?  Thanks for your guidance!

0 Kudos
KenBuja
MVP Esteemed Contributor
visibleElements: {selectionColumn: true}
0 Kudos
KenBuja
MVP Esteemed Contributor

The property defaults to true, so you can just leave it off if you aren't making changes to other visibleElements properties.

0 Kudos
ShaningYu
Frequent Contributor

I did the css like that

.esri-feature-table{
    visibleElements: {
     selectionColumn: true
    };
}

but it shows errors.  Could you help for the style?  Thanks.

0 Kudos
ShaningYu
Frequent Contributor

when I pasted

let filterArray = number[];

on my .js file, it shows error.  What's wrong w/ this piece of code?  Thanks.

0 Kudos
KenBuja
MVP Esteemed Contributor

The code written is in TypeScript (note it used a ":" instead of "="), creating an array of numbers to hold the attribute. In regular JS, just use

let filterArray = [];

 

0 Kudos
ShaningYu
Frequent Contributor

Thanks.  Could you help for that piece below?  I got error if inserted in the .css.  Thanks.

.esri-feature-table{
    visibleElements: {
     selectionColumn: true
    };
}

0 Kudos
KenBuja
MVP Esteemed Contributor

visibleElements is a property of the FeatureTable, not a CSS element. You use that in your original post.