The Tree Grid user interface (UI) was redesigned to provide an optimal viewing experience and improve usability on small screens. This interface will render the filter, edit dialog and other features adaptively. For example, Filtering opens the UI for user in a pop-up occupying the entire screen.
To make the tree grid adaptive, set the enableAdaptiveUI
to true.
ej.treegrid.TreeGrid.Inject(ej.treegrid.Page, ej.treegrid.Edit, ej.treegrid.Sort, ej.treegrid.Filter, ej.treegrid.Toolbar);
var treegrid = new ej.treegrid.TreeGrid({
dataSource: sampleData,
enableAdaptiveUI: true,
allowPaging: true,
allowSorting: true,
childMapping: 'subtasks',
treeColumnIndex: 1,
allowFiltering: true,
filterSettings: { type: 'Excel' },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'],
editSettings: { allowAdding: true, allowEditing: true, allowDeleting: true, mode: 'Dialog' },
height: '100%',
load: () => {
treegrid.grid.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0] as HTMLElement;
},
columns: [
{ field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, width: 135, validationRules: { required: true, number: true } },
{ field: 'taskName', headerText: 'Task Name', width: 280, editType: "dropdownedit", validationRules: { required: true } },
{ field: 'duration', headerText: 'Duration', filter: { type : 'Menu' }, width: 140, validationRules: { required: true } },
{ field: 'progress', headerText: 'Progress', width: 145 , validationRules: { required: true } },
]
});
treegrid.appendTo('#adaptivebrowser');
<!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/20.1.57/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-treegrid/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.1.57/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container" class="e-adaptive-demo e-bigger">
<div class="col-lg-9 control-section">
<div class="content-wrapper e-bigger e-adaptive-demo">
<div class="e-mobile-layout">
<div class="e-mobile-content">
<div id="adaptivebrowser"></div>
</div>
</div>
<div id="adaptivedevice"></div>
</div>
</div>
</div>
<br>
<div class="datalink">Source:
<a href="https://en.wikipedia.org/wiki/List_of_Android_smartphones" target="_blank">Wikipedia: List of Android smartphones</a>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Please refer to our
JavaScript Tree Grid
feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Tree Grid exampleJavaScript Tree Grid example
to learn how to present and manipulate data.