button click should display data in <div> using cellRenderer in ag-grid

1
votes

I have ag-grid table. I am replacing 'Bookingxml' column data with button. When that button is clicked, it should show the data of that particular cell in 'out' div. I went through the documentation and figured, cellRenderer is the way to do it. I tried below code, but that didn't work. 

var gridOptions = {
    columnDefs: [

        {headerName: 'Booking Type', field: 'BookingType', width: 200},
        {headerName: 'Booking Error', field: 'BookingError', width: 150 },
        {headerName: 'Booking Date', field: 'BookingDate', width: 150, filter: 'number', filterParams: {apply: true, newRowsAction: 'keep'}},
        {
            headerName: 'Booking XML', field: 'Bookingxml', width: 250, 
            cellRenderer: function (params) {

                return '<button ng-click="display()">View XML</button>';
            }

        }
    ],
    enableColResize: true,
    enableSorting: true,
    enableFilter: true

};

return gridOptions;
}

function display(xml) {
    $('#out').html(params.value);
}
2
jqueryangularjsag-gridag-grid-react

2 Answers

2
votes

You could try using the ag-grid (cellClicked) event to call a handler in your base class. This then handles populating your html.

For a simple test dont bother with the renderer and just check you can handle the event

html

(cellClicked)="onCellClicked($event)"

back class (angular 2 so yours may differ)

private onCellClicked($event) {  }

correctly first. If that works you can then set up a renderer to show a button/link/icon/other to finish of the gui accordingly

1
votes

I figured it out. Probably, this might not be the right way to do it but it did work. I am posting the solution below.

{headerName: 'Booking XML', field: 'Bookingxml', width: 250, cellRenderer: 
                function(params) {
                return '<button>Expand All</button>';
                },
                onCellClicked: function (params) {

                    $('#out').html(params.value);
                }
            }