How to overlay control on top of a row in ag-grid?

user_2022989 0
Viewed 580

I have a requirement to add a specific control on top of rows that contain data that matches specific criteria. Those criteria are missing required information that needs to be added with an inline editing feature. What we want is a navigation control that seats on top of the first matching row and that leads you to the next one by clicking on "next", which will make the grid scroll up to the next matching row which will display another control on top and above allowing to navigate to next matching row or go to previous.

So let's say we have a list of cars, and we want the user to navigate over the rows of cars that have a price lower or equals to 45k, you'll see something like:

enter image description here

On the next click you'll see something like:

enter image description here

I believe in order to have this feature, I would need a reference to the rows and inject a component in the DOM relative to each row on click. But I'm not sure how to do that. I've attempted to dynamically add the component to the native element of the first matching row like this:

  onGridReady(params) {
    this.api = params.api;
    this.columnApi = params.columnApi;

    params.api.forEachNode((node, index) => {
      if(node.data.price <= 45000) {
        this.matchingIndexes.push(index);
      }
    });

    let firstRowRef = this.gridElementRef.nativeElement.querySelectorAll(`[row-index="${this.matchingIndexes[0]}"]`)[1];
    
    const factory = this.factoryResolver.resolveComponentFactory(PagingOverlayComponent)
    const component = factory.create(firstRowRef.parentInjector)
    this.viewContainerRef.insert(component.hostView);
  }

I want to be able to insert the component somehow in relation to the row it has to be attached so I can position it over it. This is the farthest I have been able to go:

enter image description here

Any ideas on how can I achieve this?

Please find a working stackblitz here

ag-grid angular
2 Answers

We did something fairly similar to this for an application in our bank, but we are using AdapTable which is a component that sits on top of ag-Grid.

That has a search function which includes an option just to return all result sets. It also has api methods to jump to a cell and highlight a cell. So we created something very similar to this and each time you clicked the arrow we got AdapTable to highlight and jump to the relevant cell in ag-Grid.

It was quite easy to implement - a couple of hours at most - but as I say we used AdapTable and not ag-Grid directly and I don't know what that does internally to return the search result set to us.

user_118574760

You should not need to use native element to achieve this.

Try a combination of:

  1. An AgGrid Cell Renderer for the Pagination Control, and
  2. A shared service to manage the pagination/search logic. It will need to answer questions (from each Cell Renderer instance) such as 'does this row index match?', 'which number match am I?' and 'how many matches are there in total?'

I forked your stackblitz to get you started. The paginator resides in the make column - matches show the paginator, non-matches show the make. You'll still need to implement logic to:

  • hide the paginator based on which row is selected.
  • scroll to next/previous
user_15718930
Related