Issue defaulting/resetting Column/Widths within Grid

[mc r]

Is there anyway I can reset all Grid/Column widths/rules and sizes on a refresh to clear all changes so that the grid will load from my values once again? I have tried the following at various points before calling my own values again.

grid.refresh
grid.refreshColumns
grid.autoFitColumns

I have a Grid that is dynamically populated. Currently there are two types of columns, default columns and special columns. I have a method that gets the width of these columns each time a request is made changing the Datasource and everything is working well as intended.

However when I use the allowResizing feature my total grid width and columns are limited to this new value and despite my best efforts I cannot reset without fully refreshing the page.

This is the Grid before adjusting size

This is while resizing, which is expected

This is the new fixed grid width and of the columns after resizing and going to new data sources which is persistent until I F5 or leave and return to page. Notice that it does resize the columns based on my rules, just not using the whole grid width.


the e-headercontent and the e-grid e-gridcontent are all the max length, however the e-table is what appears to be less now, not sure exactly what to do with that other than setting it to 100% in the SCSS.

        <ejs-grid #grid [dataSource]='dmtable'

        gridLines='Both'

        [enablePersistence]='false'

        [allowPaging]='false'

        [allowResizing]='true'

        [pageSettings]='pageSettings'

        [toolbar]='toolbar'

        [enableStickyHeader]="true"

        (toolbarClick)='onToolbarClick($event)'

        [editSettings]="editSettings"  

        (rowSelected)='rowSelected($event)'

        (cellSelected)="onCellSelected($event)"    

        [selectionSettings]='selectionOptions'

        (keyPressed)='keyPressed($event)'  

        (created)="created($event)"

        >

          <ng-template #eGridColumns>

            <e-columns>

              <e-column ></e-column>

            </e-columns>

          </ng-template>

        </ejs-grid>

getColumnWidth(columnName: string): string {

  const customWidth = '200';

  const defaultWidth = '75';

  return this.editFields.includes(columnName) ? customWidth : defaultWidth;

}

  resetColumnWidths() {

    this.grid.columns.forEach((column: any) => {

      column.width = this.getColumnWidth(column.field);

    });

    this.grid.refreshColumns();

  }

[Hemanthkumar S]

Hi mc r,

Greetings from Syncfusion support.

Query: Is there anyway I can reset all Grid/Column widths/rules and sizes on a refresh to clear all changes so that the grid will load from my values once again?

Based on the information you provided, it appears that you are calling the resetColumnWidths method after resizing the column width of the Grid. The purpose of the resetColumnWidths method is to reset the column width, and then you invoke the refreshColumns method of the Grid.

When resizing a column in the Syncfusion EJ2 Grid, the width of the resized column will be adjusted based on the new width value, and the widths of the header and content tables will be automatically set based on the cumulative width of the Grid's columns. This is the default behavior of the Grid. However, when you call the refreshColumns method, it only refreshes the changes made to the columns and does not reset the header and content table widths.

Based on your update, we recommend a custom solution in which you need to reset the width of the columns and call the refreshColumns method as you have done in the resetColumnWidths method and then reset the header and content table widths by setting an Empty string after invoking the refreshColumns method. This will allow the header and content table of the Grid to occupy the full width of the Grid, ensuring that the column widths are adjusted accordingly.

For more information, please refer to the below code example.

 

resetColumnWidths() {

    this.grid.columns.forEach((column: any) => {

      column.width = this.getColumnWidth(column.field);

    });

    this.grid.refreshColumns();

    this.grid.getHeaderTable().style.width = '';

    this.grid.getContentTable().style.width = '';

  }

 

Please feel free to contact us if you require any further assistance. We are always available and eager to help you in any way we can.

Regards,

Hemanth Kumar S