Tips on how to lock the ag-grid to the highlighted row's position and force it to scroll

We have integrated ag-grid into our system, and I am facing an issue with displaying the scrollbar in a child window based on the selected row position in ag-grid. Please refer to the Plunkr link below and click on source_id which will lead you to an edit page. The requirement is to show the scrollbar matching the highlighted row on the popup screen.

Currently, the scrollbar functions but does not align precisely with the selected/highlighted row in the child window. Any suggestions on how to achieve this functionality using ag-grid would be greatly appreciated.

Plunkr url

Note: The scroll should automatically adjust to the selected row's position in the 'ag-body-viewport' div class.

Here are the steps to follow:

1) Click on the preview button in the Plunker.
2) Select any source_id in ag-grid.
3) An additional grid will appear in a popup window, highlighting the respective row of the source_id.
4) My question pertains to automatically scrolling the scrollbar in this particular window to match the highlighted/selected row position.
javascriptjquerycssangularjsag-grid

Answer №1

For a detailed understanding of how to approach this, you can refer to the scrolling section in the ag-grid api documentation.

To implement this, consider updating your getRowStyle function with the following modifications:


function applyRowStyles(params) {
    // Other operations...
      if (params.data.id.trim() === $scope.id.trim()) {
        style = {
          'background-color': 'orange'
        };
        $scope.gridOptions.api.ensureIndexVisible(Number(params.data.id));
      }
    // More operations... 
};

Answer №2

Here's a different approach using Angular 8 and ag-grid version 20.2 (enterprise):

scrollToSelectedRow(){
this.gridApi.ensureIndexVisible(this.gridApi.getSelectedNodes()[0].rowIndex, null);}

The ensureIndexVisible function requires two parameters: rowIndex (integer) and position ('top', 'bottom', null, etc). You can find more information here.

Answer №3

Even though it may seem like a delayed response, this information could still be valuable to someone working with Angular.

goToSelected() {
    let selectedRow :any []= Object.values(this.gridApi.getModel().getCopyOfNodesMap())
        .filter(//logic to select the desired row)
    if(selectedRow !==null && selectedRow !=undefined && selectedRow.length >0){
      let focusedIndex:number = selectedRow[0].rowIndex;
      this.gridApi.setFocusedCell(focusedIndex, 0);
      this.gridApi.ensureIndexVisible(focusedIndex);
      this.gridApi.getRowNode(focusedIndex).setSelected(true, true);
    }

Answer №4

Below is my method for choosing a specific row in agGrid, ensuring it's displayed, with the help of Angular and agGrid v23:

  let targetRowID = 456;

  this.agGridApi.forEachNode((node) => {
      node.setSelected(node.data.id === targetRowID);
      if (node.data.id === targetRowID) {
          this.agGridApi.ensureIndexVisible(node.rowIndex, 'middle');
      }
  });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The image inside an Ionic card's header will automatically adjust its size when text is added

Two cards are currently being displayed on the page: <ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-card class="offersCard"> ...

cssionic-frameworksassionic3

I am encountering an issue where req.body is returning as undefined

After creating a controller with the code below: app.post('/users', (req, res) => { console.log(req.body); const user = new User({ name: req.body.name, email: req.body.email }); user.sa ...

javascriptnode.jsexpress

Discovering the operating system and architecture type for my browser using Node.js - what steps should I take?

I am currently developing a Node.js app that serves as an API microservice. I need to retrieve the operating system and architecture type from a GET request made by my browser. One example could be: "Windows NT 10.0; Win64; x64" ...

javascriptnode.jsexpress

Retrieve the initial image link from a blogger's post in cases where it is not being stored on the Blogger platform for use in related

I am currently using a hosting service to store the images that I include on my blogger platform. However, I have encountered an issue where blogger does not automatically fetch the image url to use as the thumbnail when the image is hosted externally. C ...

javascriptjqueryhtmlcssblogger

Showcasing a Collection of Dropdown Options for All Angular Material Icons in Angular Versions 2 and Above

I'm currently developing an Angular 10 application that utilizes Angular Material Icons. I am in search of a method to dynamically showcase a dropdown menu containing all the available Material Icons. My attempt to programmatically retrieve the icon ...

javascripthtmlcssangularangular-material

Integrating foundation-sites with webpack, unable to apply styles

Delving into the world of webpack for the first time has been quite a daunting experience! I'm attempting to set up the foundation for sites, but I feel completely lost when it comes to configuring it properly. Here is my Webpack configuration: var ...

cssnode.jsreactjswebpack

Validating the similarity of classes with JQuery

Currently, I am working on creating a quiz game using HTML, CSS, JQuery, and potentially JavaScript. I am looking to implement an if statement to check if a dropped element is placed in the correct div (city). My approach involves utilizing classes to comp ...

javascriptjqueryhtmlcssdraggable

Using MongoDB's MapReduce feature along with the Date and % operator

I am encountering an issue with a Python script that I am using to aggregate large collections into smaller pieces and group them by timestamp. map = Code("function(number) {" "emit({" "ts : new Date(new Date((this.ts - (this.ts % (60 * number ...

javascriptpythonmongodbmapreduce

Which specific CSS rule is responsible for the issue I am currently experiencing?

I have styled a left-hand border on items in a list, with the border-left-color set to transparent for all of them. The active item, marked by the css class "active day", has a specific color for its border. Below is a snippet of the code (certain styles h ...

htmlcss

Simulate a new Date object in Deno for testing purposes

Has anyone successfully implemented something similar to jest.spyOn(global, 'Date').mockImplementation(() => now); in Deno? I've searched through the Deno documentation for mock functionality available at this link, as well as explored t ...

javascripttypescriptunit-testingjestjsdeno

Upon rerender, React fails to refresh the style changes

I am encountering an issue with my React component where the visibility and position can be changed by the user. Currently, the visibility can be toggled by adding or removing a CSS class, while the position is adjusted through a function that updates the ...

javascriptcssreactjsdrag-and-drop

Tips for avoiding the automatic transition to the next slide in SwiperJS

How can I prevent the next button click in swiper based on my custom logic? I am using the swiperjs library within a Vue project and I need to stop users from swiping or clicking the next button to move to the next slide depending on certain conditions de ...

javascriptvue.jsswiper.js

using jtemplates to append content rather than replacing it

Currently, I am utilizing jtemplates as my preferred templating solution (a fantastic jQuery plugin). Replacing my asp.net updatepanels with this tool has tremendously boosted the speed of my website. The only snag I've hit is when loading user commen ...

jqueryjsonjtemplate

Do not allow negative values to be displayed in the text box

Plunker I need to restrict negative values from being entered into a text field. If the user tries to input a negative value, I want the text box to remain unchanged. Although I have a directive that prevents negative values from being entered, it seems ...

javascripthtmlangularjs

Javascript error - SyntaxError: unexpected token '}' after property list is missing

In my code snippet below: var UserCharacter = { UserID: util.getCookie('u_u'); userUsingThisCharacter: function() { var data = {}; data.UserID = UserCharacter.UserID; $.ajax({ type: "GET", url: util.API_URL + "charact ...

javascriptjquery

What is the technique for choosing the parent's ID with jQuery?

When a user clicks on any team, I need to retrieve the parent's parent ID. For example, if someone clicks on a Premier League Team, I want to store the ID 2 in a variable called league_id. Here are my attempts so far: Using Closest Method $('u ...

javascriptjqueryhtml

Explain how the 'next' function works within Express middleware and its role in directing the flow to a different function

I am fairly new to Node.js and currently learning Express.js. I am focusing on implementing "middleware functions" for specific routes. My question is regarding the usage of the "next" function. What exactly can we do after authentication using the "next ...

javascriptnode.jsexpress

`How can I incorporate personalized animations on Google Map V3 Markers as they are individually dropped on the map?`

This is a basic example of dropping markers one by one on Google Maps V3. I have implemented the drop animation when adding markers to the map. However, I am interested in customizing the drop with a fade animation. Is it possible using JavaScript or any ...

javascriptandroidjquerygoogle-mapsgoogle-maps-api-3

Can you explain the concept of peer dependencies and plugins to me?

After reading numerous articles and posts on the topic of peer dependencies, I still find myself struggling to fully understand the concept. For instance, if coffee 1.0 has a dependency on milk 1.0, then logically coffee 1.0 would be included in my packa ...

javascriptnode.jsnpmdependenciesnode-modules

Strategies for retrieving the latest content from a CMS while utilizing getStaticProps

After fetching blog content from the CMS within getStaticProps, I noticed that updates made to the blog in the CMS are not reflected because getStaticProps only fetches data during build time. Is there a way to update the data without rebuilding? I typica ...

javascriptreactjsnext.jspre-rendering