Adaptive in EJ2 TypeScript Treegrid control
27 Apr 202310 minutes to read
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.
import { TreeGrid, Filter, Sort, Edit, Toolbar, Page } from '@syncfusion/ej2-treegrid';
import { Browser } from '@syncfusion/ej2-base';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(Filter, Sort, Edit, Toolbar, Page);
let treegrid: TreeGrid = new 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="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
/* The device with borders */
.e-mobile-layout {
position: relative;
width: 360px;
height: 640px;
margin: auto;
border: 16px #f4f4f4 solid;
border-top-width: 60px;
border-bottom-width: 60px;
border-radius: 36px;
box-shadow: 0 0px 2px rgb(144 144 144), 0 0px 10px rgb(0 0 0 / 16%);
}
/* The horizontal line on the top of the device */
.e-mobile-layout:before {
content: '';
display: block;
width: 60px;
height: 5px;
position: absolute;
top: -30px;
left: 50%;
transform: translate(-50%, -50%);
background: #ebebeb;
border-radius: 10px;
}
/* The circle on the bottom of the device */
.e-mobile-layout:after {
content: '';
display: block;
width: 35px;
height: 35px;
position: absolute;
left: 50%;
bottom: -65px;
transform: translate(-50%, -50%);
background: #e8e8e8;
border-radius: 50%;
}
/* The screen (or content) of the device */
.e-mobile-layout .e-mobile-content {
overflow-x: hidden;
height: 100%;
background: white;
border: 0px solid #dddddd;
}
.highcontrast .e-mobile-layout {
border: 16px #000000 solid;
border-top-width: 60px;
border-bottom-width: 60px;
box-shadow: -1px 2px white, -2px -2px white, 2px -2px white, 2px 1px white;
}
.e-responsive-dialog {
box-shadow: none;
border: 1px solid #dddddd;
}
/* Render the mobile pager by default */
@media (max-width: 3840px) {
.e-adaptive-demo .e-pager {
padding: 13px 0;
}
.e-adaptive-demo .e-pager div.e-parentmsgbar {
box-sizing: border-box;
display: inline-block;
float: initial;
padding-bottom: 0;
padding-right: 0;
padding-top: 0;
text-align: center;
vertical-align: top;
width: calc(60% - 48px);
}
.e-adaptive-demo .e-pager .e-pagesizes {
display: none;
}
.e-adaptive-demo .e-pager .e-pagecountmsg {
display: none;
}
.e-adaptive-demo .e-pager .e-pagercontainer {
display: none;
}
.e-adaptive-demo .e-pager .e-icons {
font-size: 11px;
}
.e-adaptive-demo .e-pager .e-mfirst,
.e-adaptive-demo .e-pager .e-mprev,
.e-adaptive-demo .e-pager .e-mnext,
.e-adaptive-demo .e-pager .e-mlast {
border: 0;
box-sizing: border-box;
display: inline-block;
padding: 1% 5%;
}
.e-adaptive-demo .e-pager .e-mfirst {
margin-right: 4px;
text-align: right;
width: calc(10% + 11px);
}
.e-adaptive-demo .e-pager .e-mprev {
margin: 0 4px;
text-align: right;
width: 10%;
}
.e-adaptive-demo .e-pager .e-mnext {
margin: 0 4px;
text-align: left;
width: 10%;
}
.e-adaptive-demo .e-pager .e-mlast {
margin-left: 4px;
text-align: left;
width: calc(10% + 11px);
}
.e-adaptive-demo .e-bigger .e-pager,
.e-adaptive-demo .e-pager.e-bigger {
padding: 19px 0;
}
.e-adaptive-demo .e-bigger .e-pager.e-rtl div.e-parentmsgbar,
.e-adaptive-demo .e-pager.e-bigger.e-rtl div.e-parentmsgbar {
margin-right: 0;
}
.e-adaptive-demo .e-bigger .e-pager div.e-parentmsgbar,
.e-adaptive-demo .e-pager.e-bigger div.e-parentmsgbar {
padding: 0;
}
}
.e-dlg-target.e-scroll-disabled {
overflow: auto !important;
}
</style>
<body>
<div id='loader'>Loading....</div>
<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>
</div>
</body>
</html>Please refer to our
JavaScript Tree Gridfeature tour page for its groundbreaking feature representations. You can also explore our JavaScript Tree Grid exampleJavaScript Tree Grid exampleto learn how to present and manipulate data.