Menu
I struggled with pinning a group column left and I wanted to share my solution with the world. Refer to the autoGroupColumnDef section. Hope this helps!
var columnDefs = [
{ headerName: "Console", field: "console", width: 140, rowGroup: true},
{ headerName: "Alarm Type", field: "AlarmType", width: 20, pivot: true },
{ headerName: "Total", field: "Total", width: 55, aggFunc: 'sum'},
{ headerName: "%", field: "Percentage", width: 50, aggFunc: 'sum', cellRenderer: roundNumber },
{ headerName: "IP", field: "InProgress", width: 45, aggFunc: 'sum', cellRenderer: roundNumber }
];
var gridOptions = {
groupMultiAutoColumn: true,
groupDefaultExpanded: -1,
suppressAggFuncInHeader: true,
groupSuppressBlankHeader: true,
pivotMode: true,
columnDefs: columnDefs,
enableRangeSelection: true,
toolPanelSuppressRowGroups: true,
toolPanelSuppressPivotMode: true,
toolPanelSuppressPivots: true,
toolPanelSuppressValues: true,
autoGroupColumnDef: {
headerName: 'Consoles',//custom header name for group
pinned: 'left',//force pinned left. Does not work in columnDef
cellRendererParams: {
suppressCount: true,//remove number in Group Column
}
}
};
418
Pinning via Column Dragging When no columns are pinned, drag the column to the edge of the grid and wait for approximately one second. The grid will then assume you want to pin and create a pinned area and place the column into it.
A pinned base column is the standard column base found in most metal buildings. This connection is pinned because it has enough stiffness to apply horizontal and vertical loads to the foundations, but enough flexibility to not apply moment.
You can pin columns by setting the pinned attribute on the column definition to either 'left' or 'right' . columnDefs: [ { field: 'athlete', pinned: 'left' } ], Below shows an example with two pinned columns on the left and one pinned column on the right.
To put pinned rows into your grid, set pinnedTopRowData or pinnedBottomRowData in the same way as you would set normal data into rowData . After the grid is created, you can update the pinned rows by calling api. setPinnedTopRowData(rows) and setPinnedBottomRowData(rows) .
To achieve expected use below option of removing pivotMode: true which is causing issue while pinning column to left
working soluion for reference
var columnDefs = [
{ headerName: "Console", field: "console", width: 140, rowGroup: true},
{ headerName: "Alarm Type", field: "AlarmType", width: 55, pivot: true },
{ headerName: "Total", field: "Total", width: 55, aggFunc: 'sum'},
{ headerName: "%", field: "Percentage", width: 50, aggFunc: 'sum'},
{ headerName: "IP", field: "InProgress", width: 45, aggFunc: 'sum'}
];
var gridOptions = {
groupMultiAutoColumn: true,
groupDefaultExpanded: -1,
suppressAggFuncInHeader: true,
groupSuppressBlankHeader: true,
columnDefs: columnDefs,
enableRangeSelection: true,
toolPanelSuppressRowGroups: true,
toolPanelSuppressPivotMode: true,
toolPanelSuppressValues: true,
autoGroupColumnDef: {
headerName: 'Consoles',//custom header name for group
pinned: 'left',//force pinned left. Does not work in columnDef
cellRendererParams: {
suppressCount: true,//remove number in Group Column
}
}
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
var data = [
{'console': 1, 'AlarmType': 'A', 'Total': 200, 'Percentage': 20, 'InProgress': 123456},
{'console': 1, 'AlarmType': 'A', 'Total': 200, 'Percentage': 20, 'InProgress': 123456}
];
gridOptions.api.setRowData(data);
});<!DOCTYPE html>
<html lang="en">
<head>
<script> var __basePath = ''; </script>
<style media="only screen">
html, body {
height: 50%;
width: 60%;
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%;" class="ag-theme-balham"></div>
<script src="main.js"></script>
</body>
</html>Plunker for reference - https://plnkr.co/edit/eWc4HsKzLO80vTKtSxQp?p=preview
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
