JavaScript

Search results

Row in JavaScript Grid control

22 Jul 2021 / 17 minutes to read

The row represents record details fetched from data source.

Row template

The rowTemplate has an option to customise the look and behavior of the grid rows. The rowTemplate property accepts either the template string or HTML element ID.

Source

Preview

index.ts

index.html

index.css

import { Grid } from '@syncfusion/ej2-grids';
import { employeeData } from './datasource.ts';

let grid: Grid = new Grid({
    dataSource: employeeData,
    rowTemplate: '#rowtemplate',
    columns: [
        { headerText: 'Employee Image', width: 150, textAlign: 'Center', field: 'OrderID' },
        { headerText: 'Employee Details', width: 300, field: 'EmployeeID' }
    ],
    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>

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.photo img {
  border-radius: 50px;
  box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
  height: 100px;
  width: 100px;
}
    
@media screen and (max-width: 600px) and (min-width: 320px) {
  .photo img {
    height: 50px;
    width: 50px;
}
}
    
@media screen and (max-width: 800px) and (min-width: 600px) {
  .photo img {
    height: 70px;
    width: 70px;
}
}
    
.photo,
.details {
  border-color: #e0e0e0;
  border-style: solid;
}
    
.photo {
  border-width: 1px 0 0 0;
  text-align: center;
}
    
.details {
  border-width: 1px 0 0 0;
  padding-left: 18px;
}

.e-bigger .details {
  padding-left: 25px;
}

.e-device .details {
  padding-left: 8px;
}
    
.details > table {
  width: 100%;
}
    
.CardHeader {
  font-weight: bolder;
}
    
td {
  padding: 2px 2px 3px 4px;
}

The rowTemplate property accepts only the TR element.

Row template with formatting

If the rowTemplate is used, the value cannot be formatted inside the template using the columns.format property. In that case, a function should be defined globally to format the value and invoke it inside the template.

Source

Preview

index.ts

index.html

index.css

import { Grid } from '@syncfusion/ej2-grids';
import { employeeData } from './datasource.ts';
import { Internationalization } from '@syncfusion/ej2-base';

let intl: Internationalization = new Internationalization();

let dFormatter: Function = intl.getDateFormat({ skeleton: 'yMd', type: 'date' });

(<IWindow>window).formatDate = (date: Date) => dFormatter(date);

let grid: Grid = new Grid({
    dataSource: employeeData,
    rowTemplate: '#rowtemplate',
    columns: [
        { headerText: 'Employee Image', width: 150, textAlign: 'Center', field: 'OrderID' },
        { headerText: 'Employee Details', width: 300, field: 'EmployeeID' }
    ],
    height: 315
});
grid.appendTo('#Grid');

interface IWindow extends Window {
    formatDate?: Function;
}

<!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">Hire Date
                        </td>
                        <td>${formatDate(data.HireDate)}
                        </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>

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.photo img {
  border-radius: 50px;
  box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
  height: 100px;
  width: 100px;
}
    
@media screen and (max-width: 600px) and (min-width: 320px) {
  .photo img {
    height: 50px;
    width: 50px;
}
}
    
@media screen and (max-width: 800px) and (min-width: 600px) {
  .photo img {
    height: 70px;
    width: 70px;
}
}
    
.photo,
.details {
  border-color: #e0e0e0;
  border-style: solid;
}
    
.photo {
  border-width: 1px 0 0 0;
  text-align: center;
}
    
.details {
  border-width: 1px 0 0 0;
  padding-left: 18px;
}

.e-bigger .details {
  padding-left: 25px;
}

.e-device .details {
  padding-left: 8px;
}
    
.details > table {
  width: 100%;
}
    
.CardHeader {
  font-weight: bolder;
}
    
td {
  padding: 2px 2px 3px 4px;
}

Limitations

Row template feature is not compatible with all the features which are available in grid and it has limited features support. Here we have listed out the features which are not compatible with row template feature.

Filtering
Paging
Sorting
Searching
Rtl
Export
Context Menu
State Persistence
Selection
Grouping
Editing
Frozen rows & columns
Virtual & Infinite scrolling
Column chooser
Column menu
Detail Row
Foreignkey column
Resizing
Reordering
Aggregates
Clipboard
Adaptive view

Detail template

The detail template provides additional information about a particular row by expanding or collapsing detail content. The detailTemplate property accepts either the template string or HTML element ID.

To use detail template, inject the DetailRow) module in the grid.

Source

Preview

index.ts

index.html

index.css

import { Grid, DetailRow } from '@syncfusion/ej2-grids';
import { employeeData } from './datasource.ts';

Grid.Inject(DetailRow);

let grid: Grid = new Grid({
dataSource: employeeData,
detailTemplate: '#detailtemplate',
columns: [
    { field: 'FirstName', headerText: 'First Name', width: 140 },
    { field: 'LastName', headerText: 'Last Name', width: 140 },
    { field: 'Title', headerText: 'Title', width: 150 },
    { field: 'Country', headerText: 'Country', 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-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>
  <script id='detailtemplate' type="text/x-template">
    <table class="detailtable" width="100%" >
        <colgroup>
            <col width="35%">
            <col width="35%">
            <col width="30%">
        </colgroup>
        <tbody>
            <tr>
                <td rowspan="4" style="text-align: center;">
                    <img class='photo' src="${EmployeeID}.png" alt="${EmployeeID}" />
                </td>
                <td>
                    <span style="font-weight: 500;">First Name: </span> ${FirstName}
                </td>
                <td>
                    <span style="font-weight: 500;">Postal Code: </span> ${PostalCode}
                </td>
            </tr>
            <tr>                  
                <td>
                    <span style="font-weight: 500;">Last Name: </span> ${LastName}
                </td>
                <td>
                    <span style="font-weight: 500;">City: </span> ${City}
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-weight: 500;">Title: </span> ${Title}
                </td>
                <td>
                    <span style="font-weight: 500;">Phone: </span> ${HomePhone}
                </td>          
            </tr>
            <tr>
                <td>
                    <span style="font-weight: 500;">City: </span> ${City}
                </td>
                <td>
                     <span style="font-weight: 500;">Country: </span> ${Country}
                </td>
            </tr>  
        </tbody>
    </table>
  </script>  
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Grid'></div>        
    </div>
</body>
</html>

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.detailtable td{
  font-size: 13px;
  padding: 4px;                      
  white-space: nowrap;
}

.photo {     
  border-radius: 50px;
  box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
  height: 100px;
  width: 100px;
}
    
@media screen and (max-width: 800px) and (min-width: 320px) {
  .photo {
    height: 70px;
    width: 70px;
  }       
}

Rendering custom component

To render the custom component inside the detail row, define the template in the detailTemplate and render the component in the detailDataBound event.

For example, to render grid inside the detail row, place an HTML div element as the detailTemplate and render the DIV element as grid component in the detailDataBound event.

Source

Preview

index.ts

index.html

import { Grid, DetailRow, DetailDataBoundEventArgs } from '@syncfusion/ej2-grids';
import { employeeData, data } from './datasource.ts';

Grid.Inject(DetailRow);

let grid: Grid = new Grid({
dataSource: employeeData.slice(2, 5),
detailTemplate: '#detailtemplate',
columns: [
    { field: 'FirstName', headerText: 'First Name', width: 140 },
    { field: 'LastName', headerText: 'Last Name', width: 140 },
    { field: 'Title', headerText: 'Title', width: 150 },
    { field: 'Country', headerText: 'Country', width: 150 }
],
detailDataBound: (e: DetailDataBoundEventArgs) => {
    let detail = new Grid({
        dataSource: data.filter((item: Object) => item['EmployeeID'] === e.data['EmployeeID']).slice(0, 3),
        columns: [
            { field: 'OrderID', headerText: 'Order ID', width: 110 },
            { field: 'CustomerID', headerText: 'Customer Name', width: 140 },
            { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
        ]
    });
    detail.appendTo(<HTMLElement>e.detailElement.querySelector('.custom-grid'));
}
});
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='detailtemplate' type="text/x-template">
    <div class='custom-grid'></div>
  </script>  
    <div id='loader'>Loading....</div>
    <div id='container'>    
        <div id='Grid'></div>        
    </div>
</body>
</html>

Expand by external button

By default, detail rows render in collapsed state. You can expand a detail row by invoking the expand method using the external button.

Source

Preview

index.ts

index.html

index.css

import { Grid, DetailRow } from '@syncfusion/ej2-grids';
import { Button } from '@syncfusion/ej2-buttons';
import { employeeData } from './datasource.ts';

Grid.Inject(DetailRow);

let expandBtn: Button = new Button();
expandBtn.appendTo('#expand');

let grid: Grid = new Grid({
dataSource: employeeData,
detailTemplate: '#detailtemplate',
columns: [
    { field: 'FirstName', headerText: 'First Name', width: 140 },
    { field: 'LastName', headerText: 'Last Name', width: 140 },
    { field: 'Title', headerText: 'Title', width: 150 },
    { field: 'Country', headerText: 'Country', width: 150 }
],
height: 260
});
grid.appendTo('#Grid');

document.getElementById('expand').addEventListener('click', () => {
let inputElem: HTMLInputElement = (document.getElementsByClassName('rowindex')[0] as HTMLInputElement);
let rowIndex: number = parseInt(inputElem.value, 10);
grid.detailRowModule.expand(rowIndex);
});

<!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='detailtemplate' type='text/x-template'>
    <table class="detailtable" width="100%" >
        <colgroup>
            <col width="35%">
            <col width="35%">
            <col width="30%">
        </colgroup>
        <tbody>
            <tr>
                <td rowspan="4" style="text-align: center;">
                    <img class='photo' src="${EmployeeID}.png" alt="${EmployeeID}" />
                </td>
                <td>
                    <span style="font-weight: 500;">First Name: </span> ${FirstName}
                </td>
                <td>
                    <span style="font-weight: 500;">Postal Code: </span> ${PostalCode}
                </td>
            </tr>
            <tr>                  
                <td>
                    <span style="font-weight: 500;">Last Name: </span> ${LastName}
                </td>
                <td>
                    <span style="font-weight: 500;">City: </span> ${City}
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-weight: 500;">Title: </span> ${Title}
                </td>
                <td>
                    <span style="font-weight: 500;">Phone: </span> ${HomePhone}
                </td>          
            </tr>
            <tr>
                <td>
                    <span style="font-weight: 500;">City: </span> ${City}
                </td>
                <td>
                     <span style="font-weight: 500;">Country: </span> ${Country}
                </td>
            </tr>  
        </tbody>
    </table>
  </script>  
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class="e-float-input" style="width: 200px; display: inline-block;">
            <input type="text" class="rowindex" value="0" />
            <span class="e-float-line"></span>
            <label class="e-float-text">Row Index</label>
        </div>              
        <button id="expand">Expand</button>        
        <div id='Grid'></div>        
    </div>
</body>
</html>

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.detailtable td{
  font-size: 13px;
  padding: 4px;                      
  white-space: nowrap;
}

.photo {     
  border-radius: 50px;
  box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
  height: 100px;
  width: 100px;
}
    
@media screen and (max-width: 800px) and (min-width: 320px) {
  .photo {
    height: 70px;
    width: 70px;
  }       
}

You can expand all the rows by using expandAll method.

If you want to expand all the rows at initial Grid rendering, then use expandAll method in dataBound event of the Grid.

Drag and drop

The grid row drag and drop allows you to drag and drop grid rows to another grid or custom component. To enable row drag and drop, set the allowRowDragAndDrop to true. The target component where the grid rows are to be dropped can be set by using the targetID.

To use row drag and drop, inject the RowDD module in the grid.

Source

Preview

index.ts

index.html

import { Grid, Page, RowDD, Selection } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';

Grid.Inject(Page, RowDD, Selection);

let grid: Grid = new Grid({
dataSource: data.slice(0, 5),
allowRowDragAndDrop: true,
rowDropSettings: { targetID: 'DestGrid' },
selectionSettings: { type: 'Multiple' },
columns: [
    { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
    { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
    { field: 'ShipCity', headerText: 'Ship City', width: 150 },
    { field: 'ShipName', headerText: 'Ship Name', width: 150 }
]
});
grid.appendTo('#Grid');

let destGrid: Grid = new Grid({
dataSource: [],
allowRowDragAndDrop: true,
rowDropSettings: { targetID: 'Grid' },
selectionSettings: { type: 'Multiple' },
columns: [
    { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
    { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
    { field: 'ShipCity', headerText: 'Ship City', width: 150 },
    { field: 'ShipName', headerText: 'Ship Name', width: 150 }
]
});
destGrid.appendTo('#DestGrid');

<!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 style="display: inline-block">
            <div id="Grid"></div>
            <div id="DestGrid"></div>
        </div>  
    </div>
</body>
</html>

Selection feature must be enabled for row drag and drop.

Multiple rows can be selected by clicking and dragging inside the grid. For multiple row selection, the type property must be set to multiple.

Drag and drop events

The following events are triggered while drag and drop the grid rows.

rowDragStartHelper - Triggers when click the drag icon or grid row and this event is used to customize the drag element based on user criteria.
rowDragStart -Triggers when starts to drag the grid row.
rowDrag - Triggers while dragging the grid row.
rowDrop - Triggers when a drag element is dropped on the target element.

Drag and drop the grid rows to custom component

You can drag and drop the grid rows to any custom component. To enable row drag and drop, set the allowRowDragAndDrop as true and define the custom component id in targetID property of rowDropSettings.

In the below example, the selected grid row is dragged and dropped in to the TreeView component by using rowDrop event. Once the row is dropped into the TreeView component, we have removed the corresponding grid row from grid and its data inserted in custom component. To know more information about the drag and drop events check here.

Source

Preview

index.ts

index.html

import { Grid, Page, RowDD, Selection } from '@syncfusion/ej2-grids';
import { TreeView } from '@syncfusion/ej2-navigations';
import { data } from './datasource.ts';

Grid.Inject(Page, RowDD, Selection);
let hierarchicalData: { [key: string]: Object }[];
let grid: Grid = new Grid({
dataSource: data.slice(0, 5),
allowRowDragAndDrop: true,
rowDropSettings: { targetID: 'tree' },
selectionSettings: { type: 'Multiple' },
columns: [
    { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
    { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
    { field: 'ShipCity', headerText: 'Ship City', width: 150 },
    { field: 'ShipName', headerText: 'Ship Name', width: 150 }
],
rowDrop: function(args:any){
        let currLi: Element = args.target.closest('li');
        let gridData: any = args.data;
        if(currLi !=null && closest(currLi, '.' + 'e-control').classList.contains('e-treeview')){
            if(gridData != null){
                let grid: any = (<any>document.getElementById('Grid')).ej2_instances[0];
                let tree: any = (<any>document.getElementById('tree')).ej2_instances[0];
                for(let i:number = 0, len = gridData.length; i < len; i++){
                    let obj: any = [{ nodeId:gridData[i].OrderID,nodeText:gridData[i].CustomerID }];
                    (grid as any).deleteRow(args.rows[i]);
                    tree.addNodes(obj,currLi);
                }
                args.cancel=true;
            }
        }
    }  
});
grid.appendTo('#Grid');

let treeObj: TreeView = new TreeView({
fields: { dataSource: hierarchicalData, id: 'nodeId', text: 'nodeText',  
        child: 'nodeChild'
    },
});
treeObj.appendTo('#tree');

<!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 style="display: inline-block">
            <div id="Grid"></div> 
            <div id="tree"></div> 
        </div>  
    </div>
</body>
</html>

Drag and drop within Grid

The grid row drag and drop allows you to drag and drop grid rows on the same grid using drag icon. To enable row drag and drop, set the allowRowDragAndDrop to true.

Source

Preview

index.ts

index.html

import { Grid, RowDD, Selection } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';

Grid.Inject(RowDD, Selection);

let grid: Grid = new Grid({
dataSource: data,
allowRowDragAndDrop: true,
heigth:300,
selectionSettings: { type: 'Multiple' },
columns: [
    { field: 'OrderID', headerText: 'Order ID', isPrimaryKey: true, textAlign: 'Right', width: 120 },
    { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
    { field: 'ShipCity', headerText: 'Ship City', width: 150 },
    { field: 'ShipName', headerText: 'Ship Name', width: 150 }
]
});
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 style="display: inline-block">
            <div id="Grid"></div> 
        </div>  
    </div>
</body>
</html>

Multiple rows can be drag and drop in the row selections basis.

Single row is able to drag and drop in same grid without enable the row selection.

Row drag and drop feature is not having built in support with sorting, filtering and grouping features of grid. However we can achieve sorting and filtering behavior by sample side customization which will be explained in the next topic.

Drag and drop with Sorting and Filtering

In the following demo, you can achieve the grid row drag and drop support with filtering and sorting using rowDrop event.

Source

Preview

index.ts

index.html

import { Grid, Page, RowDD, Selection, Filter, Sort } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';

Grid.Inject(Page, RowDD, Selection, Filter, Sort);

let grid: Grid = new Grid({
dataSource: data.slice(0, 10),
allowRowDragAndDrop: true,
selectionSettings: { type: 'Multiple' },
height:300,
allowFiltering:true,
allowSorting:true,
columns: [
    { field: 'OrderID', headerText: 'Order ID', isPrimaryKey: true, textAlign: 'Right', width: 120 },
    { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
    { field: 'ShipCity', headerText: 'Ship City', width: 150 },
    { field: 'ShipName', headerText: 'Ship Name', width: 150 }
],
 rowDrop: function (args: any) {
    let gObj: any = (<any>document.getElementById('Grid')).ej2_instances[0];
    let seletedRowIndexes: number[] = gInstance.getSelectedRowIndexes();
    if (gObj.sortSettings.columns.length > 0 || gObj.filterSettings.columns.length > 0) {
        let startedRow: HTMLTableRowElement = args.rows[0];
        let startRowIndex: number = startedRow.rowIndex;
        if (!args.target) {
            return
        }
        let targetRow: HTMLTableRowElement = args.target.closest('tr');
        let targetRowIndex: number = targetRow.rowIndex;
        gInstance.getContentTable().querySelector('tbody').insertBefore(startedRow, targetRow);

        if (!isNullOrUndefined(targetRow.nextElementSibling)) {
            let currentIndex: number = targetRow.rowIndex;
            if (currentIndex <= startedRow.rowIndex) {
                gObj.getContentTable().querySelector('tbody').insertBefore(startedRow, targetRow);
            } else {
                gObj.getContentTable().querySelector('tbody').insertBefore(startedRow, targetRow.nextElementSibling);
            }
        } else {
            gObj.getContentTable().querySelector('tbody').insertBefore(targetRow, startedRow);
        }

        let startRowObj: any = gObj.getRowObjectFromUID(startedRow.getAttribute('data-uid'));
        let targetRowObj: any = gObj.getRowObjectFromUID(targetRow.getAttribute('data-uid'))
        for (let i: number = 0, len: number = gObj.currentViewData.length; i < len; i++) {
            let getDataByField = gObj.currentViewData[i];
            if (gObj.sortSettings.columns.length > 0 || gObj.filterSettings.columns.length > 0) {
                filteredCurrentViewData = gObj.currentViewData;
                filteredCurrentViewData.splice(targetRowIndex, 0, filteredCurrentViewData.splice(startRowIndex, 1)[0]);
                gObj.rowDragAndDropModule.removeBorder(targetRow);
                gObj.contentModule.refreshContentRows();
                dropSelectedRowIndx.push(targetRowIndex);
                if (gObj.sortSettings.columns.length > 0) {
                    args.cancel = true;
                }
                if (dropSelectedRowIndx.length > 0) {
                    gObj.clearSelection();
                    gObj.selectRows(dropSelectedRowIndx);
                }
                return;
            }
        }
    }
}
  
});
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 style="display: inline-block">
            <div id="Grid"></div> 
        </div>  
    </div>
</body>
</html>

You can enable/disable the drag icon by using disableRowDD method which is achieved in the actionComplete event.

actionComplete: function (args) {
    if (this.filterSettings.columns.length) {
        this.disableRowDD(true);
    }
    else {
        this.disableRowDD(false);
    }
}

Row spanning

The grid has option to span row cells. To achieve this, You need to define the rowSpan attribute to span cells in the QueryCellInfo event.

In the following demo, Davolio cell is spanned to two rows in the EmployeeName column.

Also Grid supports the spanning of rows and columns for same cells. Lunch Break cell is spanned to two rows and three columns in the 1:00 column.

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: '1:00', headerText: '1.00 PM', width: 120 },
            { field: '1:30', headerText: '1.30 PM', width: 120 },
            { field: '2:00', headerText: '2.00 PM', width: 120 },
            { 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: 300,
        allowTextWrap: true
});
grid.appendTo('#Grid');

function QueryCellEvent(args: QueryCellInfoEventArgs): void {
let data: ColumnSpanDataType = args.data as ColumnSpanDataType;
// Prevent the spanning in second page
if (this.pageSettings.currentPage != 2 && (!args.requestType || args.requestType === 'paging')) {
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;
        } else if (args.column.field === 'EmployeeName') {
            args.rowSpan = 2;
        } else if (args.column.field === '1:00') {
            args.colSpan = 3;
            args.rowSpan = 2;
        }
        break;
    case 10002:
        if (args.column.field === '9:30' || args.column.field === '2:30' ||
            args.column.field === '4:30') {
            args.colSpan = 3;
        } else if (args.column.field === '11:00') {
            args.colSpan = 4;
        }
        break;
    case 10003:
        if (args.column.field === '9:00' || args.column.field === '11:30') {
            args.colSpan = 3;
        } else if (args.column.field === '10:30' || args.column.field === '3:30' ||
            args.column.field === '4:30' || args.column.field === '2:30') {
            args.colSpan = 2;
        }
        break;
    case 10004:
        if (args.column.field === '9:00') {
            args.colSpan = 3;
        } else if (args.column.field === '11:00') {
            args.colSpan = 4;
        } else if (args.column.field === '4:00' || args.column.field === '2:30') {
            args.colSpan = 2;
        }
        break;
    case 10005:
        if (args.column.field === '9:00') {
            args.colSpan = 4;
        } else if (args.column.field === '11:30') {
            args.colSpan = 3;
        } else if (args.column.field === '3:30' || args.column.field === '4:30' || args.column.field === '2:30') {
            args.colSpan = 2;
        }
        break;
    case 10006:
        if (args.column.field === '9:00' || args.column.field === '4:30' ||
            args.column.field === '2:30' || args.column.field === '3:30') {
            args.colSpan = 2;
        } else if (args.column.field === '10:00' || args.column.field === '11:30') {
            args.colSpan = 3;
        }
        break;
    case 10007:
        if (args.column.field === '9:00' || args.column.field === '3:00' || args.column.field === '10:30') {
            args.colSpan = 2;
        } else if (args.column.field === '11:30' || args.column.field === '4:00') {
            args.colSpan = 3;
        }
        break;
    case 10008:
        if (args.column.field === '9:00' || args.column.field === '10:30' || args.column.field === '2:30') {
            args.colSpan = 3;
        } else if (args.column.field === '4:00') {
            args.colSpan = 2;
        }
        break;
    case 10009:
        if (args.column.field === '9:00' || args.column.field === '11:30') {
            args.colSpan = 3;
        } else if (args.column.field === '4:30' || args.column.field === '2:30') {
            args.colSpan = 2;
        }
        break;
    case 100010:
        if (args.column.field === '9:00' || args.column.field === '2:30' ||
            args.column.field === '4:00' || args.column.field === '11:30') {
            args.colSpan = 3;
        } else if (args.column.field === '10:30') {
            args.colSpan = 2;
        }
        break;
    }
}
}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
    
    
    
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    
    
    <link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Grid'></div>        
    </div>
</body>
</html>

When paging is enabled in grid, you can disable the rows and columns spanning for any particular page. To achieve this, we need to check requestType as paging <code class='language-text'> string</code> in queryCellInfo event of grid.

Customize rows

You can customize the appearance of a row by using the rowDataBound event. The rowDataBound event triggers for every row. In the event handler, you can get the RowDataBoundEventArgs that contains details of the row.

Source

Preview

index.ts

index.css

index.html

import { Grid, RowDataBoundEventArgs } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';

let grid: Grid = new Grid({
dataSource: data,
enableHover: false,
allowSelection: false,
columns: [
    { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100 },
    { field: 'CustomerID', headerText: 'Customer ID', width: 120 },
    { field: 'ShipCity', headerText: 'Ship City', width: 100 },
    { field: 'Freight', headerText: 'Freight', width: 100, format: 'C2' },
    { field: 'ShipName', headerText: 'Ship Name', width: 100 }
],
rowDataBound: rowBound,
height: 280
});
grid.appendTo('#Grid');

function rowBound(args: RowDataBoundEventArgs) {
if (args.data['Freight'] < 30) {
    args.row.classList.add('below-30');
} else if (args.data['Freight'] < 80) {
    args.row.classList.add('below-80');
} else {
    args.row.classList.add('above-80');
}
}

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.below-30 {
  background-color: orangered;
}

.below-80 {
  background-color: yellow;
} 

.above-80 {
  background-color: greenyellow
}

<!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>

Styling alternate rows

You can change the grid’s alternative rows’ background color by overriding the .e-altrow class.

.e-grid .e-altrow {
background-color: #fafafa;
}

Please refer to the following example.

Source

Preview

index.ts

index.html

import { Grid } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';

let grid: Grid = new Grid({
dataSource: data.slice(0, 8),
columns: [
    { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
    { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
    { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
    { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' }
]
});

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="//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" />
    
    
    <link href="index.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>

Row height

You can customize the row height of grid rows through the rowHeight property. The rowHeight property is used to change the row height of entire grid rows.

In the below example, the rowHeight is set as ‘60px’.

Source

Preview

index.ts

index.css

index.html

import { Grid } from '@syncfusion/ej2-grids';
import { data, RowDataBoundEventArgs } from './datasource.ts';

let grid: Grid = new Grid({
dataSource: data.slice(0, 8),
columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
        { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
        { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' }
],
rowHeight: 60
});

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%;
}

.below-30 {
  background-color: orangered;
}

.below-80 {
  background-color: yellow;
} 

.above-80 {
  background-color: greenyellow
}

<!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>

Customize row height for particular row

Grid row height for particular row can be customized using the rowDataBound event by setting the rowHeight in arguments for each row based on the requirement.

In the below example, the row height for the row with OrderID as ‘10249’ is set as ‘90px’ using the rowDataBound event.

Source

Preview

index.ts

index.css

index.html

import { Grid } from '@syncfusion/ej2-grids';
import { Query, DataManager } from '@syncfusion/ej2-data';
import { data, RowDataBoundEventArgs } from './datasource.ts';

let gridData: Object = new DataManager(data).executeLocal(new Query().take(8));

let grid: Grid = new Grid({
dataSource: gridData,
columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
        { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
        { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' }
],
rowDataBound: rowDataBound
});

function rowDataBound(args: RowDataBoundEventArgs) {
if((args.data as OrderDetails).OrderID === 10249){
    args.rowHeight = 90;
}
}

interface OrderDetails {
OrderID ?: number;
}

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%;
}

.below-30 {
  background-color: orangered;
}

.below-80 {
  background-color: yellow;
} 

.above-80 {
  background-color: greenyellow
}

<!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>

In virtual scrolling mode, it is not applicable to set the rowHeight using the rowDataBound event.

Contents

Row template
Row template with formatting
Limitations
Detail template
Rendering custom component
Expand by external button
Drag and drop
Drag and drop events
Drag and drop the grid rows to custom component
Drag and drop within Grid
Drag and drop with Sorting and Filtering
Row spanning
Customize rows
Styling alternate rows
Row height
Customize row height for particular row

Contents

Row template
Row template with formatting
Limitations
Detail template
Rendering custom component
Expand by external button
Drag and drop
Drag and drop events
Drag and drop the grid rows to custom component
Drag and drop within Grid
Drag and drop with Sorting and Filtering
Row spanning
Customize rows
Styling alternate rows
Row height
Customize row height for particular row

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!