Ag-Grid Clear Pinned columns function is not working

Question

I am using ag-grid and have substituted column and row data passed from my pyramid application back-end into the 'grid-options' variable stored on my page - required to render the grid. The grid works, but I am not able to implement the included ag-grid specific functions (ex; clearPinned(); etc.) using the data I am passing into the grid. Ag-grids default method for defining the grid appears to use hard coded column headers. At least that is what is demonstrated in the example I am following, using the vanilla JS method: (https://www.ag-grid.com/javascript-grid-pinning/)

The column pinning functionality for the grid is working. I can pin all columns but in order to reset them I have to refresh the page. I want to reset the columns using the clearPinned() method. I am storing my column headers in a variable called 'allSampleTableColumns'. I am passing that into the gridOptions variable instead of a hard coded columnDefs variable. In my clear pinned function, I am trying to specify the 'Sample name' label, for example, and have the clear pinned reset that column after I pin it.

Method from ag-grid with hard coded column headers:

Html: 



<div style="padding: 4px;">
    <button onclick="clearPinned()">Clear Pinned</button>
    <button onclick="resetPinned()">Left = #, Athlete, Age; Right = Total
    </button>
    <button onclick="pinCountry()">Left = Country</button>
</div>

JS:

var columnDefs = [
            {headerName: "#", colId: "rowNum", valueGetter: "node.id", width: 40, pinned: 'left'},
            {headerName: "Athlete", field: "athlete", width: 150, pinned: 'left'},
            {headerName: "Age", field: "age", width: 90, pinned: 'left'},
            {headerName: "Country", field: "country", width: 120},
            {headerName: "Year", field: "year", width: 90},
            {headerName: "Date", field: "date", width: 110},
            {headerName: "Sport", field: "sport", width: 110},
            {headerName: "Gold", field: "gold", width: 100},
            {headerName: "Silver", field: "silver", width: 100},
            {headerName: "Bronze", field: "bronze", width: 100},
            {headerName: "Total", field: "total", width: 100, pinned: 'right'}
        ];


     var gridOptions = {
            defaultColDef: {
                resizable: true
            },
            columnDefs: columnDefs,
            debug: true,
            rowData: null
        };


    function clearPinned() {
            gridOptions.columnApi.setColumnPinned('rowNum', null);
            gridOptions.columnApi.setColumnPinned('athlete', null);
            gridOptions.columnApi.setColumnPinned('age', null);
            gridOptions.columnApi.setColumnPinned('country', null);
            gridOptions.columnApi.setColumnPinned('total', null);
        }

---

My code:

Instead of columns refs (), I am using:



var allSampleTableColumns = [{label:"sampleId", field:"sampleId", type:"string", pinned: 'left', lockPinned: true, cellClass: 'lock-pinned'}].concat(dataFromPython.sampleTable.columns.map(function(item) { return {label: item, field: item, type:"string"}}));

The column headers are coming from a python variable which is being passed to the page by my pyramid application:

dataFromPython.sampleTable.columns

It is an array of objects containing all the column headers required:



[{ "label": "sampleId", "field": "sampleId", "type": "string", "pinned": "left", "lockPinned": true, "cellClass": "lock-pinned" }, { "label": "Replicate Group ID", "field": "Replicate Group ID", "type": "string" }, { "label": "Sample name", "field": "Sample name", "type": "string" }, { "label": "Sample name long", "field": "Sample name long", "type": "string" }, { "label": "Sample Type", "field": "Sample Type", "type": "string" }, { "label": "Sample type long", "field": "Sample type long", "type": "string" }, { "label": "Generic sample type", "field": "Generic sample type", "type": "string" }, { "label": "Generic sample type long", "field": "Generic sample type long", "type": "string" }, { "label": "Sample Description", "field": "Sample Description", "type": "string" }, { "label": "Tissue/organism part", "field": "Tissue/organism part", "type": "string" }, { "label": "Parental cell type", "field": "Parental cell type", "type": "string" }, { "label": "Final cell type", "field": "Final cell type", "type": "string" }, { "label": "Cell line", "field": "Cell line", "type": "string" }, { "label": "Reprogramming method", "field": "Reprogramming method", "type": "string" }, { "label": "Developmental stage", "field": "Developmental stage", "type": "string" }, { "label": "Media", "field": "Media", "type": "string" }, { "label": "Disease State", "field": "Disease State", "type": "string" }, { "label": "Labelling", "field": "Labelling", "type": "string" }, { "label": "Genetic modification", "field": "Genetic modification", "type": "string" }, { "label": "FACS profile", "field": "FACS profile", "type": "string" }, { "label": "Age", "field": "Age", "type": "string" }, { "label": "Organism", "field": "Organism", "type": "string" }]

I am passing it into my ag-grid gridOptions variable:

var gridOptions = {
        defaultColDef: {
            resizable: true
        },
        columnDefs: allSampleTableColumns,
        debug: true,
        rowData: dataFromPython.allSampleTable,
    };

My clearPinned function looks like this, I am trying to specify which column ('Sample name') to reset after I have pinned it.

clearPinned: function(){
                gridOptions.columnApi.setColumnPinned(this.allSampleTableColumns['Sample name'], null);
            }

The expectation is that hitting the clear pinned button will reset all columns back to the specified layout (only one column, sampleId should be pinned by default). Nothing is happening when I call the clearPinned function.

Answer 1

In the end the solution to this was to use the: var colState = gridOptions.columnApi.getColumnState(); found here: ag-grid.com/javascript-grid-column-definitions

Answer 2

This is because the setColumnPinned method refers to the colId that is supplied. In this case, you don't have a column with an id of Sample name, but you have a headerName with a value of Sample name.

To fix this, you just need to add colId declarations to your columnDefs objects.