Search results

Clip Mode in React Grid component

18 May 2022 / 1 minute to read

The clip mode provides options to display its overflow cell content and it can be defined by the columns.clipMode property.

There are three types of clipMode. They are:

  • Clip: Truncates the cell content when it overflows its area.
  • Ellipsis: Displays ellipsis when the cell content overflows its area.
  • EllipsisWithTooltip: Displays ellipsis when the cell content overflows its area, also it will display the tooltip while hover on ellipsis is applied.
Source
Preview
App.jsx
datasource.jsx
App.tsx
datasource.tsx
Copied to clipboard
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { inventoryData } from './datasource';
export default class App extends React.Component {
    render() {
        return (<div>
<GridComponent dataSource={inventoryData} allowPaging={true}>
    <ColumnsDirective>
        <ColumnDirective field='Inventor' headerText='Name of the Inventor' clipMode='Clip' width="80"/>
        <ColumnDirective field='NumberofPatentFamilies' headerText='Number of Patent Families' clipMode='Ellipsis' width="100"/>
        <ColumnDirective field='Country' headerText='Country' width="80"/>
        <ColumnDirective field='Active' headerText='Active' width="100"/>
        <ColumnDirective field='Mainfieldsofinvention' headerText='Main Fields of Invention' clipMode='EllipsisWithTooltip' width="100"/>
    </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, Inject, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { inventoryData } from './datasource';

export default class App extends React.Component<{}, {}>{
  public render() {
return (<div>
<GridComponent dataSource={inventoryData} allowPaging={true}>
    <ColumnsDirective>
        <ColumnDirective field='Inventor' headerText='Name of the Inventor' clipMode='Clip' width="80"/>
        <ColumnDirective field='NumberofPatentFamilies' headerText='Number of Patent Families' clipMode='Ellipsis' width="100"/>
        <ColumnDirective field='Country' headerText='Country' width="80" />
        <ColumnDirective field='Active' headerText='Active' width="100" />
        <ColumnDirective field='Mainfieldsofinvention' headerText='Main Fields of Invention' clipMode='EllipsisWithTooltip' width="100"/>
    </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',

    }
];

By default, columns.clipMode value is Ellipsis.