Как узнать / захватить идентификатор сетки деталей конкретной сетки деталей, в которой вы находитесь?(ag-grid javascript)

Question

У меня есть Ag-сетка Master-Detail. В одном столбце есть флажки (checkboxSelection: true). Сетка сведений имеет пользовательскую панель состояния с кнопкой. Когда пользователь нажимает кнопку в какой-либо конкретной сетке деталей, я не знаю, как получить SelectedRows только из этой конкретной сетки деталей.

Проблема заключается в том, что они могут оставлять / показывать несколько деталей, а затем циклически повторять каждую детальную сетку, включая результаты всех открытых сеток. Я пытаюсь выделить только сетку, в которой пользователь нажал кнопку.

Я попытался перебрать все отображаемые / открытые сетки деталей, чтобы получить идентификатор сетки деталей. Но я не вижу никакой информации, показывающей, в каком из них они нажали кнопку.

Я попытался в компоненте кнопки проверить, есть ли в параметрах что-либо, ссылающееся на идентификатор сетки деталей, в котором находится кнопка, но я тоже ничего там не увидел.

Это компонент кнопки:

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();
};

Вот код для просмотра и поиска всех открытых подробных сеток:

function getSelectedRows()
{
    this.gridOptions.api.forEachDetailGridInfo(function(detailGridApi) {
    console.log(detailGridApi.id);
});

Answer 1

Мне удалось это решить, поэтому я решил опубликовать свой ответ на случай, если у других возникнет такая же проблема. Я не уверен, что выбрал лучший подход, но, похоже, он работает так, как мне нужно.

Во-первых, я также попытался использовать настраиваемый рендерер ячеек деталей в соответствии с документацией, но в конечном итоге у меня возникла та же проблема. Мне удалось получить DetailGridID в функции detail onGridReady, но я не мог понять, как использовать эту переменную в другом месте.

Итак, я вернулся к приведенному выше коду, и когда нажали кнопку, я делаю jquery .closest, чтобы найти ближайший div с атрибутом row-id (который представляет DetailgridID), затем я использую этот конкретный Идентификатор, чтобы получить строки, выбранные только в этой подробной сетке.

Обновлен код нажатия кнопки:

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

Обновлена ​​функция getSelectedRow:

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);
}