How to know/capture the Detail Grid ID of the specific detail grid you are in? (ag-grid javascript)

2
votes

I have a Master-Detail ag-grid. One column has checkboxes, (checkboxSelection: true). The details grid have a custom status panel with a button. When the user clicks the button in any specific Detail grid, I don't know how to get the SelectedRows from just that one specific detail grid.

The problem is they might leave multiple details displayed/open, and then looping over each Detail Grid will include results from all open grids. I'm trying to isolate to just the grid where the user clicked the button.

I tried looping through all displayed/open detail grids to get the Detail grid ID. But I don't see any info in this that shows me which one they clicked the button in.

I tried in the button component to see if, in the params, there is anything referencing the detailgrid ID that the button is in, but I did not see anything there either.

This is the button component:

function ClickableStatusBarComponent() {}

ClickableStatusBarComponent.prototype.init = function(params)
{
    this.params = params;

    this.eGui = document.createElement('div');
    this.eGui.className = 'ag-name-value';

    this.eButton = document.createElement('button');

    this.buttonListener = this.onButtonClicked.bind(this);
    this.eButton.addEventListener("click", this.buttonListener);
    this.eButton.innerHTML = 'Cancel Selected Records&nbsp;&nbsp;<em class="fas fa-check" aria-hidden="true"></em>';
    console.log(this.params);

    this.eGui.appendChild(this.eButton);
};

ClickableStatusBarComponent.prototype.getGui = function()
{
    return this.eGui;
};

ClickableStatusBarComponent.prototype.destroy = function()
{
    this.eButton.removeEventListener("click", this.buttonListener);
};

ClickableStatusBarComponent.prototype.onButtonClicked = function()
{
        getSelectedRows();
};

Here is the code to loop through and find all open detail grids:

function getSelectedRows()
{
    this.gridOptions.api.forEachDetailGridInfo(function(detailGridApi) {
    console.log(detailGridApi.id);
});
1
javascriptag-gridmaster-detail

1 Answers

1
votes

I was able to work this out, so thought I'd post my answer in case others have the same issue. I'm not sure I took the best approach, but it's seemingly working as I need.

First, I also tried using a custom detail cell renderer, as per the documentation, but ultimately had the same issue. I was able to retrieve the DetailGridID in the detail onGridReady function--but couldn't figure out how to use that variable elsewhere.

So I went back to the code posted above, and when the button was clicked, I do a jquery .closest to find the nearest div with a row-id attribute (which represents the the DetailgridID), then I use that specific ID to get the rows selected in just that detail grid.

Updated button click code:

ClickableStatusBarComponent.prototype.onButtonClicked = function()
{
    getSelectedRows(this);
};

Updated getSelectedRow function:

function getSelectedRows(clickedBtn)
{
    var detailGridID = $(clickedBtn.eButton).closest('div[row-id]').attr('row-id');
    var detailGridInfo = gridOptions.api.getDetailGridInfo(detailGridID);
    const selectedNodes = detailGridInfo.api.getSelectedNodes()
    const selectedData = selectedNodes.map( function(node) { return node.data })
    const selectedDataStringPresentation = selectedData.map( function(node) {return node.UniqueID}).join(', ')
    console.log(selectedDataStringPresentation);
}