Update colspan value when column hidden using hideAtMedia for small screen

[Glen Alexander]

Hi,

I have a row in my Grid that utilizes the colspan attribute. I'm also hiding 1 column on screens less than 1025px in width. The issue I'm facing is if I resize my screen to below 1025px the colspan isn't updating on resize, only on screen refresh or the grid.refresh() method but I didn't like how it refreshed the entire grid.

Below is my code.

screenWidth: number;

getScreenSize($event) {

    this.screenWidth = window.innerWidth;

}

 public queryCellInfoEvent: EmitType<QueryCellInfoEventArgs> = (args: QueryCellInfoEventArgs) => {

        const data: ColumnSpanDataType = args.data as ColumnSpanDataType;

        const level = 'level';

        if (args.data[level] === 'Project' && args.column.field === 'identifier' && this.screenWidth > 1025) {

            args.colSpan = 4;

        }

        if (args.data[level] === 'Project' && args.column.field === 'identifier' && this.screenWidth <= 1025) {

            args.colSpan = 3;

        }

    }

Is there a way to update only the colspan value when the column is hidden after resizing and not by refreshing the grid?

[Pavithra Subramaniyam]

Hi Glen, 

 

Thanks for contacting Syncfusion support. 

 

While setting the col span for the Grid cells, the content table “td“ structure will be set based on that span value and while resizing the window, even resetting the col span for those cells will not work properly. So, we suggest calling the “grid.refresh()” method inside the window resize event which is the only way to achieve your requirement. 

 

Regards, 

Pavithra S