How to make grid width display specified width when click restore button

Question

Hi,My grid set "allowResizing" is true, that can drag the column width always.The first column width  is  45, the second column width default is 150, that can both drag width always.After user adjust the grid columns, when click "Restore" button, the grid will show the two columns only, and make the first column width is 45, the second is 150, and user can adjust the width again, so cannot set max width or autofit column.But the sample cannot work with the grid width. Can you help me? It's important. and it bothered me for a long time.sample:https://stackblitz.com/edit/angular-6dpbdp-test889?file=app.component.ts

Rajapandi Ravi · Accepted Answer

Hi lorryl, 

Thanks for the update 

We have analyzed your query and we could see that the table width was split and assigned to the visible columns. So only the column width become incorrect. It was the cause of the problem. 

You can achieve your requirement by calculating the visible column width and set the total width to the table. Please refer the below code example and sample for more information. 





 
btnClick() { 
    var newcolumns: any[] = []; 
    var columns = this.grid.columns; 
    for (var i = 0; i < columns.length; i++) { 
      var item: any = Object.assign({}, this.grid.columns[i]); 
      if (i == 0) { 
        item.width = 50; 
        item.visible = true; 
        newcolumns.push(item); 
      } else if (i == 1) { 
        item.width = 50; 
        item.visible = true; 
        newcolumns.push(item); 
      } 
    } 
    this.grid.columns = newcolumns.slice(0); 
    this.grid.refreshColumns(); 
    this.grid.autoFitColumns(); 
    var columns = this.grid.columns; 
    setTimeout( 
      function() { 
        var sum = 0; 
        for (var i = 0; i < columns.length; i++) { 
          var col = newcolumns[i]; 
          if (newcolumns[i].visible) { 
            sum = sum + newcolumns[i].width; //calculate the total width of the column 
            this.grid.widthService.setColumnWidth(col); 
          } 
        } 
        this.grid.getHeaderTable().style.width = sum+"px";    //set the total width to the table 
        this.grid.getContentTable().style.width = sum+"px"; 
      }.bind(this), 
      100 
    ); 
  } 
 

Sample: https://stackblitz.com/edit/angular-6dpbdp-test889-tbvwhf?file=app.component.ts 

Screenshot: 

  

Regards, Rajapandi R

Praveenkumar Gajendiran · Answer

Hi lorryl, Thanks for contacting Syncfusion support. We checked the attached sample and found that you have the display two columns with fixed width when clicking on restore button it will render the columns width based on Grid’s width which is default functionality so, you cannot see autofit the Grid columns on this case. If you need to autofit the Grid column while restore button click action we suggest you use autoFitColumns method it will adapt the column width based on that column content width. You can prevent column resizing with some certain width range using column.minWidth and column.maxWidth properties. These properties allow the column resizing action to defined value range only otherwise resizing is not working. Please refer to the below modified sample code, sample, and Help Documentation for more information. [app.component.html]

[app.component.ts] btnClick() { . . . . this.grid.columns = newcolumns; this.grid.refreshColumns(); this.grid.autoFitColumns(); } Sample: https://stackblitz.com/edit/angular-6dpbdp-test889-i9kkgd Help Documentation: https://ej2.syncfusion.com/angular/documentation/api/grid/columnModel/#maxwidth https://ej2.syncfusion.com/angular/documentation/api/grid/columnModel/#minwidth Please get back to us, if you need further assistance. Regards, Balaji Sekar.

lorryl · Answer

Hi,I don't think you understand what I'm doing. Let me explain.First of all, I have a default "list" profile. There are many fields in the grid     I have a column setup tool，that can show only the below four columns, and user can adjust the column width according to their preferences. Then, user can save the grid column properties to another profile name, like "profile sample" , that can save and restore the set grid columns with. next time click the "profile sample" profile, the grid will restore the last saved grid width. It's exactly like the one set below(I hope).     But, when next login the page, the grid column width is no longer the last saved one. That's the problom that I want to solve.Do you have any idear? Is there any way to achieve it?

Balaji Sekar · Answer

Hi lorryl, 
  
Greetings from the Syncfusion support. 
  
We checked the attached screenshots and found that you store the column resizing width from “List” tab and restore those changes to “profile sample” tab’s Grid columns.  
 
To proceed with your query, we need the following details to validate further and share to us. 
 
1. Share the complete Grid rendering code and code example of rendering the grid inside the tabs. 
 
2. Code example of store/restore the columns width. 
 
3. Syncfusion Package Version. 
  
Note: we have an option to restore the persisting Grid properties using enablePersistence property when reload page. For example: If we change the column width and refresh a page it will bind the Grid with recently changed column width 
 
Please refer the below help documentation for more information. 
  
Help Documentation: https://ej2.syncfusion.com/angular/documentation/api/grid/#enablepersistence 
 
Regards, 
Balaji Sekar.

lorryl · Answer

I don't have that complicated demo.I only have the above simplified example.sample:https://stackblitz.com/edit/angular-6dpbdp-test889?file=app.component.ts

Balaji Sekar · Answer

Hi Iorryl, 
  
Thanks for your patience. 
  
We checked the attached sample and we suspect that you want to set the column’s width using exact value instead of adjust the column’s width based on content table while restore button click action.  
 
We have called the autoFitColumns method, after assigned the newcolumns to Grid’s columns and it will bind the column width based on content table width and we will set the exact width to concern column using setWidthColumns method and it will apply the exact columns width remaining showing white space on the Grid content. 
  
Please refer the below code example and sample for more information 
  




[app.component.ts] 
btnClick() { 
    var newcolumns: any[] = []; 
    var columns = this.grid.columns; 
    for (var i = 0; i < columns.length; i++) { 
      var item: any = Object.assign({}, this.grid.columns[i]); 
      if (i == 0) { 
        item.width = 45; 
        item.visible = true; 
      } else if (i == 1) { 
        item.width = 150; 
        item.visible = true; 
      } else { 
        item.visible = false; 
      } 
  
      newcolumns.push(item); 
    } 
    this.grid.columns = newcolumns.slice(0); 
    this.grid.refreshColumns(); 
    this.grid.autoFitColumns(); 
    var columns = this.grid.columns; 
    setTimeout( 
      function() { 
        for (var i = 0; i < columns.length; i++) { 
          var col = newcolumns[i]; 
          if (newcolumns[i].visible) { 
            this.grid.widthService.setColumnWidth(col); 
          } 
        } 
      }.bind(this), 
      100 
    ); 
  } 
  
Sample link: https://stackblitz.com/edit/angular-6dpbdp-test889-hc4sra  
  
Please get back to us, if you need further assistance. 
  
Regards, 
Balaji Sekar

lorryl · Answer

Hi,There is a problem with the method you provided. If you set the width of the first and second columns is 50 when click restore, then the width after this method is executed is incorrect.Please help me fix this problem, it has been bothering me for a long time.

lorryl · Answer

Hi,Is there a way not to use the timeout, because the timeout is not very reliable.Another question, why must call the autofitcolumns function first ? Is there a way avoid to call the autofitcolumns? Because I have set the columns width.

Joseph Christ Nithin Issack · Answer

Hi Lorryl, 

  Thanks for your update. 

  By default in EJ2 Grid, the width of the columns will be adjusted based on the width of the parent container. The Grid calculates total columns width and compares it with the parent containers width. If the parent container width greater than the total columns width then the remaining parent container width is equally shared to all the Columns. This is the default behavior of a html table. 

Hence we call the `autoFitColumns` method of the EJ2 Grid. Which when called will adjust the width of the columns based on the maximum width of the content in the columns. This will allow to maintain a blank space in the right side of the grid. 

  It takes some time for the grid to complete the process of the `autoFitColumns` and render the updated columns, hence we have used the time delay so that you can set the width of the columns to your desired width using the `widthService`. 

Please get back to us for further details. 

Regards, 
Joseph I.

lorryl · Answer

Can I not call the auto fit function? The grid content total width can be sumed by the visible column width, no need to must call the auto fit, is that right?

If you call auto fit once and then update the correct column width, the grid column on the interface will flash twice. I am dealing with this problem.

Joseph Christ Nithin Issack · Answer

Hi Lorryl, 

  Thanks for your update. 

   Currently we are validating your query, we will provide further details on or before 3rd December, 2021. We appreciate your patience until then. 

Regards, 
Joseph I.

lorryl · Answer

Do you have a better solution for restore the specific column widths?

Rajapandi Ravi · Answer

Hi Lorryl,

Thanks for your patience

From your update we could see that you are facing the interface flash problem while calling the autoFitColumns() method. So please remove the autoFitColumns() method and set the border for the last column by using the below way, Please refer the below code example and sample for more information.

<style>

.e-grid .e-headercell.e-lastcell {

border-right-style: solid;

border-right-color: #e0e0e0;

border-right-width: 1px;

}

.e-grid .e-gridcontent td:last-child {

border-right-style: solid;

border-right-color: #e0e0e0;

border-right-width: 1px;

}

</style>

Sample: https://stackblitz.com/edit/angular-6dpbdp-test889-ee6czs?file=index.html

Regards,

Rajapandi R