'How to hide/show columns in ag-grid based on checkbox selection on column names
I have developed a ag-grid in angular for my project. I need to show/hide columns when i click on the checkbox present on the show/hide toolpanel. Attached the image for reference. Any help on this is appreciated. Below is the code for reference. Is there any feature in ag-grid that I can use ? I had spent hours on this, but not sure what would be appropriate for my requirement
<ag-grid-angular id="myGrid1" style=" height: 500px; margin-top:0px" class="ag-theme-alpine"
[rowData]="gridOptionsPolicySearch.rowData"
[columnDefs]="gridOptionsPolicySearch.columnDefs" [pagination]="true" [paginationPageSize]="paginationPageSize"
(gridReady)="onGridReady($event)"
[defaultColDef]="defaultColDef"
[allowContextMenuWithControlKey]="true"
>
</ag-grid-angular>
ngOnInit() {
this.responsePolicy = [
{
name: 'ABC Corp',
policy: 'PLW - D13939081',
status: 'Inforce',
effective: '06/26/2018',
expiratio: '06/26/2018',
coverage: '',
claims: 'Yes',
pac: 'MXS',
mac: '0082110',
divisionCode: 'W',
policyTerm: '',
policySecID: '989899'
},
{
name: 'ABC Corp',
policy: 'PLW - D13939081',
status: 'Inforce',
effective: '06/26/2018',
expiratio: '06/26/2018',
coverage: '',
claims: 'Yes',
pac: 'MXS',
mac: '0082110',
divisionCode: 'W',
policyTerm: '',
policySecID: '989899'
},
{
name: 'ABC Corp',
policy: 'PLW - D13939081',
status: 'Inforce',
effective: '06/26/2018',
expiratio: '06/26/2018',
coverage: '',
claims: 'Yes',
pac: 'MXS',
mac: '0082110',
divisionCode: 'W',
policyTerm: '',
policySecID: '989899'
},
{
name: 'ABC Corp',
policy: 'PLW - D13939081',
status: 'Inforce',
effective: '06/26/2018',
expiratio: '06/26/2018',
coverage: '',
claims: 'Yes',
pac: 'MXS',
mac: '0082110',
divisionCode: 'W',
policyTerm: '',
policySecID: '989899'
},
{
name: 'ABC Corp',
policy: 'PLW - D13939081',
status: 'Inforce',
effective: '06/26/2018',
expiratio: '06/26/2018',
coverage: '',
claims: 'Yes',
pac: 'MXS',
mac: '0082110',
divisionCode: 'W',
policyTerm: '',
policySecID: '989899'
}]
this.gridOptionsPolicySearch.rowData= this.responsePolicy;
}
private getColumnDefsPolicySearch(): ColDef[] {
return [
{
field: 'name', headerName: 'Name', sortable: true, resizable: true,
unSortIcon: true,
cellStyle: params => {
if (params.value === 'Deactivated') {
return { color: '#AFAFAF' };
}
return null;
}
},
{
field: 'policy', headerName: 'Policy', sortable: true, resizable: true,
unSortIcon: true,
cellRenderer: function (params) {
return '<a href="">' + params.value + '</a>';
},
cellStyle: params => {
if (params.value === 'Deactivated') {
return { color: '#AFAFAF' };
}
return null;
}
},
{
field: 'status', headerName: 'Status', sortable: true, resizable: true,
unSortIcon: true,
cellStyle: params => {
if (params.value === 'Deactivated') {
return { color: '#AFAFAF' };
}
return null;
}
},
{
field: 'effective', headerName: 'Effective', sortable: true, resizable: true,
unSortIcon: true,
cellStyle: params => {
if (params.value === 'Deactivated') {
return { color: '#AFAFAF' };
}
return null;
}
},
{
field: 'expiration', headerName: 'Expiration', sortable: true, resizable: true,
unSortIcon: true,
cellStyle: params => {
if (params.value === 'Deactivated') {
return { color: '#AFAFAF' };
}
return null;
}
},
{
field: 'coverage', headerName: 'Coverage', sortable: true, resizable: true,
unSortIcon: true,
cellStyle: params => {
if (params.value === 'Deactivated') {
return { color: '#AFAFAF' };
}
return null;
}
},
{
field: 'claims', headerName: 'Claims Made', sortable: true, resizable: true,
unSortIcon: true,
cellStyle: params => {
if (params.value === 'Deactivated') {
return { color: '#AFAFAF' };
}
return null;
}
},
{
field: 'pac', headerName: 'PAC', sortable: true, resizable: true,
unSortIcon: true,
cellStyle: params => {
if (params.value === 'Deactivated') {
return { color: '#AFAFAF' };
}
return null;
}
},
{
field: 'mcc', headerName: 'MCC', sortable: true, resizable: true,
unSortIcon: true,
cellStyle: params => {
if (params.value === 'Deactivated') {
return { color: '#AFAFAF' };
}
return null;
}
},
{
field: 'divsionCode', headerName: 'Div', sortable: true, resizable: true,
unSortIcon: true,
cellStyle: params => {
if (params.value === 'Deactivated') {
return { color: '#AFAFAF' };
}
return null;
}
},
{
field: 'policyTerm', headerName: 'Policy Term', sortable: true, resizable: true,
unSortIcon: true,
cellStyle: params => {
if (params.value === 'Deactivated') {
return { color: '#AFAFAF' };
}
return null;
}
},
{
field: 'policySecID', headerName: 'Policy Sec ID', sortable: true, resizable: true,
unSortIcon: true,
cellStyle: params => {
if (params.value === 'Deactivated') {
return { color: '#AFAFAF' };
}
return null;
}
}
];
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|


