Auto adjust columns width

[Narsimsetty Chalamaiah]

Hi Team,

I am using below code , 

i required auto adjust columns width , please provide code asap.

please find attached screen for ref.

 <ejs-grid #grid [dataSource]='data' [allowPaging]='true' [pageSettings]='pageSettings' [allowSorting]='true'

          allowReordering='true' (actionComplete)="actionComplete($event)" [height]="300"

          (queryCellInfo)='tooltip($event)' (dataBound)="dataBound($event)">

          <e-columns>

            <div *ngFor="let column of ColumnList">

    <div *ngIf='column.hyperLink === true'>

               

                <div *ngIf='column.field === "Name"'>

                  <e-column [field]="column.field" [headerText]="column.headerName" [visible]='column.visibility'

                    [customAttributes]='customAttributes'  [width]="column.width" >

                    <ng-template #template let-data>

                      <a (click)='onClickName(data)' class="hyl">{{data.Name}}</a>

                    </ng-template>

                  </e-column>

                </div>

                <div *ngIf='column.field === "CustomerNo"'>

                  <e-column [field]="column.field" [headerText]="column.headerName" [visible]='column.visibility'

                    [customAttributes]='customAttributes' [width]=150>

                    <ng-template #template let-data>

                      <a (click)='onClickCustomerNo(data)' class="hyl">{{data.CustomerNo}}</a>

                    </ng-template>

                  </e-column>

                </div>

               

              

              </div>

             <div *ngIf='column.hyperLink !== true'>

 <div *ngIf='column.field === "BusinessAlias"'>

                  <e-column [field]="column.field" [headerText]="column.headerName" [visible]='column.visibility'

                    [customAttributes]='customAttributes' width=150>

                  </e-column>

                </div>

                <div *ngIf='column.field === "Ssoid"'>

                  <e-column [field]="column.field" [headerText]="column.headerName" [visible]='column.visibility'

                    [customAttributes]='customAttributes' width=150>

                  </e-column>

                </div>

</div>

 </div>

          </e-columns>

        </ejs-grid>

Attachment: autofitcolumns_423d9e8b.zip

[Rajapandiyan Settu]

Hi Narsimsetty, 

 

Thanks for contacting Syncfusion support. 

 

Based on your query, you need to set auto-width to the column and show the content without wrapping in the Grid. You can achieve your requirement by using autoFitColumns() feature.  

 

The autoFitColumns method resizes the columns in the Grid to fit the widest cell’s content without wrapping. Please refer to the below documentation and code example for more information. 

 

autofit Specific Columns: https://ej2.syncfusion.com/angular/documentation/grid/columns/#autofit-specific-columns 

dataBound: https://ej2.syncfusion.com/angular/documentation/api/grid/#databound 

  

[app.component.ts] 

import { Component, OnInit, ViewChild } from "@angular/core"; 

import { orderDetails } from "./data"; 

import { GridComponent, ResizeService } from "@syncfusion/ej2-angular-grids"; 

 

@Component({ 

  selector: "app-root", 

  templateUrl: "app.component.html", 

  providers: [ResizeService] // provide resizeService to achieve autofit in Grid 

}) 

export class AppComponent { 

  @ViewChild("grid") public grid: GridComponent; 

  ---- 

  dataBound(args) { 

     // this.grid.autoFitColumns(["Name"]); // autoFit particular column 

    this.grid.autoFitColumns(); // autofit all the columns 

  } 

} 

 

Sample: https://stackblitz.com/edit/angular-cphtis-imtr5h?file=app.component.ts 

 

Please get back to us if you need further assistance with us. 

 

Regards, 

Rajapandiyan S