The column definitions are used as the dataSource
schema in the Grid. This plays a vital role in rendering column values in the required format.
The grid operations such as sorting, filtering and grouping etc. are performed based on column definitions. The field
property of the columns
is necessary to map the data source values in Grid columns.
The columns
are automatically generated when
columns
declaration is empty or undefined while initializing the grid. All the columns in the dataSource
are bound as grid columns.
import { Grid } from '@syncfusion/ej2-grids';
let data: Object[] = [
{ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5 },
{ OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6 },
{ OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4 }];
let grid: Grid = new Grid ({
dataSource: data
});
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
</head>
<body>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">Title
</td>
<td>${Title}
</td>
</tr>
<tr>
<td class="CardHeader">Country
</td>
<td>${Country}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
When columns are auto-generated, the column
type
will be determined from the first record of thedataSource
.
Primary key can be defined in the declaration of column object of the grid. When we didn’t declare the columns, the grid will generate the columns automatically. For these auto generated columns, you can set isPrimaryKey
column property as true by any one of the following two ways,
If Primary key “column index” is known then refer the following code example
import { Grid, Edit } from '@syncfusion/ej2-grids';
Grid.Inject(Edit);
let data: Object[] = [
{ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5 },
{ OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6 },
{ OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4 }];
let grid: Grid = new Grid ({
dataSource: data,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }
});
grid.appendTo('#Grid');
grid.dataBound = () => {
var column: Column = grid.columns[0];
column.isPrimaryKey = 'true';
}
If Primary key “column fieldname” is known then refer the following code example
import { Grid, Edit } from '@syncfusion/ej2-grids';
Grid.Inject(Edit);
let data: Object[] = [
{ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5 },
{ OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6 },
{ OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4 }];
let grid: Grid = new Grid ({
dataSource: data,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }
});
grid.appendTo('#Grid');
grid.dataBound = () => {
var column: Column = grid.getColumnByField('OrderID');
column.isPrimaryKey = 'true';
}
You can set column options such as format
, width
to the auto generated columns by using dataBound
event of the grid.
In the below example, width
is set for OrderID column, date type is set for OrderDate column and numeric type is set for Freight column.
import { Grid } from '@syncfusion/ej2-grids';
let data: Object[] = [
{ OrderID: 10248, CustomerID: 'VINET', Freight: 32.3800, OrderDate: "1996-07-02T00:00:00.000Z" },
{ OrderID: 10249, CustomerID: 'TOMSP', Freight: 32.3800, OrderDate: "1996-07-19T00:00:00.000Z" },
{ OrderID: 10250, CustomerID: 'HANAR', Freight: 32.3800, OrderDate: "1996-07-22T00:00:00.000Z" }];
let grid: Grid = new Grid ({
dataSource: data,
dataBound: dataBound
});
grid.appendTo('#Grid');
function dataBound(args: any): void {
for (var i = 0; i < this.columns.length; i++) {
this.columns[0].width = 120;
if(this.columns[i].field === "OrderDate"){
this.columns[i].type="date";
}
if (this.columns[i].type === "date") {
this.columns[i].format = { type: "date", format: "dd/MM/yyyy" };
}
this.columns[2].format = "P2";
}
this.refreshColumns();
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">Title
</td>
<td>${Title}
</td>
</tr>
<tr>
<td class="CardHeader">Country
</td>
<td>${Country}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
You can achieve complex data binding in the grid by using the dot(.) operator in the column.field
.
import { Grid } from '@syncfusion/ej2-grids';
import { complexData } from './datasource.ts';
let grid: Grid = new Grid({
dataSource: complexData,
columns: [
{ field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 100 },
{ field: 'Name.FirstName', headerText: 'First Name', width: 120 },
{ field: 'Name.LastName', headerText: 'Last Name', width: 100 },
{ field: 'Title', headerText: 'Title', width: 150 }
],
height: 315
});
grid.appendTo('#Grid');
export let complexData: Object[] = [{
'EmployeeID': 1,
'Name': {
'LastName': 'Davolio',
'FirstName': 'Nancy'},
'Names': [{
'LastName' : 'Davolio',
'FirstName': 'Nancy'}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'Name':{
'LastName': 'Fuller',
'FirstName': 'Andrew'},
'Names': [{
'LastName': 'Fuller',
'FirstName': 'Andrew'}],
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'Name':{
'LastName': 'Leverling',
'FirstName': 'Janet'},
'Names': [{
'LastName': 'Leverling',
'FirstName': 'Janet'}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'Name':{
'LastName': 'Peacock',
'FirstName': 'Margaret'},
'Names': [{
'LastName': 'Peacock',
'FirstName': 'Margaret'}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'Name':{
'LastName': 'Buchanan',
'FirstName': 'Steven'},
'Names': [{
'LastName': 'Buchanan',
'FirstName': 'Steven'}],
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'Name':{
'LastName': 'Suyama',
'FirstName': 'Michael'},
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'Name':{
'LastName': 'King',
'FirstName': 'Robert'},
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'Name': {
'LastName': 'Callahan',
'FirstName': 'Laura'},
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'Name': {
'LastName': 'Dodsworth',
'FirstName': 'Anne'},
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];
For OData and ODataV4 adaptors, you need to add expand
query to the query
property (of Grid), to eager load the complex data.
import { DataManager, ODataAdaptor, Query } from '@syncfusion/ej2-data';
let data: DataManager = new DataManager({
adaptor: new ODataAdaptor(),
crossDomain: true,
url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders'
});
let query: Query = new Query().expand('Employee');
let grid: Grid = new Grid({
dataSource: data,
query: query,
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: 'Employee.City', headerText: 'Employee City', width: 150 }
],
height: 315
});
grid.appendTo('#Grid');
Foreign key column can be enabled by using column.dataSource
, column.foreignKeyField
and column.foreignKeyValue
properties.
column.dataSource
- Defines the foreign data.column.foreignKeyField
- Defines the mapping column name to the foreign data.column.foreignKeyValue
- Defines the display field from the foreign data.In the following example, Employee Name is a foreign column which shows FirstName column from foreign data.
import { Grid, ForeignKey } from '@syncfusion/ej2-grids';
import { data, employeeData } from './datasource.ts';
Grid.Inject(ForeignKey);
let grid: Grid = new Grid(
{
dataSource: data.slice(0,10),
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100 },
{
field: 'EmployeeID', headerText: 'Employee Name', width: 150, foreignKeyValue: 'FirstName', dataSource: employeeData
},
{ field: 'Freight', headerText: 'Freight', width: 100, textAlign: 'Right'},
{ field: 'ShipName', headerText: 'Ship Name', width: 180 }
],
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
- For remote data, the sorting and grouping is done based on
column.foreignKeyField
instead ofcolumn.foreignKeyValue
.- If
column.foreignKeyField
is not defined, then the column usescolumn.field
.
You can customize the header element by using the headerTemplate
property. In this demo, the custom element is rendered for both EmployeeID and BirthDate column headers.
import { Grid } from '@syncfusion/ej2-grids';
import { employeeData } from './datasource.ts';
let grid: Grid = new Grid({
dataSource: employeeData,
columns: [
{ field: 'EmployeeID', headerText: 'Employee ID', width: 120, textAlign: 'Right', headerTemplate: '#employeetemplate' },
{ field: 'FirstName', headerText: 'First Name', width: 140 },
{
field: 'BirthDate', headerText: 'Birth Date', width: 130, format: 'yMd',
textAlign: 'Right', headerTemplate: '#datetemplate'
},
{ field: 'City', width: 120 },
{ field: 'Country', headerText: 'Country', width: 140, format: 'yMd', textAlign: 'Right' },
],
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
<style>
.e-grid .e-icon-userlogin::before{
width:15px !important;
content:'\e7d4';
}
.e-grid .e-icon-calender::before{
width:15px !important;
content:'\e7b5';
}
</style>
</head>
<script id="datetemplate" type="text/x-template">
<span class="e-icon-calender e-icons headericon"></span>
Order Date
</script>
<script id="employeetemplate" type="text/x-template">
<span class="e-icon-userlogin e-icons employee"></span>
Emp ID
</script>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
By default, column header title is displayed from column field
value. To override the default header title, you have to define the headerText
value.
import { Grid } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
let grid: Grid = new Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', width: 140, headerText: 'Customer ID' },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
{ field: 'OrderDate', headerText: 'Order Date', textAlign: 'Right', width: 140, format: 'yMd' }
],
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
<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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
- If both the
field
andheaderText
are not defined in the column, the column renders with “empty” header text.
To format cell values based on specific culture, use the columns.format
property. The grid uses Internalization library to format number
and date
values.
import { Grid } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
let grid: Grid = new Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', width: 140, headerText: 'Customer ID' },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
{ field: 'OrderDate', headerText: 'Order Date', textAlign: 'Right', width: 140, format: 'yMd' }
],
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
<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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
By default, the
number
anddate
values are formatted in en-US locale. You can localize the currency and date in different locale as explainedhere
The number or integer values can be formatted using the below format strings.
Format | Description |
---|---|
N | Denotes numeric type. |
C | Denotes currency type. |
P | Denotes percentage type |
Please refer to the link to know more about Number formatting
.
You can format date values either using built-in date format string or custom format string.
For built-in date format you can specify columns.format
property as string (Example: yMd). Please refer to the link to know more about Date formatting
.
You can also use custom format string to format the date values. Some of the custom formats and the formatted date values are given in the below table.
Format | Formatted value |
---|---|
{ type:‘date’, format:‘dd/MM/yyyy’ } | 04/07/1996 |
{ type:‘date’, format:‘dd.MM.yyyy’ } | 04.07.1996 |
{ type:‘date’, skeleton:‘short’ } | 7/4/96 |
{ type: ‘dateTime’, format: ‘dd/MM/yyyy hh:mm a’ } | 04/07/1996 12:00 AM |
{ type: ‘dateTime’, format: ‘MM/dd/yyyy hh:mm:ss a’ } | 07/04/1996 12:00:00 AM |
import { Grid, Page } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Page);
let grid: Grid = new Grid({
dataSource: data,
allowPaging: true,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'Freight', headerText: 'Freight', format:'C2', width: 120 },
{ field: 'OrderDate',format: {type:'date', format:'dd/MM/yyyy'}, headerText:'Order Date', width:150},
{ field: 'OrderDate', format:{ type: 'dateTime', format: 'dd/MM/yyyy hh:mm a' }, headerText: 'Ship Date', width: 180 }
],
});
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
You can hide any particular column in Grid before rendering by defining visible
property as false. In the below sample ShipCity column is defined as visible false.
import { Grid } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
let grid: Grid = new Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', width: 140, headerText: 'Customer ID' },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
{ field: 'ShipCity', headerText: 'Ship City', width: 120 ,visible: false},
{ field: 'OrderDate', headerText: 'Order Date', textAlign: 'Right', width: 140, format: 'yMd' }
],
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
<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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
The autoFitColumns
method resizes the column to fit the widest cell’s content without wrapping. You can autofit a specific column at initial rendering by invoking the autoFitColumns
method in dataBound
event.
To use the autoFitColumns
method, inject the Resize module in the grid.
import { Grid, Resize } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Resize);
let grid: Grid = new Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 140 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 130 },
{ field: 'ShipName', headerText: 'Ship Name', width: 120 },
{ field: 'ShipCity', headerText: 'Ship City', width: 120 },
{ field: 'ShipAddress', headerText: 'Ship Address', width: 150 }
],
dataBound: () => grid.autoFitColumns(['ShipName', 'ShipAddress']),
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
You can autofit all the columns by invoking the
autoFitColumns
method without column names.
Reordering can be done by drag and drop of a particular column header from one index to another index within the grid. To enable reordering, set the allowReordering
to true.
To use reordering, inject the Reorder
module in the grid.
import { Grid, Reorder } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Reorder);
let grid: Grid = new Grid({
dataSource: data,
allowReordering: true,
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: 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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
</head>
<body>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">Title
</td>
<td>${Title}
</td>
</tr>
<tr>
<td class="CardHeader">Country
</td>
<td>${Country}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
You can disable reordering a particular column by setting the
columns.allowReordering
to false.
Grid have option to reorder Columns either by Interaction or by using the reorderColumns
method. In the below sample, ShipCity column is reordered to last column position by using the method.
import { Grid, Reorder } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
import { Button } from '@syncfusion/ej2-buttons';
Grid.Inject(Reorder);
let grid: Grid = new Grid({
dataSource: data,
allowReordering: true,
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: 'ShipRegion', headerText: 'Ship Region', width: 100 },
{ field: 'ShipName', headerText: 'Ship Name', width: 100 }
],
height: 280
});
grid.appendTo('#Grid');
let reorderSingleColsBtn: Button = new Button();
reorderSingleColsBtn.appendTo('#reorderSingleCol');
document.getElementById('reorderSingleCol').addEventListener('click', () => {
grid.reorderColumns('ShipCity','ShipName');
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#reorderMultipleCols {
text-transform: none;
}
</style>
</head>
<body>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">Title
</td>
<td>${Title}
</td>
</tr>
<tr>
<td class="CardHeader">Country
</td>
<td>${Country}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<button id="reorderSingleCol">Reorder Ship City to Last</button>
<div id='Grid'></div>
</div>
</body>
</html>
User can reorder a single column at a time by Interaction. Sometimes we need to have reorder multiple columns at the same time, It can be achieved through programmatically by using reorderColumns
method.
In the below sample, Ship City and Ship Region column is reordered to last column position.
import { Grid, Reorder } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
import { Button } from '@syncfusion/ej2-buttons';
Grid.Inject(Reorder);
let grid: Grid = new Grid({
dataSource: data,
allowReordering: true,
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: 'ShipRegion', headerText: 'Ship Region', width: 100 },
{ field: 'ShipName', headerText: 'Ship Name', width: 100 }
],
height: 280
});
grid.appendTo('#Grid');
let reorderMultipleColsBtn: Button = new Button();
reorderMultipleColsBtn.appendTo('#reorderMultipleCols');
document.getElementById('reorderMultipleCols').addEventListener('click', () => {
grid.reorderColumns(['ShipCity','ShipRegion'],'ShipName');
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#reorderMultipleCols {
text-transform: none;
}
</style>
</head>
<body>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">Title
</td>
<td>${Title}
</td>
</tr>
<tr>
<td class="CardHeader">Country
</td>
<td>${Country}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<button id="reorderMultipleCols">Reorder Ship City and Ship Region to Last</button>
<div id='Grid'></div>
</div>
</body>
</html>
During the reorder action, the grid component triggers the below three events.
columnDragStart
event triggers when column header element drag (move) starts.columnDrag
event triggers when column header element is dragged (moved) continuously.columnDrop
event triggers when a column header element is dropped on the target column.import { Grid, Reorder } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Reorder);
let grid: Grid = new Grid({
dataSource: data,
allowReordering: true,
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 }
],
columnDragStart: () => {
alert('columnDragStart event is Triggered');
},
columnDrag: () => {
alert('columnDrag event is Triggered');
},
columnDrop: () => {
alert('columnDrop event is Triggered');
}
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
</head>
<body>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">Title
</td>
<td>${Title}
</td>
</tr>
<tr>
<td class="CardHeader">Country
</td>
<td>${Country}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
You can lock columns by using column.lockColumn
property. The locked columns will be moved to the first position. Also you can’t reorder its position.
In the below example, Ship City column is locked and its reordering functionality is disabled.
import { Grid, Reorder } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Reorder);
let grid: Grid = new Grid({
dataSource: data,
allowReordering: true,
allowSelection: false,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'ShipCity', headerText: 'Ship City',width: 100, lockColumn: true, customAttributes: {class: 'customcss'}},
{ field: 'ShipName', headerText: 'Ship Name', width: 100 },
{ field: 'ShipPostalCode', headerText: 'Ship Postal code', width: 100 },
{ field: 'ShipRegion', headerText: 'Ship Region', 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;
}
.e-grid .e-headercell.customcss{
background-color: #ecedee;
}
Column width can be resized by clicking and dragging the right edge of the column header. While dragging, the width of the respective column will be resized immediately. Each column can be auto resized by double-clicking the right edge of the column header to fit the width of that column based on the widest cell content. To enable column resize, set the allowResizing
property to true.
To use the column resize, inject Resize module in the grid.
import { Grid, Resize } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Resize);
let grid: Grid = new Grid({
dataSource: data,
allowResizing: true,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width:150 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'Freight', headerText: 'Freight', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 },
{ field: 'ShipAddress', headerText: 'Ship Address', width: 150 },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 },
{ field: 'ShipPostalCode', headerText: 'Ship Postal code', width: 150 }
],
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
</head>
<body>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">Title
</td>
<td>${Title}
</td>
</tr>
<tr>
<td class="CardHeader">Country
</td>
<td>${Country}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
- You can disable resizing for a particular column by setting the
columns.allowResizing
to false.- In RTL mode, you can click and drag the left edge of the header cell to resize the column.
To resize a column, set width to that particular column and then refresh the grid header by using the refreshHeader()
method. Please refer the below code
var grid = document.getElementById('Grid').ej2_instances[0]; //Grid Instance
var columns = grid.columns;
columns[0].width = 150;
grid.refreshHeader();
Column resize can be restricted between minimum and maximum width by defining the columns->minWidth
and columns->maxWidth
.
In the following sample, minimum and maximum width are defined for OrderID, Ship Name, and Ship Country columns.
import { Grid, Resize } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Resize);
let grid: Grid = new Grid({
dataSource: data,
allowResizing: true,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', minWidth: 100, width: 150, maxWidth: 300 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'Freight', headerText: 'Freight', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', minWidth: 120, width: 150, maxWidth: 250 },
{ field: 'ShipAddress', headerText: 'Ship Address', width: 150 },
{ field: 'ShipCountry', headerText: 'Ship Country', minWidth: 150, width: 200, maxWidth: 350 },
{ field: 'ShipPostalCode', headerText: 'Ship Postal code', width: 150 }
],
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
</head>
<body>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">Title
</td>
<td>${Title}
</td>
</tr>
<tr>
<td class="CardHeader">Country
</td>
<td>${Country}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
Stacked columns can be resized by clicking and dragging the right edge of the stacked column header. While dragging, the width of the respective child columns will be resized at the same time. You can disable resize for any particular stacked column by setting allowResizing
as false to its columns.
In this example, we have disabled resize for Ship City column.
import { Grid, Resize } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Resize);
let grid: Grid = new Grid({
dataSource: data,
allowResizing: true,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, minWidth: 10 },
{
headerText: 'Order Details', columns: [
{ field: 'OrderDate', headerText: 'Order Date', textAlign: 'Right', width: 125, minWidth: 10, format: 'yMd' },
{ field: 'Freight', headerText: 'Freight($)', textAlign: 'Right', width: 100, format: 'C2', minWidth: 10 },
]
},
{
headerText: 'Ship Details', columns: [
{ field: 'ShipCity', headerText: 'Ship City', width: 100, minWidth: 10, allowResizing: false },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 120, minWidth: 10 },
]
}
]
});
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
</head>
<body>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">Title
</td>
<td>${Title}
</td>
</tr>
<tr>
<td class="CardHeader">Country
</td>
<td>${Country}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
When the right edge of the header cell is tapped, a floating handler will be visible over the right border of the column. To resize the column, tap and drag the floating handler as needed. You can autoFit a column by using the Column menu of the grid.
The following screenshot represents the column resizing in touch device.
During the resizing action, the grid component triggers the below three events.
resizeStart
event triggers when column resize starts.resizing
event triggers when column header element is dragged (moved) continuously..resizeStop
event triggers when column resize ends.import { Grid, Resize } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Resize);
let grid: Grid = new Grid({
dataSource: data,
allowResizing: true,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width:150 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'Freight', headerText: 'Freight', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 },
{ field: 'ShipAddress', headerText: 'Ship Address', width: 150 },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 },
{ field: 'ShipPostalCode', headerText: 'Ship Postal code', width: 150 }
],
height: 315,
resizeStart: () => {
alert('resizeStart event is Triggered');
},
resizing: () => {
alert('Resizing event is Triggered');
},
resizeStop: () => {
alert('resizeStop event is Triggered');
}
});
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
</head>
<body>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">Title
</td>
<td>${Title}
</td>
</tr>
<tr>
<td class="CardHeader">Country
</td>
<td>${Country}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
The column template
has options to display custom element instead of a field value in the column.
import { Grid } from '@syncfusion/ej2-grids';
import { employeeData } from './datasource.ts';
let grid: Grid = new Grid({
dataSource: employeeData,
columns: [
{
headerText: 'Employee Image', textAlign: 'Center',
template: '#template', width: 150
},
{ field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 },
{ field: 'FirstName', headerText: 'Name', width: 120 },
{ field: 'Title', headerText: 'Title', width: 170 }
],
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<script id="template" type="text/x-template">
<div class="image">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</div>
</script>
<div id='Grid'></div>
</div>
</body>
</html>
Grid actions such as editing, grouping, filtering and sorting etc. will depend upon the column
field
. If thefield
is not specified in the template column, the grid actions cannot be performed.
You can render the template elements based on condition.
In the following code, checkbox is rendered based on Discontinued field value.
<script id="template" type="text/x-template">
<div class="template_checkbox">
${if(Discontinued)}
<input type="checkbox" checked> ${else}
<input type="checkbox"> ${/if}
</div>
</script>
import { Grid } from '@syncfusion/ej2-grids';
import { productData } from './datasource.ts';
let grid: Grid = new Grid({
dataSource: productData,
columns: [
{
headerText: 'Discontinued', textAlign: 'Center',
template: '#template', width: 120
},
{ field: 'ProductID', headerText: 'Product ID', textAlign: 'Right', width: 80 },
{ field: 'ProductName', headerText: 'Name', width: 160 },
{ field: 'SupplierID', headerText: 'SupplierID', width: 80 },
{ field: 'UnitsInStock', headerText: 'Stock', width: 80, textAlign: 'Right' }
],
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<script id="template" type="text/x-template">
<div class="template_checkbox">
${if(Discontinued)}
<input type="checkbox" checked> ${else}
<input type="checkbox"> ${/if}
</div>
</script>
<div id='Grid'></div>
</div>
</body>
</html>
Column type can be specified using the columns.type
property. It specifies the type of data the column binds.
If the format
is defined for a column, the column uses type
to select the appropriate format option (number
or date).
Grid column supports the following types:
If the
type
is not defined, it will be determined from the first record of thedataSource
. Incase if the first record of thedataSource
is null/blank value for a column then it is necessary to define thetype
for that column.
The column chooser has options to show or hide columns dynamically. It can be enabled by defining the
showColumnChooser
as true.
To use the column chooser, inject the ColumnChooser module in the grid.
import { Grid, Selection, Toolbar, ColumnChooser } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Selection, Toolbar, ColumnChooser);
let grid: Grid = new Grid({
dataSource: data,
showColumnChooser: true,
toolbar: ['ColumnChooser'],
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150, showInColumnChooser: false },
{ field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },
{ field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', visible: false, width: 150 }
],
height: 235
});
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
You can hide the column names in column chooser by defining the
columns.showInColumnChooser
as false.
The Column chooser can be displayed on a page through external button by invoking
the openColumnChooser
method with X and Y axis positions.
import { Grid, Selection, ColumnChooser } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
import { Button } from '@syncfusion/ej2-buttons';
Grid.Inject(Selection, ColumnChooser);
let grid: Grid = new Grid({
dataSource: data,
showColumnChooser: true,
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150, showInColumnChooser: false },
{ field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },
{ field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', visible: false, width: 150 }
],
height: 235
});
grid.appendTo('#Grid');
let show: Button = new Button({ cssClass: 'e-flat' }, '#show');
document.getElementById('show').onclick = () => {
grid.columnChooserModule.openColumnChooser(200, 50); // give X and Y axis
};
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<button id='show'>Open Column Chooser</button>
<div id='Grid'></div>
</div>
</body>
</html>
The column menu has options to integrate features like sorting, grouping, filtering, column chooser, and autofit. It will show a menu with the integrated feature when users click on multiple icon of the column. To enable column menu, you need to define the showColumnMenu
property as true.
To use the column menu, inject the ColumnMenu module in the grid.
The default items are displayed in following table.
Item | Description |
---|---|
SortAscending | Sort the current column in ascending order. |
SortDescending | Sort the current column in descending order. |
Group | Group the current column. |
Ungroup | Ungroup the current column. |
AutoFit | Auto fit the current column. |
AutoFitAll | Auto fit all columns. |
ColumnChooser | Choose the column visibility. |
Filter | Show the filter option as given in filterSettings.type |
import { Grid, Resize, Sort, Group, Filter, ColumnMenu, Page } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Resize, Sort, Group, Filter, ColumnMenu, Page);
let grid: Grid = new Grid({
dataSource: data,
allowGrouping: true,
allowSorting: true,
allowFiltering: true,
filterSettings: { type: 'CheckBox' },
allowPaging: true,
groupSettings: { showGroupedColumn: true },
showColumnMenu: true,
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 200, textAlign: 'Right',
showInColumnChooser: false },
{ field: 'Freight', width: 150, format: 'C2', textAlign: 'Right', editType: 'numericedit' },
{ field: 'ShipName', headerText: 'Ship Name', width: 300 },
{ field: 'ShipCountry', headerText: 'Ship Country', visible: false, width: 200 },
{ field: 'ShipCity', headerText: 'Ship City', width: 200 }
]
});
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
</head>
<body>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">Title
</td>
<td>${Title}
</td>
</tr>
<tr>
<td class="CardHeader">Country
</td>
<td>${Country}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
- You can disable column menu for a particular column by defining the
columns.showColumnMenu
as false.- You can customize the default items by defining the
columnMenuItems
with required items.
During the resizing action, the grid component triggers the below two events.
columnMenuOpen
event triggers before the column menu opens.columnMenuClick
event triggers when the user clicks the column menu of the grid.import { Grid, Resize, Sort, Group, Filter, ColumnMenu, Page } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Resize, Sort, Group, Filter, ColumnMenu, Page);
let grid: Grid = new Grid({
dataSource: data,
allowGrouping: true,
allowSorting: true,
allowFiltering: true,
filterSettings: { type: 'CheckBox' },
allowPaging: true,
groupSettings: { showGroupedColumn: true },
showColumnMenu: true,
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 200, textAlign: 'Right',
showInColumnChooser: false },
{ field: 'Freight', width: 150, format: 'C2', textAlign: 'Right', editType: 'numericedit' },
{ field: 'ShipName', headerText: 'Ship Name', width: 300 },
{ field: 'ShipCountry', headerText: 'Ship Country', visible: false, width: 200 },
{ field: 'ShipCity', headerText: 'Ship City', width: 200 }
],
columnMenuOpen: () => {
alert('columnMenuOpen event is Triggered');
},
columnMenuClick: () => {
alert('columnMenuClick event is Triggered');
}
});
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
</head>
<body>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">Title
</td>
<td>${Title}
</td>
</tr>
<tr>
<td class="CardHeader">Country
</td>
<td>${Country}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
Custom column menu items can be added by defining the columnMenuItems
as collection of
the columnMenuItemModel
.
Actions for this customized items can be defined in the columnMenuClick
event.
import { Grid, ColumnMenu, Sort, Page } from '@syncfusion/ej2-grids';
import { MenuEventArgs } from '@syncfusion/ej2-navigations';
import { data } from './datasource.ts';
Grid.Inject(ColumnMenu, Page, Sort);
let grid: Grid = new Grid({
dataSource: data,
allowPaging: true,
allowSorting: true,
showColumnMenu: true,
columnMenuItems:[{text:'Clear Sorting', id:'gridclearsorting'}],
columnMenuClick: function(args: MenuEventArgs){
if(args.item.id === 'gridclearsorting'){
grid.clearSorting();
}
},
sortSettings:{
columns:[{direction: "Ascending", field: "OrderID"}]
},
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 200, textAlign: 'Right', showInColumnChooser: false },
{ field: 'Freight', width: 150, format: 'C2', textAlign: 'Right', editType: 'numericedit' },
{ field: 'ShipName', headerText: 'Ship Name', width: 300 },
{ field: 'ShipCountry', headerText: 'Ship Country', visible: false, width: 200 },
{ field: 'ShipCity', headerText: 'Ship City', width: 200 }
]
});
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
</head>
<body>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">Title
</td>
<td>${Title}
</td>
</tr>
<tr>
<td class="CardHeader">Country
</td>
<td>${Country}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
Sometimes, you have a scenario that to hide an item from column menu for particular columns. In that case, you need to define the columnMenuOpenEventArgs.hide
as true in the columnMenuOpen
event.
The following sample, Filter item was hidden in column menu when opens for the OrderID column.
import { Grid, ColumnMenu, Sort, Page, Resize, Group, Filter, ColumnMenuOpenEventArgs, ColumnMenuItemModel } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(ColumnMenu, Page, Group, Sort, Resize, Filter);
let grid: Grid = new Grid({
dataSource: data,
allowPaging: true,
showColumnMenu: true,
filterSettings: {type: 'Menu'},
allowFiltering: true,
allowGrouping: true,
allowSorting: true,
columnMenuOpen: function (args: ColumnMenuOpenEventArgs) {
for (let item of args.items) {
if (item.text === 'Filter' && args.column.field === 'OrderID') {
(item as ColumnMenuItemModel).hide = true;
} else {
(item as ColumnMenuItemModel).hide = false;
}
}
},
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 200, textAlign: 'Right', showInColumnChooser: false },
{ field: 'Freight', width: 150, format: 'C2', textAlign: 'Right', editType: 'numericedit' },
{ field: 'ShipName', headerText: 'Ship Name', width: 300 },
{ field: 'ShipCountry', headerText: 'Ship Country', visible: false, width: 200 },
{ field: 'ShipCity', headerText: 'Ship City', width: 200 }
]
});
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
</head>
<body>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="${EmployeeID}.png" alt="${EmployeeID}" />
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">Title
</td>
<td>${Title}
</td>
</tr>
<tr>
<td class="CardHeader">Country
</td>
<td>${Country}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
The grid has option to span the adjacent cells. You need to define the colSpan
attribute to span cells in the QueryCellInfo
event.
In the following demo, employee Davolio is doing analysis from 9.00 A.M. to 10.00 A.M. so that the cells have been spanned.
import { Grid } from '@syncfusion/ej2-grids';
import { columnSpanData, ColumnSpanDataType } from './datasource.ts';
let grid: Grid = new Grid({
dataSource: columnSpanData,
queryCellInfo: QueryCellEvent,
gridLines: 'Both',
columns: [
{ field: 'EmployeeID', headerText: 'Employee ID', isPrimaryKey: true, textAlign: 'Right', width: 120 },
{ field: 'EmployeeName', headerText: 'Employee Name', width: 200 },
{ field: '9:00', headerText: '9.00 AM', width: 100 },
{ field: '9:30', headerText: '9.30 AM', width: 100 },
{ field: '10:00', headerText: '10.00 AM', width: 100 },
{ field: '10:30', headerText: '10.30 AM', width: 100 },
{ field: '11:00', headerText: '11.00 AM', width: 100 },
{ field: '11:30', headerText: '11.30 AM', width: 100 },
{ field: '12:00', headerText: '12.00 PM', width: 100 },
{ field: '12:30', headerText: '12.30 PM', width: 100 },
{ field: '2:30', headerText: '2.30 PM', width: 120 },
{ field: '3:00', headerText: '3.00 PM', width: 120 },
{ field: '3:30', headerText: '3.30 PM', width: 120 },
{ field: '4:00', headerText: '4.00 PM', width: 100 },
{ field: '4:30', headerText: '4.30 PM', width: 100 },
{ field: '5:00', headerText: '5.00 PM', width: 100 }
],
width: 'auto',
height: 'auto',
allowTextWrap: true
});
grid.appendTo('#Grid');
function QueryCellEvent(args: QueryCellInfoEventArgs): void {
let data: ColumnSpanDataType = args.data as ColumnSpanDataType;
switch (data.EmployeeID) {
case 10001:
if (args.column.field === '9:00' || args.column.field === '2:30' || args.column.field === '4:30') {
args.colSpan = 2;
} else if (args.column.field === '11:00') {
args.colSpan = 3;
}
break;
case 10002:
if (args.column.field === '9:30' || args.column.field === '2:30' ||
args.column.field === '4:30') {
args.colSpan = 3;
} else if (args.column.field === '11:00') {
args.colSpan = 4;
}
break;
case 10003:
if (args.column.field === '9:00' || args.column.field === '11:30') {
args.colSpan = 3;
} else if (args.column.field === '10:30' || args.column.field === '3:30' ||
args.column.field === '4:30' || args.column.field === '2:30') {
args.colSpan = 2;
}
break;
case 10004:
if (args.column.field === '9:00') {
args.colSpan = 3;
} else if (args.column.field === '11:00') {
args.colSpan = 4;
} else if (args.column.field === '4:00' || args.column.field === '2:30') {
args.colSpan = 2;
}
break;
case 10005:
if (args.column.field === '9:00') {
args.colSpan = 4;
} else if (args.column.field === '11:30') {
args.colSpan = 3;
} else if (args.column.field === '3:30' || args.column.field === '4:30' || args.column.field === '2:30') {
args.colSpan = 2;
}
break;
case 10006:
if (args.column.field === '9:00' || args.column.field === '4:30' ||
args.column.field === '2:30' || args.column.field === '3:30') {
args.colSpan = 2;
} else if (args.column.field === '10:00' || args.column.field === '11:30') {
args.colSpan = 3;
}
break;
case 10007:
if (args.column.field === '9:00' || args.column.field === '3:00' || args.column.field === '10:30') {
args.colSpan = 2;
} else if (args.column.field === '11:30' || args.column.field === '4:00') {
args.colSpan = 3;
}
break;
case 10008:
if (args.column.field === '9:00' || args.column.field === '10:30' || args.column.field === '2:30') {
args.colSpan = 3;
} else if (args.column.field === '4:00') {
args.colSpan = 2;
}
break;
case 10009:
if (args.column.field === '9:00' || args.column.field === '11:30') {
args.colSpan = 3;
} else if (args.column.field === '4:30' || args.column.field === '2:30') {
args.colSpan = 2;
}
break;
case 100010:
if (args.column.field === '9:00' || args.column.field === '2:30' ||
args.column.field === '4:00' || args.column.field === '11:30') {
args.colSpan = 3;
} else if (args.column.field === '10:30') {
args.colSpan = 2;
}
break;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
You can toggle column visibility based on media queries which are defined
at the hideAtMedia
.
The hideAtMedia
accepts valid
Media Queries. In the below sample, for OrderID column, hideAtMedia
property value is set as (min-width: 700px) so that OrderID column will gets hidden when the browser screen width is lessthan 700px.
import { Grid, Selection } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Selection);
let grid: Grid = new Grid({
dataSource: data,
columns: [
{
field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right',
hideAtMedia: '(min-width: 700px)'
}, // column hides when browser screen width lessthan 700px;
{
field: 'CustomerID', headerText: 'Customer ID', width: 150,
hideAtMedia: '(max-width: 500px)'
}, // column shows when browser screen width lessthan or equalto 500px;
{
field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd',
textAlign: 'Right', hideAtMedia: '(min-width:500px)'
},// column hides when browser screensize lessthan 500px;
{ field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' } // it always shown
],
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
You can enable or disable grid action for a particular column by setting the allowFiltering
,
allowGrouping
, allowSorting
, allowReordering
, and allowEditing
properties.
import { Grid, Group, Sort, Filter, Edit, Reorder } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Group, Sort, Filter, Edit, Reorder);
let grid: Grid = new Grid({
dataSource: data,
allowFiltering: true,
allowGrouping: true,
allowSorting: true,
allowReordering: true,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
columns: [
{ field: 'OrderID', headerText: 'Order ID', allowGrouping: false, textAlign: 'Right', width: 100 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'ShipCity', headerText: 'Ship City', allowFiltering: false, allowReordering: false, allowEditing: false, width: 100 },
{ field: 'ShipName', headerText: 'Ship Name', allowSorting: false, width: 100 }
],
height: 220
});
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
You can show or hide grid columns dynamically using external buttons by invoking the showColumns
or hideColumns
method.
import { Grid } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
import { Button } from '@syncfusion/ej2-buttons';
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', width: 100 },
{ field: 'ShipName', headerText: 'Ship Name', width: 100 }
],
height: 280
});
grid.appendTo('#Grid');
let show: Button = new Button({ cssClass: 'e-flat' }, '#show');
let hide: Button = new Button({ cssClass: 'e-flat' }, '#hide');
document.getElementById('show').onclick = () => {
grid.showColumns(['Customer ID', 'Ship Name']); //show by HeaderText
};
document.getElementById('hide').onclick = () => {
grid.hideColumns(['Customer ID', 'Ship Name']); //hide by HeaderText
};
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<button id='show'>Show</button>
<button id='hide'>Hide</button>
<div id='Grid'></div>
</div>
</body>
</html>
The valueAccessor
is used to access/manipulate the value of display data. You can achieve custom value formatting by using the valueAccessor
.
import { Grid } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
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: 'Freight', headerText: 'Freight', width: 100, valueAccessor: currencyFormatter },
{ field: 'ShipName', headerText: 'Ship Name', width: 180, valueAccessor: valueAccess }
],
height: 315
});
grid.appendTo('#Grid');
function currencyFormatter(field: string, data: Object, column: Object): string {
return '€' + data['Freight'];
}
function valueAccess(field: string, data: Object, column: Object): string {
return data[field] + '-' + data['ShipRegion'];
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];
You can bind an array of objects in a column by using the valueAccessor
property.
In this example, the name field has an array of two objects, FirstName and LastName. These two objects are joined and bound to a column using the
valueAccessor
.
import { Grid } from '@syncfusion/ej2-grids';
import { stringData } from './datasource.ts';
let grid: Grid = new Grid({
dataSource: stringData,
columns: [
{ field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 100 },
{ field: 'Name', headerText: 'Full Name', width: 120, valueAccessor: valueAccess },
{ field: 'Title', headerText: 'Title', width: 150 }
],
height: 315
});
grid.appendTo('#Grid');
function valueAccess(field: string, data: Object, column: Object): string {
return data[field].map(function (s: {LastName: string, FirstName: string}): string {
return s.LastName || s.FirstName }).join(' ');
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
export let stringData: Object[] = [{
'EmployeeID': 1,
'Name': [{
'FirstName': 'Davolio'},
{'LastName': 'Nancy'}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'Name':[{
'FirstName': 'Fuller'},
{'LastName': 'Andrew'}],
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'Name':[{
'FirstName': 'Leverling'},
{'LastName': 'Janet'}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'Name':[{
'FirstName': 'Peacock'},
{'LastName': 'Margaret'}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'Name':[{
'FirstName': 'Buchanan'},
{'LastName': 'Steven'}],
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'Name':[{
'FirstName': 'Suyama'},
{'LastName': 'Michael'}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'Name':[{
'FirstName': 'King'},
{'LastName': 'Robert'}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'Name':[{
'FirstName': 'Callahan'},
{'LastName': 'Laura'}],
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'Name': [{
'FirstName': 'Dodsworth'},
{'LastName': 'Anne'}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];
You can achieve the expression column by using the valueAccessor
property.
import { Grid } from '@syncfusion/ej2-grids';
import { foodInformation } from './datasource.ts';
let grid: Grid = new Grid({
dataSource: foodInformation,
columns: [
{ field: 'FoodName', headerText: 'FoodName', width: 120 },
{ field: 'Protein', headerText: 'Protein', textAlign: 'Right', width: 100 },
{ field: 'Fat', headerText: 'Fat', textAlign: 'Right', width: 100 },
{ field: 'Carbohydrate', headerText: 'Carbohydrate', textAlign: 'Right', width: 130 },
{ headerText: 'Calories In Take', valueAccessor: totalCalories, textAlign: 'Right', width: 150 },
],
height: 315
});
grid.appendTo('#Grid');
function totalCalories(field: string, data: { Protein: number, Fat: number, Carbohydrate: number }, column: Object): number {
return data.Protein * 4 + data.Fat * 9 + data.Carbohydrate * 4;
};
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="sty