Search results

Row

It represents the record details that are fetched from the datasource.

Drag and Drop

The Grid Row drag and drop allows you to drag grid rows and drop to another Grid or custom component. To enable Row drag and drop in the Grid, set the allowRowDragAndDrop to true. The target component on which the Grid rows to be dropped can be set by using targetID.

To use Row Drag and Drop, You need to inject RowDD module in Grid.

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GridComponent, Inject, RowDD, Selection, ColumnsDirective, ColumnDirective,
RowDropSettingsModel, SelectionSettingsModel } from '@syncfusion/ej2-react-grids';
import { data } from '../datasource.ts';

class Source extends React.Component<{}, {}>{
    public data: Object[] = data.slice(0, 5);
    public rowDropSettings: RowDropSettingsModel = { targetID: 'DestGrid' };
    public selectionSettings: SelectionSettingsModel = { type: 'Multiple' };
    public style = { marginBottom: '20px' };
    render() {
        return <GridComponent id="Grid" dataSource={this.data} allowRowDragAndDrop={true} rowDropSettings={this.rowDropSettings} selectionSettings={this.selectionSettings}
        style={this.style}>
                <Inject services={[RowDD, Selection]}></Inject>
                <ColumnsDirective>
                 <ColumnDirective field='OrderID' width='120' textAlign="Right"></ColumnDirective>
                 <ColumnDirective field='CustomerID' width='150'></ColumnDirective>
                 <ColumnDirective field='ShipCity' width='100'></ColumnDirective>
                 <ColumnDirective field='ShipName' width='150'></ColumnDirective>
                </ColumnsDirective>
               </GridComponent>
    }
}

class Target extends React.Component<{}, {}>{
    public data: Object[] = [];
    public rowDropSettings: RowDropSettingsModel = { targetID: 'Grid' };
    public selectionSettings: SelectionSettingsModel = { type: 'multiple' };
    render() {
        return <GridComponent id="DestGrid" dataSource={this.data} allowRowDragAndDrop={true} rowDropSettings={this.rowDropSettings} selectionSettings={this.selectionSettings}>
                <Inject services={[RowDD, Selection]}></Inject>
                <ColumnsDirective>
                 <ColumnDirective field='OrderID' width='120' textAlign="Right"></ColumnDirective>
                 <ColumnDirective field='CustomerID' width='150'></ColumnDirective>
                 <ColumnDirective field='ShipCity' width='100'></ColumnDirective>
                 <ColumnDirective field='ShipName' width='150'></ColumnDirective>
                </ColumnsDirective>
               </GridComponent>
    }
}

function App(){
    return <div>
            <Source></Source>
            <Target></Target>
           </div>
}

ReactDOM.render(<App />, document.getElementById('grid'));
  • 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.

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.tsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Grid, GridComponent, ColumnsDirective, ColumnDirective, QueryCellInfoEventArgs } from '@syncfusion/ej2-react-grids';
import { columnSpanData, ColumnSpanDataType } from './datasource';

class App extends React.Component<{}, {}>{
    public queryCellInfoEvent = (args: QueryCellInfoEventArgs) => {
    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;
            } 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;
        }
    };
    render() {
        return (<div>
        <GridComponent dataSource={columnSpanData} height={300} width='auto' queryCellInfo={this.queryCellInfoEvent.bind(this)} gridLines='Both' allowTextWrap={true}>
            <ColumnsDirective>
                <ColumnDirective field='EmployeeID' headerText='Employee ID' width='150' isPrimaryKey={true} textAlign='Right'></ColumnDirective>
                <ColumnDirective field='EmployeeName' headerText='Employee Name' width='200' ></ColumnDirective>
                <ColumnDirective field='9:00' headerText='9:00 AM' width='120'></ColumnDirective>
                <ColumnDirective field='9:30' headerText='9:30 AM' width='120'></ColumnDirective>
                <ColumnDirective field='10:00' headerText='10:00 AM' width='120'></ColumnDirective>
                <ColumnDirective field='10:30' headerText='10:30 AM' width='120'></ColumnDirective>
                <ColumnDirective field='11:00' headerText='11:00 AM' width='120'></ColumnDirective>
                <ColumnDirective field='11:30' headerText='11:30 AM' width='120'></ColumnDirective>
                <ColumnDirective field='12:00' headerText='12:00 PM' width='120'></ColumnDirective>
                <ColumnDirective field='12:30' headerText='12:30 PM' width='120'></ColumnDirective>
                <ColumnDirective field='1:00' headerText='1:00 PM' width='120'></ColumnDirective>
                <ColumnDirective field='1:30' headerText='1:30 PM' width='120'></ColumnDirective>
                <ColumnDirective field='2:00' headerText='2:00 PM' width='120'></ColumnDirective>
                <ColumnDirective field='2:30' headerText='2:30 PM' width='120'></ColumnDirective>
                <ColumnDirective field='3:00' headerText='3:00 PM' width='120'></ColumnDirective>
                <ColumnDirective field='3:30' headerText='3:30 PM' width='120'></ColumnDirective>
                <ColumnDirective field='4:00' headerText='4:00 PM' width='120'></ColumnDirective>
                <ColumnDirective field='4:30' headerText='4:30 PM' width='120'></ColumnDirective>
                <ColumnDirective field='5:00' headerText='5:00 PM' width='120'></ColumnDirective>
            </ColumnsDirective>
        </GridComponent>
        </div>)
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));
export interface ColumnSpanDataType {
    EmployeeID: number;
    EmployeeName: string;
    '9:00': string;
    '9:30': string;
    '10:00': string;
    '10:30': string;
    '11:00': string;
    '11:30': string;
    '12:00': string;
    '12:30': string;
    '1:00': string;
    '1:30': string;
    '2:00': string;
    '2:30': string;
    '3:00': string;
    '3:30': string;
    '4:00': string;
    '4:30': string;
    '5:00': string;
}

export let columnSpanData: ColumnSpanDataType[] = [
    {
        EmployeeID: 10001,
        EmployeeName: 'Davolio',
        '9:00': 'Analysis Tasks',
        '9:30': 'Analysis Tasks',
        '10:00': 'Team Meeting',
        '10:30': 'Testing',
        '11:00': 'Development',
        '11:30': 'Development',
        '12:00': 'Development',
        '12:30': 'Support',
        '1:00': 'Lunch Break',
        '1:30': 'Lunch Break',
        '2:00': 'Lunch Break',
        '2:30': 'Testing',
        '3:00': 'Testing',
        '3:30': 'Development',
        '4:00': 'Conference',
        '4:30': 'Team Meeting',
        '5:00': 'Team Meeting'
    },
    {
        EmployeeID: 10002,
        EmployeeName: 'Buchanan',
        '9:00': 'Task Assign',
        '9:30': 'Support',
        '10:00': 'Support',
        '10:30': 'Support',
        '11:00': 'Testing',
        '11:30': 'Testing',
        '12:00': 'Testing',
        '12:30': 'Testing',
        '1:00': 'Lunch Break',
        '1:30': 'Lunch Break',
        '2:00': 'Lunch Break',
        '2:30': 'Development',
        '3:00': 'Development',
        '3:30': 'Check Mail',
        '4:00': 'Check Mail',
        '4:30': 'Team Meeting',
        '5:00': 'Team Meeting'
    },
    {
        EmployeeID: 10003,
        EmployeeName: 'Fuller',
        '9:00': 'Check Mail',
        '9:30': 'Check Mail',
        '10:00': 'Check Mail',
        '10:30': 'Analysis Tasks',
        '11:00': 'Analysis Tasks',
        '11:30': 'Support',
        '12:00': 'Support',
        '12:30': 'Support',
        '1:00': 'Lunch Break',
        '1:30': 'Lunch Break',
        '2:00': 'Lunch Break',
        '2:30': 'Development',
        '3:00': 'Development',
        '3:30': 'Team Meeting',
        '4:00': 'Team Meeting',
        '4:30': 'Development',
        '5:00': 'Development'
    },
    {
        EmployeeID: 10004,
        EmployeeName: 'Leverling',
        '9:00': 'Testing',
        '9:30': 'Check Mail',
        '10:00': 'Check Mail',
        '10:30': 'Support',
        '11:00': 'Testing',
        '11:30': 'Testing',
        '12:00': 'Testing',
        '12:30': 'Testing',
        '1:00': 'Lunch Break',
        '1:30': 'Lunch Break',
        '2:00': 'Lunch Break',
        '2:30': 'Development',
        '3:00': 'Development',
        '3:30': 'Check Mail',
        '4:00': 'Conference',
        '4:30': 'Conference',
        '5:00': 'Team Meeting'
    },
    {
        EmployeeID: 10005,
        EmployeeName: 'Peacock',
        '9:00': 'Task Assign',
        '9:30': 'Task Assign',
        '10:00': 'Task Assign',
        '10:30': 'Task Assign',
        '11:00': 'Check Mail',
        '11:30': 'Support',
        '12:00': 'Support',
        '12:30': 'Support',
        '1:00': 'Lunch Break',
        '1:30': 'Lunch Break',
        '2:00': 'Lunch Break',
        '2:30': 'Development',
        '3:00': 'Development',
        '3:30': 'Team Meeting',
        '4:00': 'Team Meeting',
        '4:30': 'Testing',
        '5:00': 'Testing'
    },
    {
        EmployeeID: 10006,
        EmployeeName: 'Janet',
        '9:00': 'Testing',
        '9:30': 'Testing',
        '10:00': 'Support',
        '10:30': 'Support',
        '11:00': 'Support',
        '11:30': 'Team Meeting',
        '12:00': 'Team Meeting',
        '12:30': 'Team Meeting',
        '1:00': 'Lunch Break',
        '1:30': 'Lunch Break',
        '2:00': 'Lunch Break',
        '2:30': 'Development',
        '3:00': 'Development',
        '3:30': 'Team Meeting',
        '4:00': 'Team Meeting',
        '4:30': 'Development',
        '5:00': 'Development'
    },
    {
        EmployeeID: 10007,
        EmployeeName: 'Suyama',
        '9:00': 'Analysis Tasks',
        '9:30': 'Analysis Tasks',
        '10:00': 'Testing',
        '10:30': 'Development',
        '11:00': 'Development',
        '11:30': 'Testing',
        '12:00': 'Testing',
        '12:30': 'Testing',
        '1:00': 'Lunch Break',
        '1:30': 'Lunch Break',
        '2:00': 'Lunch Break',
        '2:30': 'Support',
        '3:00': 'Build',
        '3:30': 'Build',
        '4:00': 'Check Mail',
        '4:30': 'Check Mail',
        '5:00': 'Check Mail'
    },
    {
        EmployeeID: 10008,
        EmployeeName: 'Robert',
        '9:00': 'Task Assign',
        '9:30': 'Task Assign',
        '10:00': 'Task Assign',
        '10:30': 'Development',
        '11:00': 'Development',
        '11:30': 'Development',
        '12:00': 'Testing',
        '12:30': 'Support',
        '1:00': 'Lunch Break',
        '1:30': 'Lunch Break',
        '2:00': 'Lunch Break',
        '2:30': 'Check Mail',
        '3:00': 'Check Mail',
        '3:30': 'Check Mail',
        '4:00': 'Team Meeting',
        '4:30': 'Team Meeting',
        '5:00': 'Build'
    },
    {
        EmployeeID: 10009,
        EmployeeName: 'Andrew',
        '9:00': 'Check Mail',
        '9:30': 'Team Meeting',
        '10:00': 'Team Meeting',
        '10:30': 'Support',
        '11:00': 'Testing',
        '11:30': 'Development',
        '12:00': 'Development',
        '12:30': 'Development',
        '1:00': 'Lunch Break',
        '1:30': 'Lunch Break',
        '2:00': 'Lunch Break',
        '2:30': 'Check Mail',
        '3:00': 'Check Mail',
        '3:30': 'Check Mail',
        '4:00': 'Team Meeting',
        '4:30': 'Development',
        '5:00': 'Development'
    },
    {
        EmployeeID: 10010,

        EmployeeName: 'Michael',
        '9:00': 'Task Assign',
        '9:30': 'Task Assign',
        '10:00': 'Task Assign',
        '10:30': 'Analysis Tasks',
        '11:00': 'Analysis Tasks',
        '11:30': 'Development',
        '12:00': 'Development',
        '12:30': 'Development',
        '1:00': 'Lunch Break',
        '1:30': 'Lunch Break',
        '2:00': 'Lunch Break',
        '2:30': 'Testing',
        '3:00': 'Testing',
        '3:30': 'Testing',
        '4:00': 'Build',
        '4:30': 'Build',
        '5:00': 'Build'
    }
];
  • To disable the spanning for particular grid page, we need to use requestType from QueryCellInfo event argument.

Customize Rows

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

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Grid, GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import { data } from '../datasource.ts';

class App extends React.Component<{}, {}>{
    public rowDataBound(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');
        }
    }
    render() {
        return (<div>
        <GridComponent dataSource={data} height={315} enableHover={false} allowSelection={false} rowDataBound={this.rowDataBound.bind(this)}>
            <ColumnsDirective>
                <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='CustomerID' headerText='Customer ID' width='100'></ColumnDirective>
                <ColumnDirective field='EmployeeID' headerText='Employee ID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'></ColumnDirective>
            </ColumnsDirective>
        </GridComponent>
        </div>)
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));

Styling alternate row

Grid alternative rows has .e-altrow class, you can change alternative background color by overriding this class.

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

Please refer the following example.

Source
Preview
index.tsx
index.html
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Page } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    render() {
        return <GridComponent dataSource={data} allowPaging={true} pageSettings={ { pageSize: 7 } }>
            <ColumnsDirective>
                <ColumnDirective field='OrderID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='CustomerID' width='100'></ColumnDirective>
                <ColumnDirective field='EmployeeID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"></ColumnDirective>
                <ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Page]} />
        </GridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    
    
    <link href="//cdn.syncfusion.com/ej2/ej2-react-splitbuttons/styles/material.css" rel="stylesheet" />
    
    
    <link href="//cdn.syncfusion.com/ej2/ej2-react-grids/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
		.e-grid .e-altrow {
            background-color: #fafafa;
        }
    </style>
</head>

<body>
        <div id='loader'>Loading....</div>
        <div id='grid'></div>
</body>

</html>