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.
var treeGridObj = new ej.treegrid.TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
height: '315',
width: '400',
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date',format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 110, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Grid Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-treegrid/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="TreeGrid"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
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.
var treeGridObj = new ej.treegrid.TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
height: '100%',
width: '100%',
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date',format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 110, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Grid Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-treegrid/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<style>
.e-resizable {
resize: both;
overflow: auto;
border: 1px solid red;
padding: 10px;
height: 300px;
min-height: 250px;
min-width: 250px;
}
.e-text{
font-family: Helvetica, sans-serif;
font-size: 14px;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<p class="e-text"> The parent container can be resizable by dragging the bottom-right corner.</p>
<div id="container" class="e-resizable">
<div id="TreeGrid" style="height:100%"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
You can scroll the treegrid content to the selected row position by using the rowSelected
event.
var treeGridObj = new ej.treegrid.TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
height: '270',
width: '100%',
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date',format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 110, textAlign: 'Right' }
],
rowSelected: rowSelected
});
treeGridObj.appendTo('#TreeGrid');
var numeric = new ej.inputs.NumericTextBox({
width: 200,
min: 0,
showSpinButton: false,
format: 'N',
placeholder: 'Enter index to select a row',
change: onchange
}, '#numeric');
function onchange(){
treeGridObj.selectRow(parseInt(numeric.getText(), 10));
}
function rowSelected(args) {
var rowHeight = treeGridObj.getRows()[treeGridObj.getSelectedRowIndexes()[0]].scrollHeight;
treeGridObj.getContent().children[0].scrollTop = rowHeight * treeGridObj.getSelectedRowIndexes()[0];
}
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Grid Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-treegrid/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<input id="numeric" type="text">
<div id="TreeGrid"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Frozen rows and columns provides an option to make rows and columns always visible in the top and left side of the treegrid while scrolling.
To use frozen rows and columns support, inject the Freeze
module in the treegrid.
In this demo, the frozenColumns
is set as ‘2’ and the frozenRows
is set as ‘3’. Hence, the left two columns and top three rows are frozen.
ej.treegrid.TreeGrid.Inject(ej.treegrid.Freeze);
var treegrid = new ej.treegrid.TreeGrid({
dataSource: sampleData,
height: 317,
allowSelection: false,
frozenRows: 3,
frozenColumns: 2,
treeColumnIndex: 1,
childMapping: 'subtasks',
columns: [
{ field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 100 },
{ field: 'taskName', headerText: 'Task Name', width: 230 },
{ field: 'startDate', headerText: 'Start Date', width: 120, textAlign: 'Right',
type: 'date', format: { type: 'dateTime', format: 'dd/MM/yyyy' } },
{ field: 'endDate', headerText: 'End Date', width: 120, textAlign: 'Right',
type: 'date', format: { type: 'dateTime', format: 'dd/MM/yyyy' } },
{ field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 110 },
{ field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 120 },
{ field: 'priority', headerText: 'Priority', textAlign: 'Left', width: 120 },
{ field: 'approved', headerText: 'Approved', width: 110, textAlign: 'Left' }
]
});
treegrid.appendTo('#TreeGrid');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 TreeGrid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript TreeGrid Control">
<meta name="author" content="Syncfusion">
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-treegrid/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="TreeGrid"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
You can use isFrozen
property to freeze selected columns in treegrid.
In this demo, the columns with field name taskName
and startDate
is frozen using
the isFrozen
property.
ej.treegrid.TreeGrid.Inject(ej.treegrid.Freeze);
var treegrid = new ej.treegrid.TreeGrid({
dataSource: sampleData,
height: 317,
allowSelection: false,
childMapping: 'subtasks',
columns: [
{ field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },
{ field: 'taskName', headerText: 'Task Name', width: 230, isFrozen: true },
{ field: 'startDate', headerText: 'Start Date', isFrozen: true, width: 120, textAlign: 'Right',
type: 'date', format: { type: 'dateTime', format: 'dd/MM/yyyy' } },
{ field: 'endDate', headerText: 'End Date', width: 150, textAlign: 'Right',
type: 'date', format: { type: 'dateTime', format: 'dd/MM/yyyy' } },
{ field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 110 },
{ field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 120 },
{ field: 'priority', headerText: 'Priority', textAlign: 'Left', width: 120 },
{ field: 'approved', headerText: 'Approved', width: 110, textAlign: 'Left' }
]
});
treegrid.appendTo('#TreeGrid');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 TreeGrid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript TreeGrid Control">
<meta name="author" content="Syncfusion">
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-treegrid/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="TreeGrid"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
The following features are not supported in frozen rows and columns: