ag-grid: необходимо фиксировать событие нажатия на панели инструментов

Question

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

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

function g_CommentsComponent() {}

g_CommentsComponent.prototype.init = function (params) {
    console.log("Comments Component: ", params);
    this.eGui = document.createElement("div");
    this.eGui.innerHTML = "Comments here.";

    params.api.addEventListener("rowClicked", this.fetchComments.bind(this));
};

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

g_CommentsComponent.prototype.fetchComments = function (args) {
    console.log("fetchComments: ", args);
    var html = "<div style='padding: 5px;'><p>Fetching comments...</p></div>";
    this.eGui.innerHTML = html;

    setTimeout(this.renderComments.bind(this), 5000, [args]);
};

g_CommentsComponent.prototype.renderComments = function (args) {
    console.log("renderComments", args);
    var comments = [
        { commenter: "Andrew Cooper", date: "05/12/2018", comment: "Some quick example text to build on the card title and make up the bulk of the card's content." },
        { commenter: "Andrew Cooper", date: "05/12/2018", comment: "Some quick example text to build on the card title and make up the bulk of the card's content." },
        { commenter: "Andrew Cooper", date: "05/12/2018", comment: "Some quick example text to build on the card title and make up the bulk of the card's content." }
    ];
    var html = "<div style='margin: 5px;'><p style='margin-bottom: 0px;'><strong>Add Comment</strong></p></div>";
    html += "<div style='padding: 5px 5px 0px 5px;'><textarea rows='8' cols='22'></textarea></div>";
    html += "<div style='width: 100%' class='container-fluid clear-fix'><button class='btn btn-sm btn-primary form-control' onclick='handleCommentSubmitClick'>Submit</button></div>";

    comments.forEach((comment) => {
        html += "<div class='card border-primary' style='margin: 5px'>";
        html += "   <div class='card-header' style='padding: 3px 5px 3px 5px'>" + comment.commenter + "<br/>" + comment.date + "</div>";
        html += "   <div class='card-body' style='padding: 3px 5px 3px 5px'>" + comment.comment + "</div>";
        html += "</div>";
    });

    this.eGui.innerHTML = html;
};

g_CommentsComponent.prototype.handleCommentSubmitClick = function () {
    console.log("Handling submit event in object!");
};

function handleCommentSubmitClick () {
    console.log("Handling submit event!");
};

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