ag-Grid: unable to find cellRenderer for key xxx

Question

I am using AG Grid

Below is my code

$scope.columnDefs = [{
    cellRenderer: 'childMessageRenderer',
    field: "ID",
    cellRendererParams: {
        rendererImage: 'rain.png'
    },
    headerName: "Edit"
}];
$scope.gridOptions = {
    columnDefs: $scope.columnDefs,
    rowData: $scope.rowData,
    rowHeight: 48,
    headerHeight: 50,
    onRowSelected: onRowSelected,
    components: {
        childMessageRenderer: $scope.childMessageRenderer
    }
};

$scope.childMessageRenderer = function(params) {
    var rainPerTenMm = 5;
    return $scope.createImageSpan(rainPerTenMm, params.rendererImage);
}
$scope.createImageSpan = function(imageMultiplier, image) {
    var resultElement = document.createElement("span");
    for (var i = 0; i < imageMultiplier; i++) {
        var imageElement = document.createElement("img");
        imageElement.src = "some image url";
        resultElement.appendChild(imageElement);
    }
    return resultElement;
}

This gives me an error. Not sure what I am missing

ag-Grid: unable to find cellRenderer for key childMessageRenderer

Answer 1

Try the below code..

$scope.columnDefs = [
    {
        cellRenderer: 'childMessageRenderer',
        field:"ID",
        cellRendererParams: {
            rendererImage: 'rain.png'      
        },
        headerName: "Edit"
    }];
$scope.gridOptions = {
        columnDefs: $scope.columnDefs,
        rowData: $scope.rowData,
        rowHeight: 48,
        headerHeight: 50,
        onRowSelected: onRowSelected,
        components: {
            childMessageRenderer: childMessageRenderer
        }
    };

function childMessageRenderer(params) {
        var rainPerTenMm = 5;
        return createImageSpan(rainPerTenMm, params.rendererImage);
    }
function createImageSpan(imageMultiplier, image) {
        var resultElement = document.createElement("span");
        for (var i = 0; i < imageMultiplier; i++) {
            var imageElement = document.createElement("img");
            imageElement.src = "some image url";
            resultElement.appendChild(imageElement);
        }
        return resultElement;
    }