Search results

ClipMode API in React Grid API component

Defines the cell content’s overflow mode. The available modes 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 tooltip while hover on ellipsis applied cell.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { inventoryData } from './datasource';

export default class App extends React.Component<{}, {}>{
  public render() {
    return (
    <GridComponent dataSource={inventoryData}>
        <ColumnsDirective>
            <ColumnDirective field='Inventor' headerText='Name of the Inventor' clipMode='Clip' />
            <ColumnDirective field='NumberofPatentFamilies' headerText='Number of Patent Families' clipMode='Ellipsis' />
        </ColumnsDirective>
    </GridComponent> 
    ) } };