Could someone please share code snippet to achieve a functionality that if there are no values in igx-grid column, hide that at the time of load.
Hello,
I have been looking into your question and prepared a small sample in order to demonstrate how such behavior could be achieved. An approach I could suggest is to handle the grid's onColumnInit event. It would be fired for each column after the onInit and as an event argument is passed the initialized column, so you would have access to all of its properties.
In the event handler, you could check whether the data has values in this column and besed on this to set the column hidden property to true or false. For the purposes of the example, I'm logging the hidden column names in the cosole:
public onColumnInit(event: IgxColumnComponent) { const field = event.field; let isHidden = true; this.data.forEach(item => { if (item[field] !== null) { isHidden = false; return; } }); if (isHidden) { console.log(event.field); } event.hidden = isHidden; }
Here could be found my sample for your reference. Please test it on your side and let me know if I may be of any further assistance.
Sincerely,Teodosia HristodorovaAssociate Software Developer
Hello Teodosia,
Thanks for your time to look into this. I can see solution you provided in stackblitz.com working fine but my requirement is bit different. We have a dropdown and a button we select a value from dropdown and hit button, it fetch data from endpoint based on selected value and load data in igx-grid. After that we want to hide columns if there are no values.
We were using below function in ag-grid but could not find replacement in igx-grid. It would be great help if you could provide solution for this.
$scope.gridApi.hideEmptyColumns();