Auto Wrap

24 Feb 20221 minute to read

The auto wrap allows the cell content of the grid to wrap to the next line when it exceeds the boundary of the cell width. The Cell Content wrapping works based on the position of white space between words.
To enable auto wrap, set the allowTextWrap property to true.
You can configure the auto wrap mode by setting the wrapMode property of e-grid-textwrapsettings tag helper.

There are three types of wrapMode. They are:

  • Both: Both value is set by default. Auto wrap will be enabled for both the content and the header.
  • Header: Auto wrap will be enabled only for the header.
  • Content: Auto wrap will be enabled only for the content.

When a column width is not specified, then auto wrap of columns will be adjusted with respect to the grid’s width.

In the following example, the wrapMode is set to Content.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" gridLines="Default" height="315" allowTextWrap="true">
    <e-grid-textwrapsettings wrapMode="Content"></e-grid-textwrapsettings>
        <e-grid-column field="RoolNo" headerText="Rool No"  textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="Name" headerText="Name of the inventor"  width="100"></e-grid-column>                
        <e-grid-column field="patentfamilies" headerText="No of patentfamilies"  width="130"></e-grid-column>
        <e-grid-column field="Country" headerText="Country" width="130"></e-grid-column>
        <e-grid-column field="mainfields" headerText="Main fields of Invention" width="150"></e-grid-column>
public IActionResult Index()
    var Records = InventorDetails.GetAllRecords();
    ViewBag.DataSource = Records;
    return View();