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

Question

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

Matrim · Accepted Answer · 2017-09-26 09:19:09Z

2

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

answered Sep 26, 2017 at 9:19

Matrim

6431 gold badge7 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jatin · Accepted Answer · 2017-09-26 14:41:43Z

1

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

answered Sep 26, 2017 at 14:41

Jatin

451 silver badge11 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related