AutoFit Specific Columns

24 Feb 20221 minute to read

The autoFitColumns method resizes the column to fit the widest cell’s content without wrapping. You can autofit a specific column at initial rendering by invoking the autoFitColumns method in dataBound event.

To use the autoFitColumns method, inject the Resize module in the grid.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" dataBound="dataBound" height="315">   
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID"  width="140"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="130"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="120"></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City" width="120"></e-grid-column>
        <e-grid-column field="ShipAddress" headerText="Ship Address" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function dataBound(args) {
        this.autoFitColumns(['ShipName', 'ShipAddress']);    
    }
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

You can autofit all the columns by invoking the autoFitColumns method without column names.