我们如何在上下文菜单操作中增加农业网格数据的样式?

时间:2018-07-31 12:04:12

标签: angular6 ag-grid ag-grid-ng2

我正在使用Angular 6和ag网格版本18。我想从上下文菜单中选择一个选项来增大和减小字体大小

我想要一个类似这样的功能。我尝试了行样式,单元样式不起作用

1 个答案:

答案 0 :(得分:0)

下面是列定义的外观。注意我正在使用变量a来去掉字体大小和去掉字体大小-

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

如下所示设置对组件的引用,这将在上下文菜单回调中使用-

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

下面是单元格刷新和上下文菜单-

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

请参阅Plunkr- Increase/decrease font ag-grid plunkr