You can add/delete the data source records through an external button. To reflect the data source changes in the grid, invoke the refresh method.
To refresh the data source:
Step 1:
Add/delete the data source record by using the following code.
grid.dataSource.unshift(data); // add a new record.
grid.dataSource.splice(selectedRow, 1); // delete a record.Step 2:
Refresh the grid after the data source change by using the refresh method.
grid.refresh(); // refresh the Grid.var grid = new ej.grids.Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
{ field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C2' },
{ field: 'OrderDate', headerText: 'Order Date', textAlign: 'Right', width: 140, format: 'yMd' }
],
height: 280
});
grid.appendTo('#Grid');
var add = new ej.buttons.Button({}, '#add');
var dele = new ej.buttons.Button({}, '#delete');
document.getElementById('add').onclick = function(){
var data = { OrderID: 10247, CustomerID: "ASDFG", Freight: 40.4, OrderDate: new Date(8367642e5) };
(grid.dataSource).unshift(data); // add new record.
grid.refresh(); // refresh the Grid.
};
document.getElementById('delete').onclick = function() {
if (grid.getSelectedRowIndexes().length) {
var selectedRow = grid.getSelectedRowIndexes()[0];
(grid.dataSource).splice(selectedRow, 1); // delete the selected record.
} else {
alert("No records selected for delete operation");
}
grid.refresh(); // refresh the Grid.
};#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<button class="e-flat" id="add">Add</button>
<button class="e-flat" id="delete">Delete</button>
<div id="Grid"></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 create your own ToolBar items in the Grid. It can be added by defining the toolbar as HTML element ID. Actions for this ToolBar template items are defined in the toolbarClick.
To include components in the ToolBar, please ensure the following steps:
Step 1:
Initialize the template for your custom component. Using the following code add the DropDownList component to the ToolBar.
<div id='toolbar-template'>
<div id='dropdown' style="margin-top:5px">
<input type="text" tabindex="1" id='ddlelement' />
</div>
</div>Step 2:
To render the DropDownList component, use the dataBound event of the Grid.
var rowIndex = [0, 1, 2, 3, 4, 5, 6, 8, 9, 10, 11, 12, 13, 14];
ej.grids.Grid.Inject(ej.grids.Toolbar);
var grid = new ej.grids.Grid({
dataSource: data,
toolbarTemplate: '#toolbar-template',
dataBound: dataBound,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
{ field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C2' },
{ field: 'OrderDate', headerText: 'Order Date', textAlign: 'Right', width: 140, format: 'yMd' }
],
height: 200
});
grid.appendTo('#Grid');
function dataBound() {
var dropDownListObject = new ej.dropdowns.DropDownList({
// set the data to dataSource property
dataSource: rowIndex,
change: change,
popupHeight :200
});
dropDownListObject.appendTo('#ddlelement');
}
function change(args) {
grid.selectRow(args.itemData);
}#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-refresh::before {
content: '\e898';
}<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="toolbar-template">
<div id="dropdown" style="margin-top:5px">
<input type="text" tabindex="1" id="ddlelement">
</div>
</div>
<div id="Grid"></div>
</div>
<style>
.orientationcss .e-headercelldiv {
transform: rotate(90deg);
}
</style>
<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 enable/disable the Grid and its actions by applying/removing corresponding CSS styles.
To enable/disable the grid and its actions, follow the given steps:
Step 1:
Create CSS class with custom style to override the default style of Grid.
.disablegrid {
pointer-events: none;
opacity: 0.4;
}
.wrapper {
cursor: not-allowed;
}Step 2:
Add/Remove the CSS class to the Grid in the click event handler of Button.
document.getElementById('primarybtn').addEventListener('click', () => {
if (grid.element.classList.contains('disablegrid')) {
grid.element.classList.remove('disablegrid');
document.getElementById("GridParent").classList.remove('wrapper');
}
else {
grid.element.classList.add('disablegrid');
document.getElementById("GridParent").classList.add('wrapper');
}
});In the below demo, the button click will enable/disable the Grid and its actions.
ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar);
var button = new ej.buttons.Button({}, '#primarybtn');
document.getElementById('primarybtn').onclick = function(){
var gridInst = document.getElementById("Grid").ej2_instances[0];
if (gridInst.element.classList.contains('disablegrid')) {
gridInst.element.classList.remove('disablegrid');
document.getElementById("GridParent").classList.remove('wrapper');
}
else {
gridInst.element.classList.add('disablegrid');
document.getElementById("GridParent").classList.add('wrapper');
}
};
var grid = new ej.grids.Grid({
dataSource: data,
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120, allowEditing: false },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit', width: 120, format: 'C2' },
{ field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150 }
],
height: 273
});
grid.appendTo('#Grid');<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<button id="primarybtn">Enable/Disable Grid</button>
<div id="GridParent">
<div id="Grid"></div>
</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 change the column headerText dynamically through an external button.
Follow the given steps to change the header text dynamically:
Step 1:
Get the column object corresponding to the field name by using the getColumnByField method.
Then, change the header text value.
let column = grid.getColumnByField("ShipCity"); // Get column object.
column.headerText = 'Changed Text';Step 2:
To reflect the changes in the grid header, invoke the refreshHeader method.
grid.refreshHeader();var grid = new ej.grids.Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'ShipCity', headerText: 'Ship City', width: 120 },
{ field: 'ShipName', headerText: 'Ship Name', width: 100 }
],
height: 280
});
grid.appendTo('#Grid');
var btn = new ej.buttons.Button({ cssClass: 'e-flat' }, '#change-text');
document.getElementById('change-text').addEventListener('click', () => { // changing the header text for ShipCity column.
var column = grid.getColumnByField("ShipCity"); // get the JSON object of the column corresponding to the field name.
column.headerText = "Changed Text"; // assign a new header text to the column.
grid.refreshHeader();
});#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<button id="change-text"> Change Header Text</button>
<div id="Grid"></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 customise the appearance of the header and content of a particular column using the customAttributes property.
To customize the grid column, follow the given steps:
Step 1:
Create a CSS class with custom style to override the default style for rowcell and headercell.
.e-grid .e-rowcell.customcss{
background-color: #ecedee;
color: 'red';
font-family: 'Bell MT';
font-size: 20px;
}
.e-grid .e-headercell.customcss{
background-color: #2382c3;
color: white;
font-family: 'Bell MT';
font-size: 20px;
}Step 2:
Add the custom CSS class to the specified column by using the customAttributes property.
{ field: 'ShipCity', headerText: 'Ship City', customAttributes: {class: 'customcss'}, width: 100 },var grid = new ej.grids.Grid({
dataSource: data,
enableHover: false,
allowSelection: false,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'ShipCity', headerText: 'Ship City', customAttributes: { class: 'customcss' }, width: 100 },
{ field: 'ShipName', headerText: 'Ship Name', width: 100 }
],
height: 315
});
grid.appendTo('#Grid');#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-grid .e-rowcell.customcss{
background-color: #ecedee;
font-family: 'Bell MT';
color: red;
font-size: 20px;
}
.e-grid .e-headercell.customcss{
background-color: #2382c3;
color: white;
font-family: 'Bell MT';
font-size: 20px;
}To display custom ToolTip (EJ2 Tooltip), use the
queryCellInfo event.
Render the ToolTip component for the grid cells by using the following code in the queryCellInfo event.
function tooltip (args: QueryCellInfoEventArgs) {
let tooltip: Tooltip = new Tooltip({
content: args.data[args.column.field].toString();
}, args.cell);
}var tooltip = new ej.popups.Tooltip({
target: ".e-rowcell", // set the target element to show the tooltip on hovering it
beforeRender: beforeRender
}, "#Tooltip");
var grid= new ej.grids.Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'ShipName', headerText: 'Ship Name', width: 140 },
{ field: 'ShipCity', headerText: 'Ship City', width: 100 },
],
height: 315
});
grid.appendTo('#Grid');
function beforeRender(args) {
// event triggered before render the tooltip on target element.
tooltip.content = args.target.closest("td").innerText;
}<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Tooltip">
<div id="Grid"></div>
</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 render any component in a grid column using the template property.
To render other components in the grid, ensure the following steps:
Step 1:
Initialize the column template for your custom component.
template:`<div>
<select class="e-control e-dropdownlist">
<option value="1" selected="selected">Order Placed</option>
<option value="2">Processing</option>
<option value="3">Delivered</option>
</select>
</div>`Step 2:
Using the queryCellInfo event, you can render the DropDown component with the following code.
function dropdown(args: QueryCellInfoEventArgs) {
let ele=args.cell.querySelector('select');
let drop = new DropDownList({popupHeight: 150, popupWidth: 150});
drop.appendTo(ele);
}var grid = new ej.grids.Grid({
dataSource: data,
columns: [
{
headerText: 'Order Status',
template:
`<div>
<select class="e-control e-dropdownlist">
<option value="1" selected="selected">Order Placed</option>
<option value="2">Processing</option>
<option value="3">Delivered</option>
</select>
</div>`, width: 140
},
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'OrderDate', headerText: 'Order Date', width: 100, format: 'yMd' },
{ field: 'ShipCity', headerText: 'Ship City', width: 100 },
],
height: 315,
queryCellInfo: dropdown
});
grid.appendTo('#Grid');
function dropdown(args) {
var ele = args.cell.querySelector('select');
var drop = new ej.dropdowns.DropDownList({ popupHeight: 150, popupWidth: 150 });
drop.appendTo(ele);
}<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Grid"></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 change the orientation of the header text by using the customAttributes property.
Ensure the following steps:
Step 1:
Create a CSS class with orientation style for the grid header cell.
.orientationcss .e-headercelldiv {
transform: rotate(90deg);
}Step 2:
Add the custom CSS class to a particular column by using the customAttributes property.
{ field: 'ShipCity', headerText: 'Ship City', textAlign: 'Center', customAttributes: {class: 'orientationcss'}, width: 80 },Step 3:
Resize the header cell height by using the following code.
function setHeaderHeight(args) {
let textWidth: number = document.querySelector(".orientationcss > div").scrollWidth;//Obtain the width of the headerText content.
let headerCell: NodeList = document.querySelectorAll(".e-headercell");
for(let i: number = 0; i < headerCell.length; i++) {
(<HTMLElement>headerCell.item(i)).style.height = textWidth + 'px'; //Assign the obtained textWidth as the height of the headerCell.
}
}let grid: Grid = new Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'ShipCity', headerText: 'Ship City', textAlign: 'Center', customAttributes: { class: 'orientationcss' }, width: 80 },
{ field: 'ShipName', headerText: 'Ship Name', width: 100 }
],
created: setHeaderHeight,
height: 240
});
grid.appendTo('#Grid');
function setHeaderHeight(args) {
var textWidth = document.querySelector(".orientationcss > div").scrollWidth; // obtain the width of the headerText content.
var headerCell = document.querySelectorAll(".e-headercell");
for (var i = 0; i < headerCell.length; i++) {
(headerCell.item(i)).style.height = textWidth + 'px'; // assign the obtained textWidth as the height of the headerCell.
}
}#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.orientationcss .e-headercelldiv {
transform: rotate(90deg);
}You can customize the column menu icon by overriding the default grid class .e-icons.e-columnmenu with a custom property content as mentioned below.
.e-grid .e-columnheader .e-icons.e-columnmenu::before {
content: "\e941";
}In the below sample, grid is rendered with a customized column menu icon.
var grid= new ej.grids.Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 100 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'ShipName', headerText: 'Ship Name', width: 140 },
{ field: 'ShipCity', headerText: 'Ship City', width: 100 },
],
showColumnMenu: true,
height: 315
});
grid.appendTo('#Grid');<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<style>
.e-grid .e-columnheader .e-icons.e-columnmenu::before {
content: "\e941";
}
</style>
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Grid"></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 edit the template column value by defining the field for that particular column.
In the below demo, the ShipCountry column is rendered with the template.
ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar);
var grid = new ej.grids.Grid({
dataSource: data,
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit', width: 120, format: 'C2' },
{ field: 'ShipCountry', headerText: 'Ship Country', template: '#template', editType: 'dropdownedit', width: 150 }
],
height: 273
});
grid.appendTo('#Grid');<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<script id="template" type="text/x-template">
<a href="#">${ShipCountry}</a>
</script>
<div id="Grid"></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 customize the appearance of the edit dialog in the actionComplete event based on requestType as beginEdit or add.
In the following example, the dialog’s header text has been changed for editing and adding the records.
ej.grids.Grid.Inject(ej.grids.Toolbar, ej.grids.Edit);
ej.base.L10n.load({
'en-US': {
grid: {
SaveButton: 'Submit',
CancelButton: 'Discard'
}
}
});
var grid = new ej.grids.Grid({
dataSource: data,
toolbar: ['Add', 'Edit', 'Delete'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120, },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
],
height: 265,
actionComplete: function (args) {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
let dialog = args.dialog;
dialog.showCloseIcon = false;
dialog.height = 400;
// change the header of the dialog
dialog.header = args.requestType === 'beginEdit' ? 'Edit Record' : 'New Record';
}
}
});
grid.appendTo('#Grid');#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Grid"></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 show hidden columns or hide visible column’s editor in the dialog while editing the grid record using actionBegin and actionComplete events.
In the actionBegin event, based on requestType as beginEdit or add. We can show or hide the editor by using column.visible property.
In the actionComplete event, based on requestType as save. We can reset the properties back to the column state.
In the below example, we have rendered the grid columns CustomerID as hidden column and ShipCountry as visible column. In the edit mode, we have changed the CustomerID column to visible state and ShipCountry column to hidden state.
ej.grids.Grid.Inject(ej.grids.Toolbar, ej.grids.Edit);
var grid = new ej.grids.Grid({
dataSource: data,
toolbar: ['Add', 'Edit', 'Delete'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120, visible: false },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit', width: 120, format: 'C2' },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
],
height: 265,
actionBegin: function (args) {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
for (var i = 0; i < this.columns.length; i++) {
if (this.columns[i].field == "CustomerID") {
this.columns[i].visible = true;
}
else if (this.columns[i].field == "ShipCountry") {
this.columns[i].visible = false;
}
}
}
if (args.requestType === 'save') {
for (var i = 0; i < this.columns.length; i++) {
if (this.columns[i].field == "CustomerID") {
this.columns[i].visible = false;
}
else if (this.columns[i].field == "ShipCountry") {
this.columns[i].visible = true;
}
}
}
}
});
grid.appendTo('#Grid');<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-richtexteditor/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-notifications/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<style>
.e-row[aria-selected="true"] .e-customizedExpandcell {
background-color: #e0e0e0;
}
.e-grid.e-gridhover tr[role='row']:hover {
background-color: #eee;
}
.e-expand::before {
content: '\e5b8';
}
</style>
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Grid"></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 achieve the Cascading DropDownList with grid Editing by using the Cell Edit Template feature.
In the below demo, Cascading DropDownList is rendered for the ShipCountry and ShipState column.
var countryElem;
var countryObj;
var stateElem;
var stateObj;
var country = [
{ countryName: 'United States', countryId: '1' },
{ countryName: 'Australia', countryId: '2' }
];
var state = [
{ stateName: 'New York', countryId: '1', stateId: '101' },
{ stateName: 'Virginia ', countryId: '1', stateId: '102' },
{ stateName: 'Washington', countryId: '1', stateId: '103' },
{ stateName: 'Queensland', countryId: '2', stateId: '104' },
{ stateName: 'Tasmania ', countryId: '2', stateId: '105' },
{ stateName: 'Victoria', countryId: '2', stateId: '106' }
];
ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar);
var grid = new ej.grids.Grid({
dataSource: cascadeData,
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true, validationRules: { required: true } },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120, validationRules: { required: true, minLength: 3 } },
{
field: 'ShipCountry', headerText: 'Ship Country', width: 120, edit: {
create: function(){
countryElem = document.createElement('input');
return countryElem;
},
read: function(){
return countryObj.text;
},
destroy: function(){
countryObj.destroy();
},
write: function(){
countryObj = new ej.dropdowns.DropDownList({
dataSource: country,
fields: { value: 'countryId', text: 'countryName' },
change: function(){
stateObj.enabled = true;
var tempQuery = new ej.data.Query().where('countryId', 'equal', countryObj.value);
stateObj.query = tempQuery;
stateObj.text = null;
stateObj.dataBind();
},
placeholder: 'Select a country',
floatLabelType: 'Never'
});
countryObj.appendTo(countryElem);
}
}
},
{
field: 'ShipState', headerText: 'Ship State', width: 150, edit: {
create: function(){
stateElem = document.createElement('input');
return stateElem;
},
read: function(){
return stateObj.text;
},
destroy: function(){
stateObj.destroy();
},
write: function(){
stateObj = new ej.dropdowns.DropDownList({
dataSource: state,
fields: { value: 'stateId', text: 'stateName' },
enabled: false,
placeholder: 'Select a state',
floatLabelType: 'Never'
});
stateObj.appendTo(stateElem);
}
}
}
],
height: 273
});
grid.appendTo('#Grid');<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-richtexteditor/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-notifications/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<style>
.e-row[aria-selected="true"] .e-customizedExpandcell {
background-color: #e0e0e0;
}
.e-grid.e-gridhover tr[role='row']:hover {
background-color: #eee;
}
.e-expand::before {
content: '\e5b8';
}
</style>
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Grid"></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 provide data source to the DropDownList by using the columns.edit.params property.
While setting new data source using edit params, you must specify a new query property too for the dropdownlist as follows,
{
params: {
query: new Query(),
dataSource: country,
fields: { value: 'ShipCountry', text: 'ShipCountry' },
allowFiltering: true
}
}You can also enable filtering for the dropdownlist by passing the allowFiltering as true to the edit params.
In the below demo, DropDownList is rendered with custom Datasource for the ShipCountry column and enabled filtering to search dropdownlist items.
var country = [
{ ShipCountry: 'United States', countryId: '1' },
{ ShipCountry: 'Australia', countryId: '2' },
{ ShipCountry: 'India', countryId: '2' }
];
ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar);
var grid = new ej.grids.Grid({
dataSource: cascadeData,
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true, validationRules: { required: true } },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120, validationRules: { required: true, minLength: 3 } },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 120, editType: 'dropdownedit', edit: {
params: {
query: new ej.data.Query(),
dataSource: country,
fields: { value: 'ShipCountry', text: 'ShipCountry' },
allowFiltering: true
}
}
}
],
height: 273
});
grid.appendTo('#Grid');<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-richtexteditor/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-notifications/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<style>
.e-row[aria-selected="true"] .e-customizedExpandcell {
background-color: #e0e0e0;
}
.e-grid.e-gridhover tr[role='row']:hover {
background-color: #eee;
}
.e-expand::before {
content: '\e5b8';
}
</style>
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Grid"></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 access the component instance from the component element using the ej2_instances property.
In the below demo, you can access the Editor component instance while adding or editing actions on the actionComplete event.
ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar);
var grid = new ej.grids.Grid({
dataSource: data,
actionComplete: function(args) {
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
var tr = args.row;
var numericTextBox = tr.querySelector('.e-numerictextbox'); // numeric TextBox component element
if (numericTextBox) {
console.log('NumericTextBox instance: ', (numericTextBox).ej2_instances[0]); // numeric TextBox instance
}
var dropDownList = tr.querySelector('.e-dropdownlist'); // dropDownList component element
if (dropDownList) {
console.log('DropDownList instance: ', (dropDownList).ej2_instances[0]); // dropDownList instance
}
}
},
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit', width: 120, format: 'C2' },
{ field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150 }
],
height: 273
});
grid.appendTo('#Grid');<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-richtexteditor/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-notifications/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<style>
.e-row[aria-selected="true"] .e-customizedExpandcell {
background-color: #e0e0e0;
}
.e-grid.e-gridhover tr[role='row']:hover {
background-color: #eee;
}
.e-expand::before {
content: '\e5b8';
}
</style>
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Grid"></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>Wizard helps you to create intuitive step-by-step forms to fill. You can achieve the wizard-like editing by using the dialog template feature. It supports your own editing template by defining the editSettings.mode as Dialog and editSetting.template as SCRIPT element ID or HTML string which holds the template.
The following example demonstrates the wizard-like editing in the grid with obtrusive validation.
var countryData = ej.data.DataUtil.distinct(data, 'ShipCountry', true);
ej.grids.Grid.Inject(ej.grids.Toolbar, ej.grids.Edit);
var grid = new ej.grids.Grid({
dataSource: data,
toolbar: ['Add', 'Edit', 'Delete'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog', template: '#dialogtemplate' },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120, },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
],
height: 265,
actionComplete: (args) => {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
new ej.dropdowns.DropDownList({
value: args.rowData.ShipCountry,
popupHeight: '300px',
floatLabelType: 'Always',
dataSource: countryData,
fields: {text: 'ShipCountry', value: 'ShipCountry'},
placeholder: 'Ship Country'
},
args.form.elements.namedItem('ShipCountry'));
new ej.buttons.CheckBox({
label: 'Verified',
checked: args.rowData.Verified
},
args.form.elements.namedItem('Verified'));
// Set initail Focus
if (args.requestType === 'beginEdit') {
args.form.elements.namedItem('CustomerID').focus();
}
initializeWizard();
}
}
});
grid.appendTo('#Grid');
function initializeWizard() {
let currentTab = 0;
document.getElementById('nextBtn').onclick = function () {
if (validate()) {
if (this.innerHTML !== 'SUBMIT'){
currentTab++;
nextpre(currentTab);
} else {
grid.endEdit();
}
}
}
function validate(tab) {
let valid = true;
[].slice.call(document.getElementById('tab' + currentTab).querySelectorAll('[name]')).forEach(element => {
element.form.ej2_instances[0].validate(element.name);
if (element.getAttribute('aria-invalid') === 'true'){
valid = false;
}
});
if (!valid) {
return false;
}
return true;
}
document.getElementById('prevBtn').onclick = function () {
if (validate()) {
currentTab--;
nextpre(currentTab);
}
}
}
function nextpre(current) {
let tabs = [].slice.call(document.getElementsByClassName('tab'))
tabs.forEach(element => element.style.display = 'none');
tabs[current].style.display = '';
if(current) {
document.getElementById('prevBtn').style.display = '';
document.getElementById('nextBtn').innerHTML = 'SUBMIT';
} else {
document.getElementById('prevBtn').style.display = 'none';
document.getElementById('nextBtn').innerHTML = 'NEXT';
}
}#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.form-group.col-md-6 {
width: 250px;
}
#ShipAddress{
resize: vertical;
}
.e-grid .e-edit-dialog {
min-height: 0;
}
.e-grid .e-dialog .e-footer-content {
display: none;
}<!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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Grid"></div>
</div>
<script id="dialogtemplate" type="text/x-template">
<div>
<div id="tab0" class='tab'>
<div class="form-row">
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper">
<input id="OrderID" required name="OrderID" type="text" value=${if(isAdd)} '' ${else} ${OrderID} ${/if} ${if(isAdd)} '' ${else} disabled ${/if} />
<span class="e-float-line"></span>
<label class="e-float-text e-label-top" for="OrderID">Order ID</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper">
<input id="CustomerID" required name="CustomerID" type="text" value=${if(isAdd)} '' ${else} ${CustomerID} ${/if} />
<span class="e-float-line"></span>
<label class="e-float-text e-label-top" for="CustomerID">Customer ID</label>
</div>
</div>
</div>
</div>
<div id=tab1 style="display: none" class='tab'>
<div class="form-row">
<div class="form-group col-md-6">
<input type="text" name="ShipCountry" id="ShipCountry" value=${if(isAdd)} '' ${else} ${ShipCountry} ${/if} />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input type="checkbox" name="Verified" id="Verified" ${if(Verified)} checked ${/if} />
</div>
</div>
</div>
<div id='footer'>
<button id="prevBtn" class="e-info e-btn" type="button" style="display: none; float: left">Previous</button>
<button id="nextBtn" class="e-info e-btn" type="button" style="float: right">Next</button>
</div>
</div>
</script>
<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 the tab component inside the dialog edit UI using the dialog template feature. The dialog template feature can be enabled by defining the editSettings.mode as Dialog and editSetting.template as SCRIPT element ID or HTML string which holds the template.
To include the tab components in the dialog, follow the given steps:
Step 1:
Initialize the template for your tab component.
<div>
<div id="edittab"></div>
<div id="tab1">
<div class="form-row" >
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper">
<input id="OrderID" name="OrderID" type="text" value=${if(isAdd)} '' ${else} ${OrderID} ${/if} ${if(isAdd)} '' ${else} disabled ${/if} />
<span class="e-float-line"></span>
<label class="e-float-text e-label-top" for="OrderID">Order ID</label>
</div>
</div>
</div>
<div class="form-row" >
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper">
<input id="CustomerID" name="CustomerID" type="text" value=${if(isAdd)} '' ${else} ${CustomerID} ${/if} />
<span class="e-float-line"></span>
<label class="e-float-text e-label-top" for="CustomerID">Customer ID</label>
</div>
</div>
</div>
<button id='next' class='e-info e-btn' style="float: right" type='button'> next</button>
</div>
<div id="tab2" style='display: none'>
<div class="form-row" >
<div class="form-group col-md-6">
<input type="text" name="ShipCountry" id="ShipCountry" value=${if(isAdd)} '' ${else} ${ShipCountry} ${/if} />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input type="checkbox" name="Verified" id="Verified" ${if(isAdd)} '' ${else} checked ${/if} />
</div>
</div>
<button id='submit' class='e-info e-btn' style="float: right" type='button'> submit</button>
</div>
</div>Step 2:
To render the tab component, use the actionComplete event of the grid.
let tabObj: Tab = new Tab({
showCloseButton: false,
selecting: (e) => {if(e.isSwiped) {e.cancel = true;} if(e.selectingIndex === 1) {e.cancel = !validate(1)}},
items: [
{ header: { 'text': 'Details' }, content: '#tab1' },
{ header: { 'text': 'Verify' }, content: '#tab2' },
]
});
tabObj.appendTo('#edittab');The following example demonstrates rendering the tab control inside the edit dialog. The tab control contains two tabs. You can fill the first tab and then navigate to the second tab. The validation for first tab will be done before navigating to the second tab.
var countryData = ej.data.DataUtil.distinct(data, 'ShipCountry', true);
ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar);
var grid = new ej.grids.Grid({
dataSource: data,
toolbar: ['Add', 'Edit', 'Delete'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog', template: 'dialogtemplate' },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120, },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
],
height: 265,
actionComplete: (args) => {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
new DropDownList({value: args.rowData.ShipCountry, popupHeight: '300px', floatLabelType: 'Always',
dataSource: countryData, fields: {text: 'ShipCountry', value: 'ShipCountry'}, placeholder: 'Ship Country'}, args.form.elements.namedItem('ShipCountry') as HTMLInputElement);
// Set initail Focus
if (args.requestType === 'beginEdit') {
(args.form.elements.namedItem('CustomerID')as HTMLInputElement).focus();
} else {
(args.form.elements.namedItem('OrderID') as HTMLInputElement).focus();
}
}
}
});
grid.appendTo('#Grid');#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.form-group.col-md-6 {
width: 250px;
}
#ShipAddress{
resize: vertical;
}
.e-grid .e-edit-dialog {
min-height: 0;
}
.e-grid .e-dialog .e-footer-content {
display: none;
}
.e-grid .e-tab .e-toolbar {
border: 0;
}
.e-tab .e-content.e-control {
overflow-x: hidden;
overflow-y: hidden;
}<!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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Grid"></div>
</div>
<script id="dialogtemplate" type="text/x-template">
<div>
<div id="edittab"></div>
<div id="tab1">
<div class="form-row" >
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper">
<input id="OrderID" name="OrderID" type="text" value=${if(isAdd)} '' ${else} ${OrderID} ${/if} ${if(isAdd)} '' ${else} disabled ${/if} />
<span class="e-float-line"></span>
<label class="e-float-text e-label-top" for="OrderID">Order ID</label>
</div>
</div>
</div>
<div class="form-row" >
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper">
<input id="CustomerID" name="CustomerID" type="text" value=${if(isAdd)} '' ${else} ${CustomerID} ${/if} />
<span class="e-float-line"></span>
<label class="e-float-text e-label-top" for="CustomerID">Customer ID</label>
</div>
</div>
</div>
<button id='next' class='e-info e-btn' style="float: right" type='button'> next</button>
</div>
<div id="tab2" style='display: none'>
<div class="form-row" >
<div class="form-group col-md-6">
<input type="text" name="ShipCountry" id="ShipCountry" value=${if(isAdd)} '' ${else} ${ShipCountry} ${/if} />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input type="checkbox" name="Verified" id="Verified" ${if(isAdd)} '' ${else} checked ${/if} />
</div>
</div>
<button id='submit' class='e-info e-btn' style="float: right" type='button'> submit</button>
</div>
</div>
</script>
<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 disable the editing for a particular row by using the actionBegin event of Grid based on requestType as beginEdit.
In the below demo, the rows which are having the value for ShipCountry column as “France” is prevented from editing.
ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar);
var grid = new ej.grids.Grid({
dataSource: data,
actionComplete: function(args) {
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
var tr = args.row;
var numericTextBox = tr.querySelector('.e-numerictextbox'); // numeric TextBox component element
if (numericTextBox) {
console.log('NumericTextBox instance: ', (numericTextBox).ej2_instances[0]); // numeric TextBox instance
}
var dropDownList = tr.querySelector('.e-dropdownlist'); // dropDownList component element
if (dropDownList) {
console.log('DropDownList instance: ', (dropDownList).ej2_instances[0]); // dropDownList instance
}
}
},
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit', width: 120, format: 'C2' },
{ field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150 }
],
height: 273
});
grid.appendTo('#Grid');<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-richtexteditor/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-notifications/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<style>
.e-row[aria-selected="true"] .e-customizedExpandcell {
background-color: #e0e0e0;
}
.e-grid.e-gridhover tr[role='row']:hover {
background-color: #eee;
}
.e-expand::before {
content: '\e5b8';
}
</style>
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Grid"></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>For batch mode of editing, you can use cellEdit event of Grid. In the below demo, the cells which are having the value as “France” is prevented from editing.
ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar);
var grid = new ej.grids.Grid({
dataSource: data,
actionComplete: function(args) {
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
var tr = args.row;
var numericTextBox = tr.querySelector('.e-numerictextbox'); // numeric TextBox component element
if (numericTextBox) {
console.log('NumericTextBox instance: ', (numericTextBox).ej2_instances[0]); // numeric TextBox instance
}
var dropDownList = tr.querySelector('.e-dropdownlist'); // dropDownList component element
if (dropDownList) {
console.log('DropDownList instance: ', (dropDownList).ej2_instances[0]); // dropDownList instance
}
}
},
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit', width: 120, format: 'C2' },
{ field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150 }
],
height: 273
});
grid.appendTo('#Grid');<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-richtexteditor/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-notifications/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<style>
.e-row[aria-selected="true"] .e-customizedExpandcell {
background-color: #e0e0e0;
}
.e-grid.e-gridhover tr[role='row']:hover {
background-color: #eee;
}
.e-expand::before {
content: '\e5b8';
}
</style>
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Grid"></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>Using keyboard shortcuts, Grid performs navigation and actions.
In addition, You can also perform grid actions with custom keyboard shortcuts. This operation has to be achieved outside of the grid with the help of keydown event.
The following example demonstrates on Adding a new row when Enter key is pressed in the grid.
ej.grids.Grid.Inject(ej.grids.Toolbar, ej.grids.Edit);
var grid = new ej.grids.Grid({
dataSource: data,
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', validationRules: { required: true }, width: 100, isPrimaryKey: true },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
],
height: 265
});
grid.appendTo('#Grid');
grid.element.addEventListener("keydown", keyDownHandler);
function keyDownHandler(e) {
if(e.keyCode === 13) {
var gridIns = document.getElementById("Grid").ej2_instances[0];
gridIns.addRecord();
}
}<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-richtexteditor/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-notifications/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<style>
.e-row[aria-selected="true"] .e-customizedExpandcell {
background-color: #e0e0e0;
}
.e-grid.e-gridhover tr[role='row']:hover {
background-color: #eee;
}
.e-expand::before {
content: '\e5b8';
}
</style>
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Grid"></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 make a cell editable on a single click with batch mode of editing in Grid, by using the editCell method.
Bind the click event for Grid and in the click event handler call the editCell method, based on the clicked target element.
ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar);
document.getElementById("Grid").addEventListener("click", (e) => {
if(event.target.classList.contains("e-rowcell")){
var gridObj = document.getElementsByClassName("e-grid")[0].ej2_instances[0];
var index = parseInt(event.target.getAttribute("Index"));
var colindex = parseInt(event.target.getAttribute("aria-colindex"));
var field = gridObj.getColumns()[colindex].field;
gridObj.editModule.editCell(index, field);
}
});
var grid = new ej.grids.Grid({
dataSource: data,
toolbar: ['Add', 'Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120, },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit', width: 120, format: 'C2' },
{ field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150 }
],
height: 273
});
grid.appendTo('#Grid');<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-richtexteditor/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-notifications/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<style>
.e-row[aria-selected="true"] .e-customizedExpandcell {
background-color: #e0e0e0;
}
.e-grid.e-gridhover tr[role='row']:hover {
background-color: #eee;
}
.e-expand::before {
content: '\e5b8';
}
</style>
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Grid"></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 customize the default filter operator list by defining the filterSettings.operators property.
The available options are:
stringOperator- Defines the customized string operator list.numberOperator - Defines the customized number operator list.dateOperator - Defines the customized date operator list.booleanOperator - Defines the customized Boolean operator list.The following sample illustrates customizing the string filter operators.
ej.grids.Grid.Inject(ej.grids.Filter);
var grid = new ej.grids.Grid({
dataSource: data,
allowFiltering: true,
filterSettings: {type:'Menu',
operators: {
stringOperator: [
{ value: 'startsWith', text: 'starts with' },
{ value: 'endsWith', text: 'ends with' },
{ value: 'contains', text: 'contains' }],
}
},
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'ShipCity', headerText: 'Ship City', width: 100 },
{ field: 'ShipName', headerText: 'Ship Name', width: 100 }
],
height: 273
});
grid.appendTo('#Grid');<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-richtexteditor/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-notifications/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<style>
.e-row[aria-selected="true"] .e-customizedExpandcell {
background-color: #e0e0e0;
}
.e-grid.e-gridhover tr[role='row']:hover {
background-color: #eee;
}
.e-expand::before {
content: '\e5b8';
}
</style>
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Grid"></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 perform single-column or multi-column sorting dynamically through an external button.
To perform single-column sorting, use the sortColumn method of Grid.
document.getElementById('SingleSort').addEventListener('click', () => {
grid.sortColumn("OrderID","Descending")
});To perform multi-column sorting, you need to push the columns to be sorted into the sortSettings.columns.
document.getElementById('MultiSort').addEventListener('click', () => {
grid.sortModule.sortSettings.columns.push({ field: 'ShipCity', direction: 'Ascending' },{ field: 'ShipName', direction: 'Descending' });
grid.refresh();
});In the below demo, click on the corresponding button to perform single-column or multi-column sorting.
ej.grids.Grid.Inject(ej.grids.Sort);
var grid = new ej.grids.Grid({
dataSource: data,
allowSorting: true,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'ShipCity', headerText: 'Ship City', width: 120 },
{ field: 'ShipName', headerText: 'Ship Name', width: 100 }
],
height: 273
});
grid.appendTo('#Grid');
var singlesort = new ej.buttons.Button({ cssClass: 'e-flat' }, '#SingleSort');
var multisort = new ej.buttons.Button({ cssClass: 'e-flat' }, '#MultiSort');
document.getElementById('SingleSort').addEventListener('click', () => {
grid.sortColumn("OrderID","Descending")
});
document.getElementById('MultiSort').addEventListener('click', () => {
grid.sortModule.sortSettings.columns.push({ field: 'ShipCity', direction: 'Ascending' },{ field: 'ShipName', direction: 'Descending' });
grid.refresh();
});<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<button id="SingleSort"> Sort <b>OrderID</b> column</button>
<button id="MultiSort"> Sort <b>CustomerID</b> and <b>ShipName</b> columns</button>
<div id="Grid"></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 clear the sorting for a particular column or the entire sorted columns in Grid dynamically through an external button.
To clear sort for a particular column, you need to splice the particular column from the sortSettings.columns.
document.getElementById('SingleClearSort').addEventListener('click', () => {
let column: Column = grid.sortModule.sortSettings.columns;
for(let i=0;i < column.length;i++){
if(column[i].field === "OrderID") {
column.splice(i,1);
grid.refresh();
}
}
});To clear sorting for all the sorted columns, use the clearSorting method of Grid.
document.getElementById('MultiClearSort').addEventListener('click', () => {
grid.clearSorting();
});In the below demo, click on the corresponding button to clear sort for particular or entire sorted columns in Grid.
ej.grids.Grid.Inject(ej.grids.Sort);
var grid = new ej.grids.Grid({
dataSource: data,
allowSorting: true,
sortSettings: { columns: [{ field: 'OrderID', direction: 'Ascending' }, { field: 'CustomerID', direction: 'Descending' },{ field: 'ShipCity', direction: 'Ascending' },{ field: 'ShipName', direction: 'Descending' }] },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'ShipCity', headerText: 'Ship City', width: 120 },
{ field: 'ShipName', headerText: 'Ship Name', width: 100 }
],
height: 273
});
grid.appendTo('#Grid');
var singleclear = new ej.buttons.Button({ cssClass: 'e-flat' }, '#SingleClearSort');
var multiclear = new ej.buttons.Button({ cssClass: 'e-flat' }, '#MultiClearSort');
document.getElementById('SingleClearSort').addEventListener('click', () => {
var column = grid.sortModule.sortSettings.columns;
for(var i=0;i < column.length;i++){
if(column[i].field == "OrderID") {
column.splice(i,1);
grid.refresh();
}
}
});
document.getElementById('MultiClearSort').addEventListener('click', () => {
grid.clearSorting();
});<!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.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<button id="SingleClearSort"> Clear the sort for <b>OrderID</b> column</button>
<button id="MultiClearSort"> Clear sorting for entire sorted columns</button>
<div id="Grid"></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>By default, the foreign key column uses the drop-down component for editing. You can render other than the drop-down component by using the column.edit property. The following example demonstrates the way of using edit template in the foreign column.
In the following code example, the Employee Name is a foreign key column. When editing, the AutoComplete component is rendered instead of drop-down list.