Clip Mode in React TreeGrid component

02 Feb 2023 / 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

App.tsx

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { complexData } from './datasource';
function App() {
    return <TreeGridComponent dataSource={complexData} treeColumnIndex={1} childMapping='subtasks' height='300' gridLines='Both'>
    <ColumnsDirective>
      <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
      <ColumnDirective field='taskName' headerText='Task Name' width='70' clipMode='Clip'/>
      <ColumnDirective field='assignee.firstName' headerText='Assignee' width='30' textAlign='Right' clipMode='Ellipsis'/>
      <ColumnDirective field='priority' headerText='Priority' width='30' textAlign='Right' clipMode='EllipsisWithTooltip'/>
      <ColumnDirective field='duration' headerText='Duration' width='30' textAlign='Right'/>
    </ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { complexData } from './datasource';

function App() {
return <TreeGridComponent dataSource={complexData} treeColumnIndex={1} childMapping='subtasks' height='300' gridLines='Both'>
    <ColumnsDirective>
      <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
      <ColumnDirective field='taskName' headerText='Task Name' width='70' clipMode='Clip'/>
      <ColumnDirective field='assignee.firstName' headerText='Assignee' width='30' textAlign='Right' clipMode='Ellipsis' />
      <ColumnDirective field='priority' headerText='Priority' width='30' textAlign='Right' clipMode='EllipsisWithTooltip' />
      <ColumnDirective field='duration' headerText='Duration' width='30' textAlign='Right' />
    </ColumnsDirective>
</TreeGridComponent>
};
export default App;

By default, columns.clipMode value is Ellipsis.