Search results

Autowrap in React Grid component

28 Nov 2022 / 2 minutes 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 textWrapSettings.wrapMode property.

There are three types of wrapMode. They are

  • Both - It is the default value. Auto wrap will be enabled for both content and Header.
  • Header - Auto wrap will be enabled only for header.
  • Content - Auto wrap will be enabled only for 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 below example, the textWrapSettings.wrapMode is set as Content.

Source
Preview
App.jsx
datasource.jsx
App.tsx
datasource.tsx
Copied to clipboard
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { inventoryData } from './datasource';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.settings = { wrapMode: 'Content' };
    }
    render() {
        return (<div>
  <GridComponent dataSource={inventoryData} allowPaging={true} allowTextWrap={true} textWrapSettings={this.settings} height='400'>
      <ColumnsDirective>
          <ColumnDirective field='Inventor' headerText='Inventor' width='180' textAlign='Right'/>
          <ColumnDirective field='NumberofPatentFamilies' headerText='Number of Patent Families' width='180' textAlign='Right'/>
          <ColumnDirective field='Country' headerText='Country' width="140"/>
          <ColumnDirective field='Active' headerText='Active' width='120'/>
          <ColumnDirective field='Mainfieldsofinvention' headerText='Main Fields of Invention' width='200'/>
      </ColumnsDirective>
      <Inject services={[Page]}/>
  </GridComponent>
  </div>);
    }
}
;
Copied to clipboard
export const inventoryData = [
    {
        'Inventor': 'Kia Silverbrook',
        'NumberofPatentFamilies': 4737,
        'Country': 'Australia',
        'Number of INPADOC patents': 9839,
        'Active': '1994-2016',
        'Mainfieldsofinvention': 'Printing, Digital paper, Internet, Electronics,Lab-on-a-chip, MEMS, Mechanical, VLSI',
    },
    {
        'Inventor': 'Shunpei Yamazaki',
        'NumberofPatentFamilies': 4677,
        'Country': 'Japan',
        'Number of INPADOC patents': '10000+',
        'Active': '1976-2016',
        'Mainfieldsofinvention': 'Thin film transistors, Liquid crystal displays, Solar cells, Flash memory, OLED',
    },
    {
        'Inventor': 'Lowell L. Wood, Jr.',
        'NumberofPatentFamilies': 1419,
        'Country': 'USA',
        'Number of INPADOC patents': 1332,
        'Active': '1977-2016',
        'Mainfieldsofinvention': 'Mosquito laser, Nuclear weapons',
    },
    {
        'Inventor': 'Paul Lapstun',
        'NumberofPatentFamilies': 1281,
        'Country': 'Australia',
        'Number of INPADOC patents': 3099,
        'Active': '2000-2016',
        'Mainfieldsofinvention': 'Printing, Digital paper, Internet, Electronics, CGI, VLSI',
    },
    {
        'Inventor': 'Gurtej Sandhu',
        'NumberofPatentFamilies': 1255,
        'Country': 'India',
        'Number of INPADOC patents': 2038,
        'Active': '1991-2016',
        'Mainfieldsofinvention': 'Thin film processes and materials, VLSI, Semiconductor device fabrication',
    },
    {
        'Inventor': 'Jun Koyama',
        'NumberofPatentFamilies': 1240,
        'Country': 'Japan',
        'Number of INPADOC patents': 4126,
        'Active': '1991-2016',
        'Mainfieldsofinvention': 'Thin film transistors, Liquid crystal displays, OLED',
    },
    {
        'Inventor': 'Roderick A. Hyde',
        'NumberofPatentFamilies': 1240,
        'Country': 'USA',
        'Number of INPADOC patents': 3360,
        'Active': '2001-2016',
        'Mainfieldsofinvention': 'Various',
    },
    {
        'Inventor': 'Leonard Forbes',
        'NumberofPatentFamilies': 1093,
        'Country': 'Canada',
        'Number of INPADOC patents': 1398,
        'Active': '1991-2016',
        'Mainfieldsofinvention': 'Semiconductor Memories, CCDs, Thin film processes and materials, VLSI',
    },
    {
        'Inventor': 'Thomas Edison',
        'NumberofPatentFamilies': 1084,
        'Country': 'USA',
        'Number of INPADOC patents': 2332,
        'Active': '1847(b)-1931(d)',
        'Mainfieldsofinvention': 'Electric power, Lighting, Batteries, Phonograph, Cement, Telegraphy, Mining',
    },
    {
        'Inventor': 'Donald E. Weder',
        'NumberofPatentFamilies': 999,
        'Country': 'USA',
        'Number of INPADOC patents': 1993,
        'Active': '1976-2015',
        'Mainfieldsofinvention': 'Florist supplies',
    },
    {
        'Inventor': 'George Albert Lyon',
        'NumberofPatentFamilies': 993,
        'Country': 'Canada',
        'Number of INPADOC patents': 'NA',
        'Active': '1882(b)-1961(d)',
        'Mainfieldsofinvention': 'Automotive, Stainless steel products',
    },
    {
        'Inventor': 'John F. O\'Connor',
        'NumberofPatentFamilies': 949,
        'Country': 'USA',
        'Number of INPADOC patents': 'NA',
        'Active': '1864(b)-1938(d)',
        'Mainfieldsofinvention': 'Railway draft gearing',
    },
    {
        'Inventor': 'Melvin De Groote',
        'NumberofPatentFamilies': 925,
        'Country': 'USA',
        'Number of INPADOC patents': 'NA',
        'Active': '1895(b)-1963(d)',
        'Mainfieldsofinvention': 'Chemical de-emulsifiers',
    },
    {
        'Inventor': 'Jay S. Walker',
        'NumberofPatentFamilies': 918,
        'Country': 'USA',
        'Number of INPADOC patents': 2206,
        'Active': '1998-2016',
        'Mainfieldsofinvention': 'Gaming machines',
    },
    {
        'Inventor': 'Edward K. Y. Jung',
        'NumberofPatentFamilies': 911,
        'Country': 'USA',
        'Number of INPADOC patents': 2254,
        'Active': '1996-2016',
        'Mainfieldsofinvention': 'Various',
    },
    {
        'Inventor': 'Francis H. Richards',
        'NumberofPatentFamilies': 894,
        'Country': 'USA',
        'Number of INPADOC patents': 'NA',
        'Active': '1850(b)-19??(d)',
        'Mainfieldsofinvention': 'Mechanical, automation',
    },
    {
        'Inventor': 'Kangguo Cheng',
        'NumberofPatentFamilies': 884,
        'Country': 'USA',
        'Number of INPADOC patents': 1314,
        'Active': '2004-2016',
        'Mainfieldsofinvention': 'Semiconductor device fabrication, Semiconductor memory, Semiconductor device',
    }
];
Copied to clipboard
import { ColumnDirective, ColumnsDirective, GridComponent, TextWrapSettingsModel } from '@syncfusion/ej2-react-grids';
import { Inject, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { inventoryData } from './datasource';

export default class App extends React.Component<{}, {}>{
  public settings: TextWrapSettingsModel  = { wrapMode: 'Content' };
  public render() {
  return (<div>
  <GridComponent dataSource={inventoryData} allowPaging={true} allowTextWrap={true}
      textWrapSettings={this.settings} height='400'>
      <ColumnsDirective>
          <ColumnDirective field='Inventor' headerText='Inventor' width='180' textAlign='Right'/>
          <ColumnDirective field='NumberofPatentFamilies' headerText='Number of Patent Families' width='180' textAlign='Right'/>
          <ColumnDirective field='Country' headerText='Country' width="140" />
          <ColumnDirective field='Active' headerText='Active' width='120' />
          <ColumnDirective field='Mainfieldsofinvention' headerText='Main Fields of Invention' width='200'/>
      </ColumnsDirective>
      <Inject services={[Page]} />
  </GridComponent>
  </div>)
  }
};
Copied to clipboard
export const inventoryData: Object[] = [
    {
        'Inventor': 'Kia Silverbrook',
        'NumberofPatentFamilies': 4737,
        'Country': 'Australia',
        'Number of INPADOC patents': 9839,
        'Active': '1994-2016',
        'Mainfieldsofinvention': 'Printing, Digital paper, Internet, Electronics,Lab-on-a-chip, MEMS, Mechanical, VLSI',

    },
    {
        'Inventor': 'Shunpei Yamazaki',
        'NumberofPatentFamilies': 4677,
        'Country': 'Japan',
        'Number of INPADOC patents': '10000+',
        'Active': '1976-2016',
        'Mainfieldsofinvention': 'Thin film transistors, Liquid crystal displays, Solar cells, Flash memory, OLED',

    },
    {
        'Inventor': 'Lowell L. Wood, Jr.',
        'NumberofPatentFamilies': 1419,
        'Country': 'USA',
        'Number of INPADOC patents': 1332,
        'Active': '1977-2016',
        'Mainfieldsofinvention': 'Mosquito laser, Nuclear weapons',

    },
    {
        'Inventor': 'Paul Lapstun',
        'NumberofPatentFamilies': 1281,
        'Country': 'Australia',
        'Number of INPADOC patents': 3099,
        'Active': '2000-2016',
        'Mainfieldsofinvention': 'Printing, Digital paper, Internet, Electronics, CGI, VLSI',

    },
    {
        'Inventor': 'Gurtej Sandhu',
        'NumberofPatentFamilies': 1255,
        'Country': 'India',
        'Number of INPADOC patents': 2038,
        'Active': '1991-2016',
        'Mainfieldsofinvention': 'Thin film processes and materials, VLSI, Semiconductor device fabrication',

    },
    {
        'Inventor': 'Jun Koyama',
        'NumberofPatentFamilies': 1240,
        'Country': 'Japan',
        'Number of INPADOC patents': 4126,
        'Active': '1991-2016',
        'Mainfieldsofinvention': 'Thin film transistors, Liquid crystal displays, OLED',

    },
    {
        'Inventor': 'Roderick A. Hyde',
        'NumberofPatentFamilies': 1240,
        'Country': 'USA',
        'Number of INPADOC patents': 3360,
        'Active': '2001-2016',
        'Mainfieldsofinvention': 'Various',

    },
    {
        'Inventor': 'Leonard Forbes',
        'NumberofPatentFamilies': 1093,
        'Country': 'Canada',
        'Number of INPADOC patents': 1398,
        'Active': '1991-2016',
        'Mainfieldsofinvention': 'Semiconductor Memories, CCDs, Thin film processes and materials, VLSI',

    },
    {
        'Inventor': 'Thomas Edison',
        'NumberofPatentFamilies': 1084,
        'Country': 'USA',
        'Number of INPADOC patents': 2332,
        'Active': '1847(b)-1931(d)',
        'Mainfieldsofinvention': 'Electric power, Lighting, Batteries, Phonograph, Cement, Telegraphy, Mining',

    },
    {
        'Inventor': 'Donald E. Weder',
        'NumberofPatentFamilies': 999,
        'Country': 'USA',
        'Number of INPADOC patents': 1993,
        'Active': '1976-2015',
        'Mainfieldsofinvention': 'Florist supplies',

    },
    {
        'Inventor': 'George Albert Lyon',
        'NumberofPatentFamilies': 993,
        'Country': 'Canada',
        'Number of INPADOC patents': 'NA',
        'Active': '1882(b)-1961(d)',
        'Mainfieldsofinvention': 'Automotive, Stainless steel products',

    },
    {
        'Inventor': 'John F. O\'Connor',
        'NumberofPatentFamilies': 949,
        'Country': 'USA',
        'Number of INPADOC patents': 'NA',
        'Active': '1864(b)-1938(d)',
        'Mainfieldsofinvention': 'Railway draft gearing',

    },
    {
        'Inventor': 'Melvin De Groote',
        'NumberofPatentFamilies': 925,
        'Country': 'USA',
        'Number of INPADOC patents': 'NA',
        'Active': '1895(b)-1963(d)',
        'Mainfieldsofinvention': 'Chemical de-emulsifiers',

    },
    {
        'Inventor': 'Jay S. Walker',
        'NumberofPatentFamilies': 918,
        'Country': 'USA',
        'Number of INPADOC patents': 2206,
        'Active': '1998-2016',
        'Mainfieldsofinvention': 'Gaming machines',

    },
    {
        'Inventor': 'Edward K. Y. Jung',
        'NumberofPatentFamilies': 911,
        'Country': 'USA',
        'Number of INPADOC patents': 2254,
        'Active': '1996-2016',
        'Mainfieldsofinvention': 'Various',

    },
    {
        'Inventor': 'Francis H. Richards',
        'NumberofPatentFamilies': 894,
        'Country': 'USA',
        'Number of INPADOC patents': 'NA',
        'Active': '1850(b)-19??(d)',
        'Mainfieldsofinvention': 'Mechanical, automation',

    },
    {
        'Inventor': 'Kangguo Cheng',
        'NumberofPatentFamilies': 884,
        'Country': 'USA',
        'Number of INPADOC patents': 1314,
        'Active': '2004-2016',
        'Mainfieldsofinvention': 'Semiconductor device fabrication, Semiconductor memory, Semiconductor device',

    }
];