Hide empty igx-grid column on load

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 Hristodorova
Associate 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();

Hello,

I have modified the previously provided sample and added a dropdown with two options. In both data sources, there are empty columns. When the selection of the dropdown is changed the proper data is loaded into the grid.

This would invoke the grid's onColumnInit event which is emitted when a column is initialized. In the event handler, all columns with empty values could be hidden using the previously suggested approach.

Here could be found the modified sample. Please test it on your side and let me know if I may be of any further assistance.

Sincerely,

Teodosia Hristodorova

Associate Software Developer

Thanks for your response!!!

My requirement was slightly different but your code given me hint how we can invoke onColumnInit event. We have only one data source and we pass where clause in different fields and after that, once data is returned we check if there is not data in any column, hide that.

I have created three set of headers, 2 of them are duplicate and added a dummy column in 3rd one.

Also, added a condition in onColumnInit to check if field is undefined to keep that hide always

if (item[field] !== null && item[field] !== undefined) {

and also used below code to invoke onColumnInit:

           if (this.isMainGrid){

              this.gridConfig = this.gridConfig2;

              this.isMainGrid = false;

            } else{

              this.gridConfig = this.gridConfig1;

              this.isMainGrid = true;

            }

If there is better solution for this please let me know so that i can get rid of 3 header sets and dummy column.

Thanks,

Jitender

Hello,

I am glad that you managed to achieve your requirement.

The implemented approach looks good to me.

Please do not hesitate to let me know if you have any further questions on this matter.

Regards,
Teodosia Hristodorova
Associate Software Developer