The scrollbar will be displayed in the treegrid when content exceeds the element width
or height
. The vertical and horizontal scrollbars will be displayed based on the following criteria:
height
and width
are used to set the treegrid height and width, respectively.To specify the width
and height
of the scroller in the pixel, set the pixel value to a number.
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='315' width='400'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='120' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='110' 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 { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
height='315' width='400'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='120' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='110' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;
Specify the width
and height
as 100% to make the treegrid element fill its parent container.
Setting the height
to 100% requires the treegrid parent element to have explicit height.
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='100%' width='100%'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='120' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='110' 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 { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
height='100%' width='100%'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='120' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='110' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;
You can scroll the treegrid content to the selected row position by using the rowSelected
event.
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
function App() {
let treegrid;
let numeric;
const onChange = () => {
if (treegrid && numeric) {
treegrid.selectRow(parseInt(numeric.getText(), 10));
}
};
const rowSelected = (args) => {
if (treegrid) {
const rowHeight = treegrid.getRows()[treegrid.getSelectedRowIndexes()[0]].scrollHeight;
treegrid.getContent().children[0].scrollTop = rowHeight * treegrid.getSelectedRowIndexes()[0];
}
};
return (<div>
<NumericTextBoxComponent format={'N'} placeholder={'Enter index to select a row'} width={200} showSpinButton={false} min={0} change={onChange} ref={numeric}/>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270' width='100%' rowSelected={rowSelected} ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='160'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent></div>);
}
;
export default App;
import { RowSelectEventArgs } from '@syncfusion/ej2-grids';
import { NumericTextBox, NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
let numeric: NumericTextBox | null;
const onChange = () => {
if (treegrid && numeric) {
treegrid.selectRow(parseInt(numeric.getText(), 10));
}
}
const rowSelected = (args: RowSelectEventArgs) => {
if (treegrid) {
const rowHeight: number = treegrid.getRows()[treegrid.getSelectedRowIndexes()[0]].scrollHeight;
treegrid.getContent().children[0].scrollTop = rowHeight * treegrid.getSelectedRowIndexes()[0];
}
}
return (<div>
<NumericTextBoxComponent format={'N'} placeholder={'Enter index to select a row'} width={200}
showSpinButton={false} min={0} change={onChange} ref={numeric}/>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
height='270' width='100%' rowSelected={rowSelected} ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='160'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent></div>)
};
export default App;