How can we increase the fonsize of ag-grid data on context menu action?

Question

I am using Angular 6 and ag grid version 18. I want to have an option from the context menu to increase and decrease the fontsize

I want a feature something like this. I tried rowstyle,cellstyle that did not work

See [ask], show us what you have done so far - the idea is to show what you have done, what are you expecting and what error you are getting. Also see how to create [mcve] — Paritosh, Jul 31 '18 at 18:12
I want a feature something similar to this https://plnkr.co/edit/h9eTLUfY1oGbFnmAt3gy?p=preview — Sumanth Itha, Aug 01 '18 at 05:08
add/update CSS class to the grid element once context menu item is clicked. You can set the font-size in CSS. — Paritosh, Aug 01 '18 at 05:28
this.fontSize += 1; const self=this; this.grid.gridOptions.getRowStyle = function() { return { 'font-size':self.fontSize+'px' } } this.grid.api.redrawRows(); It worked in this way. — Sumanth Itha, Aug 01 '18 at 11:09
With above option i am unable to increase font size of header need to do this as wel — Sumanth Itha, Aug 01 '18 at 11:10

score 0 · Answer 1 · edited Oct 01 '21 at 18:23

Below is how the column definition looks like. Note I am using variable a for incrementing and decrementing the font size -

var a = 10;
var columnDefs = [
    {headerName: 'Athlete', field: 'athlete', width: 150,
      cellStyle: function(params) {
        return {fontSize: params.context.a + 'px', backgroundColor: 'green'};
    }
    },
    ..
];

Set the reference to your component as below, this will be used in context menu callbacks -

var gridOptions = {
  context: this,
    ..
};

Below is the cell refresh and context menu -

function refreshCells() {
   var params = {
        force: true
    };
    gridOptions.api.refreshCells(params);
    
}
function getContextMenuItems(params) {
    var result = [
        {
            // custom item
            name: 'Increase Font',
            action: function() {
                params.context.a = params.context.a + 5;
                params.context.refreshCells();
            },
            
        },
        {
            // custom item
            name: 'Decrease Font',
            action: function() {
                params.context.a = params.context.a - 5;
                params.context.refreshCells();
            },
            
        }
    ];

    return result;
}

Please see Plunkr - Increase/decrease font ag-grid plunkr

This is just increasing the size of rows. I want that to work for headers as well — Sumanth Itha, Aug 06 '18 at 07:53

How can we increase the fonsize of ag-grid data on context menu action?

1 Answers1