CODEWITHSUNDEEP
htmlangularag-grid
Ritika
Ritika

Reputation: 51

Replace cell's editor of ag-grid with tinymce editor

How can we add tinymce editor in the place of editor present in the cell of ag-grid?

Upvotes: 1

Views: 420

Answers (2)

Ankit Rawat
Ankit Rawat

Reputation: 321

Please see Cell Renderer

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script>var __basePath = './';</script>
    <style media="only screen">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }

        html {
            position: absolute;
            top: 0;
            left: 0;
            padding: 0;
            overflow: auto;
        }

        body {
            padding: 1rem;
            overflow: auto;
        }
    </style>
            <script src="https://unpkg.com/@ag-grid-community/[email protected]/dist/ag-grid-community.min.js"></script>
    </head>

<body>
    <div id="myGrid" style="height: 100%;width: 100%" class="ag-theme-alpine"></div>

    <script src="main.js"></script>
</body>
</html>

main.js

var columnDefs = [
    { field: 'athlete' },
    { field: 'country' },
    { field: 'year', width: 100 },
    { field: 'gold', width: 100, cellRenderer: 'medalCellRenderer' },
    { field: 'silver', width: 100, cellRenderer: 'medalCellRenderer' },
    { field: 'bronze', width: 100, cellRenderer: 'medalCellRenderer' },
    { field: 'total', width: 100 }
];

var gridOptions = {
    columnDefs: columnDefs,
    components: {
        'medalCellRenderer': MedalCellRenderer
    },
    defaultColDef: {
        editable: true,
        sortable: true,
        flex: 1,
        minWidth: 100,
        filter: true,
        resizable: true
    }
};

// cell renderer class
function MedalCellRenderer() {
}

// init method gets the details of the cell to be renderer
MedalCellRenderer.prototype.init = function(params) {
    this.eGui = document.createElement('span');
    var text = '';
    // one star for each medal
    for (var i = 0; i < params.value; i++) {
        text += '#';
    }
    this.eGui.innerHTML = text;
};

MedalCellRenderer.prototype.getGui = function() {
    return this.eGui;
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

    agGrid.simpleHttpRequest({ url: 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinnersSmall.json' })
        .then(function(data) {
            gridOptions.api.setRowData(data);
        });
});

Upvotes: 1

Yair Cohen
Yair Cohen

Reputation: 2258

In order to customize ag-grid's cell's you need to create a custom Cell Renderer component.

You can pretty much put anything you want in that custom component, including tinyMCE.

More info: https://www.ag-grid.com/javascript-grid-cell-rendering-components/

Upvotes: 2

Related Questions