Search results
Columns in JavaScript Grid control
22 Jul 2021 / 35 minutes to read
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.
Auto generation
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.
Source
Preview
index.ts
index.html
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
typewill be determined from the first record of thedataSource.
Set isPrimaryKey for auto generated columns when editing is enabled
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';
}Set column options to auto generated columns
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.
Source
Preview
index.ts
index.html
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>Complex data binding
You can achieve complex data binding in the grid by using the dot(.) operator in the column.field.
Source
Preview
index.ts
datasource.ts
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
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.
Source
Preview
index.ts
index.html
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.foreignKeyFieldinstead ofcolumn.foreignKeyValue.- If
column.foreignKeyFieldis not defined, then the column usescolumn.field.
Header Template
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.
Source
Preview
index.ts
index.html
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>Header text
By default, column header title is displayed from column field value. To override the default header title, you have to define the headerText value.
Source
Preview
index.ts
index.html
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
fieldandheaderTextare not defined in the column, the column renders with “empty” header text.
Format
To format cell values based on specific culture, use the columns.format property. The grid uses Internalization library to format number and date
values.
Source
Preview
index.ts
index.html
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
numberanddatevalues are formatted in en-US locale. You can localize the currency and date in different locale as explainedhere
Number formatting
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.
Date 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 |
Source
Preview
index.ts
index.html
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>Visibility
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.
Source
Preview
index.ts
index.html
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>AutoFit specific columns
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.
Source
Preview
index.ts
index.html
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
autoFitColumnsmethod without column names.
Reorder
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.
Source
Preview
index.ts
index.html
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.allowReorderingto false.
Reorder Single Column
Grid have option to reorder Columns either by Interaction or by using the reorderColumnsmethod. In the below sample, ShipCity column is reordered to last column position by using the method.
Source
Preview
index.ts
index.html
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>Reorder Multiple Columns
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.
Source
Preview
index.ts
index.html
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>Reorder Events
During the reorder action, the grid component triggers the below three events.
- The
columnDragStartevent triggers when column header element drag (move) starts. - The
columnDragevent triggers when column header element is dragged (moved) continuously. - The
columnDropevent triggers when a column header element is dropped on the target column.
Source
Preview
index.ts
index.html
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>Lock Columns
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.
Source
Preview
index.ts
lock.css
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 resizing
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.
Source
Preview
index.ts
index.html
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.allowResizingto false.- In RTL mode, you can click and drag the left edge of the header cell to resize the column.
Column Resizing Externally
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();Min and max width
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.
Source
Preview
index.ts
index.html
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>Resize Stacked Column
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.
Source
Preview
index.ts
index.html
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>Touch interaction
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.
Resizing Events
During the resizing action, the grid component triggers the below three events.
- The
resizeStartevent triggers when column resize starts. - The
resizingevent triggers when column header element is dragged (moved) continuously.. - The
resizeStopevent triggers when column resize ends.
Source
Preview
index.ts
index.html
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>Column template
The column template has options to display custom element instead of a field value in the column.
Source
Preview
index.ts
index.html
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 thefieldis not specified in the template column, the grid actions cannot be performed.
Using condition template
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>Source
Preview
index.ts
index.html
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
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:
- string
- number
- boolean
- date
- datetime
If the
typeis not defined, it will be determined from the first record of thedataSource. Incase if the first record of thedataSourceis null/blank value for a column then it is necessary to define thetypefor that column.
Column chooser
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.
Source
Preview
index.ts
index.html
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.showInColumnChooseras false.
Open column chooser by external button
The Column chooser can be displayed on a page through external button by invoking
the openColumnChooser method with X and Y axis positions.
Source
Preview
index.ts
index.html
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>Column menu
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 |
Source
Preview
index.ts
index.html
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.showColumnMenuas false.- You can customize the default items by defining the
columnMenuItemswith required items.
Column menu events
During the resizing action, the grid component triggers the below two events.
- The
columnMenuOpenevent triggers before the column menu opens. - The
columnMenuClickevent triggers when the user clicks the column menu of the grid.
Source
Preview
index.ts
index.html
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 Item
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.
Source
Preview
index.ts
index.html
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>Customize menu items for particular columns
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.
Source
Preview
index.ts
index.html
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>Column spanning
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.
Source
Preview
index.ts
index.html
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"</