topic Scroll my grid to the row I clicked in a featureLayer in ArcGIS JavaScript Maps SDK Questions

Scroll my grid to the row I clicked in a featureLayer

TracySchloss — Tue, 04 Aug 2015 18:58:34 GMT

My map contains a featureLayer and an OnDemandGrid. The grid appears in a side panel and it's tied to an extent-change listener so that it only lists the features in the current map extent. The grid has a click event that zooms and opens an infoWindow when the user selects a row.

I'd like to have a click on my featureLayer also tie back to my grid. I'd like the grid to scroll to the row corresponding to the feature the user just clicked on. The ID on the row is the OBJECTID of the feature, so there is a common piece of information.

Here is a link to an example:

featureLayer_grid - JSFiddle

Can I do this?

Re: Scroll my grid to the row I clicked in a featureLayer

ChrisSmith7 — Tue, 04 Aug 2015 19:22:58 GMT

Tracy,

This has come-up a couple of times... one of them was for feature tables... Interactive FeatureTable Digit I don't believe a resolution was found for this thread, however.

Regarding your sample, I quickly cleaned-up some stuff in jsfiddle - featureLayer_grid - JSFiddle - and added an event to show you how to get OID from the click:

This should get you on the right direction on linking back to the grid!

Re: Scroll my grid to the row I clicked in a featureLayer

KenBuja — Sun, 12 Dec 2021 01:01:53 GMT

In one of my app, I have a GraphicsLayer (layerDiveGraphics) with the features that are also in a dGrid (diveGrid). The grid contains some of the attributes of the feature, including the OBJECTID field. I'm also using the pausable on event with a checkbox to control when this happens, since it can be annoying to have the grid constantly scrolling as you move the mouse across the map.

layerDiveGraphicsMouseOverEvent = on.pausable(layerDiveGraphics, "mouse-over", function (evt) {
    var id = evt.graphic.attributes.OBJECTID;
    diveGrid.clearSelection();
    if (diveGrid.row(id).element !== null) {
        diveGrid.select(id);
        diveGrid.row(id).element.scrollIntoView();
    }
});

Re: Scroll my grid to the row I clicked in a featureLayer

TracySchloss — Tue, 04 Aug 2015 19:33:16 GMT

I'm getting stuck with the issue that not all the rows are fully available until you do some scrolling. Even though I have a row that's been selected by it's ID, its element is null, so I'm never going to get past if (diveGrid.row(id).element !== null)

Re: Scroll my grid to the row I clicked in a featureLayer

KenBuja — Tue, 04 Aug 2015 20:30:50 GMT

Yes, that is a strange error. I noticed if the grid doesn't contain too many rows, then it does work as expected.

featureLayer_grid - JSFiddle

It varies...sometimes it can be 130 rows, other times it's only 30. Very maddening....

In my application, it was working with all 2800 rows.

Re: Scroll my grid to the row I clicked in a featureLayer

TracySchloss — Tue, 04 Aug 2015 20:44:09 GMT

I don't feel like this is a large data set, and it's just a sample I had small enough to easily pull together. My final project has many more records (39K), so it must be a solution that works with a larger data set.

Your solution of scrollIntoView works some of the time anyway.

Re: Scroll my grid to the row I clicked in a featureLayer

TracySchloss — Tue, 04 Aug 2015 21:13:10 GMT

Would there be a way to somehow define 'element'? When you look at it, it's always the same format:

element: div#gridDiv-row-1641.dgrid-row.dgrid-row-even.ui-state-default

Where 1641 corresponds to the OBJECTID.

I know I'm just making stuff up. Maybe there is something different I can use in the original construction of the grid?