CODEWITHSUNDEEP
javascriptag-grid
Paul
Paul

Reputation: 3283

How do I add a button column to Ag Grid Javascript grid

I have managed to get the community version of AgGrid (Javascript) to work

However, I cant get a button to work?

function drop( id) {
    alert(id);
}

var columnDefs = [
    { headerName: "HELLO", field: "name", sortable: true, filter: true },
    { headerName: 'One', field: 'fieldName',
                cellRenderer : function(params){
                    return '<div><button (click)="this.drop(params.id)">Click</button></div>'
                }
    }

];

I need the function to be called when the user clicks on the button

Nothing happens at all? No errors in the console even?

What am I doing wrong?

Is this functionality disabled for the community edition?

Please note that I need a Javascript solution not Angular or any other language/framework supported by the Ag Grid

Paul

Upvotes: 0

Views: 2901

Answers (1)

Paritosh
Paritosh

Reputation: 11570

While working with cellRenderer, you should not register the event like (click)="this.drop(params.id)".

Instead, register listener the javascript way. Have a look at below code.

colDef.cellRenderer = function(params) {
    var eDiv = document.createElement('div');
    eDiv.innerHTML = '<span class="my-css-class"><button class="btn-simple">Push Me</button></span>';
    var eButton = eDiv.querySelectorAll('.btn-simple')[0];

    eButton.addEventListener('click', function() {
        console.log('button was clicked!!');
    });

    return eDiv;
}

Reference: ag-grid Cell Renderer

Upvotes: 2

Related Questions