Column resizing issue

[techlandandyzhang]

While I was trying to merge columns, the auto-fit column feature considered the merged content per the single column. 

In case of I don’t want this effect but applying the auto-fit feature across the columns merged, how should I do?

https://stackblitz.com/edit/angular-9cb7bp?file=app.component.ts

The following is the sample to fulfill:

[Joseph Christ Nithin Issack]

Hi techlandandyzhang, 

 

Thanks for contacting Syncfusion support, 

 

Based on your query you are facing issue in merging columns with auto-fit column feature. The autoFitColumns method resizes the column to fit the widest cell’s content without wrapping. 

 

We checked the attached sample, and we can be able to reproduce the mention behaviour at our end. So, before we proceed with this behaviour, please share the purpose of calling autoFitColumns method at your end which will help us to provide the proper solution. 

 

Regards, 

Joseph 

[techlandandyzhang]

Purpose: I want to use this autfitcolumn method on report data display.

The report supports auto-fitting column width depending on user’s choice, in the merged columns, it will show descriptions/details of the document.

And it usually rather long, original column width is not enough to show the entire content, unless wrapping the text or expand the column width.

What I hope to do is: if total column width of all columns involved after they are merged is enough to show the content, then do not expand the first column width.

The column width adjustment for merged columns needs to be performed according to their total width and the text length. 

[Ajith Govarthan]

Hi techlandandyzhang, 

  

Thanks for the update. 

  

Query: While I was trying to merge columns, the auto-fit column feature considered the merged content per the single column. In case of I don’t want this effect but applying the auto-fit feature across the columns merged, how should I do? 

  

By default, in EJ2 Grid when you apply the autofitColumns feature then the width of the all the visible columns get adjusted as per the widest cell content. So, it is not feasible to prevent the autoFitColumns feature for merged cells alone and it is the default behavior of our EJ2 Grid component. 

  

Please get back to us if you need further assistance. 

  

Regards, 

Ajith G. 

[techlandandyzhang]

AutofitColumns feature couldn’t apply to the Grid Grouping. 

Is there any solution to fulfill it by considering the Grouping logic in GridCellStyle Evnet?

[Ajith Govarthan]

Hi techlandandyzhang,  

   

Thanks for the update. 

  

Query: AutofitColumns feature couldn’t apply to the Grid Grouping. Is there any solution to fulfill it by considering the Grouping logic in GridCellStyle Evnet? 

  

Based on your query we suspect that you want to use autofitColumns along with grouping feature. So, we have prepared sample, and, in that sample, we have used autofitColumns along with grouping and found everything works fine at our end  

 

For your convenience we have attached the sample please refer them for your reference. 

  

Code Example: 

App.component.ts 

  

  onClick() { 

    this.grid.autoFitColumns(); 

  } 

 

App.component.html 

  

<div class="control-section"> <button (click)="onClick()">AutoFit</button> 

  <ejs-grid [dataSource]='data' #grid [height]='height' [width]='width' [gridLines]='gridLines' 

    [allowTextWrap]='textWrap' allowGrouping="true" [groupSettings]="groupOptions" 

    (queryCellInfo)='queryCellInfoEvent($event)' [allowResizing]='true'> 

    <e-columns> 

      <e-column field='EmployeeID' headerText='Employee ID' width='150' textAlign='Right' isPrimaryKey={true}> 

      </e-column> 

      <e-column field='EmployeeName' headerText='Employee Name' width='200'></e-column> 

      <e-column field='9:00' headerText='9:00 AM' width='120'></e-column> 

      <e-column field='9:30' headerText='9:30 AM' width='120'></e-column> 

      <e-column field='10:00' headerText='10:00 AM' width='120'></e-column> 

      <e-column field='10:30' headerText='10:30 AM' width='120'></e-column> 

      <e-column field='11:00' headerText='11:00 AM' width='120'></e-column> 

      <e-column field='11:30' headerText='11:30 AM' width='120'></e-column> 

      <e-column field='12:00' headerText='12:00 PM' width='120'></e-column> 

      <e-column field='12:30' headerText='12:30 PM' width='120'></e-column> 

      <e-column field='2:30' headerText='2:30 PM' width='120'></e-column> 

      <e-column field='3:00' headerText='3:00 PM' width='120'></e-column> 

      <e-column field='3:30' headerText='3:30 PM' width='120'></e-column> 

      <e-column field='4:00' headerText='4:00 PM' width='120'></e-column> 

      <e-column field='4:30' headerText='4:30 PM' width='120'></e-column> 

      <e-column field='5:00' headerText='5:00 PM' width='120'></e-column> 

    </e-columns> 

  </ejs-grid> 

</div> 

  

Sample link: https://stackblitz.com/edit/angular-9cb7bp-k7fjog?file=app.component.html 

  

If you still face the issue, then please share the video demonstration of the issue to validate further on your requirement. 

  

Regards, 

Ajith G.