JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Adaptive View in JavaScript (ES5) TreeGrid control

24 May 2022 / 2 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.

Source
Preview
index.js
index.html
Copied to clipboard
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');
Copied to clipboard
<!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 example JavaScript Tree Grid example to learn how to present and manipulate data.

Previous
Next