Column spanning in React Grid component
16 Feb 202424 minutes to read
The column spanning feature in the Syncfusion Grid allows you to merge adjacent cells horizontally, creating a visually appealing and informative layout. By defining the colSpan attribute in the QueryCellInfo event, you can easily span cells and customize the appearance of the grid.
In the following demo, Employee Davolio doing analysis from 9.00 AM to 10.00 AM, so that cells have spanned.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { columnSpanData } from './datasource';
function App() {
const queryCellInfoEvent = (args) => {
const col = args.column;
const data = args.data;
switch (data.EmployeeID) {
case 10001:
if (col.field === '9:00' || col.field === '2:30' || col.field === '4:30') {
args.colSpan = 2;
}
else if (col.field === '11:00') {
args.colSpan = 3;
}
break;
case 10002:
if (col.field === '9:30' || col.field === '2:30' ||
col.field === '4:30') {
args.colSpan = 3;
}
else if (col.field === '11:00') {
args.colSpan = 4;
}
break;
case 10003:
if (col.field === '9:00' || col.field === '11:30') {
args.colSpan = 3;
}
else if (col.field === '10:30' || col.field === '3:30' ||
col.field === '4:30' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 10004:
if (col.field === '9:00') {
args.colSpan = 3;
}
else if (col.field === '11:00') {
args.colSpan = 4;
}
else if (col.field === '4:00' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 10005:
if (col.field === '9:00') {
args.colSpan = 4;
}
else if (col.field === '11:30') {
args.colSpan = 3;
}
else if (col.field === '3:30' || col.field === '4:30' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 10006:
if (col.field === '9:00' || col.field === '4:30' ||
col.field === '2:30' || col.field === '3:30') {
args.colSpan = 2;
}
else if (col.field === '10:00' || col.field === '11:30') {
args.colSpan = 3;
}
break;
case 10007:
if (col.field === '9:00' || col.field === '3:00' || col.field === '10:30') {
args.colSpan = 2;
}
else if (col.field === '11:30' || col.field === '4:00') {
args.colSpan = 3;
}
break;
case 10008:
if (col.field === '9:00' || col.field === '10:30' || col.field === '2:30') {
args.colSpan = 3;
}
else if (col.field === '4:00') {
args.colSpan = 2;
}
break;
case 10009:
if (col.field === '9:00' || col.field === '11:30') {
args.colSpan = 3;
}
else if (col.field === '4:30' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 100010:
if (col.field === '9:00' || col.field === '2:30' ||
col.field === '4:00' || col.field === '11:30') {
args.colSpan = 3;
}
else if (col.field === '10:30') {
args.colSpan = 2;
}
break;
}
};
return (<div className='control-pane'>
<div className='control-section'>
<GridComponent dataSource={columnSpanData} queryCellInfo={queryCellInfoEvent} allowTextWrap={true} height='auto' width='auto' gridLines='Both'>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='150' textAlign='Right'/>
<ColumnDirective field='EmployeeName' headerText='Employee Name' width='200'/>
<ColumnDirective field='9:00' headerText='9:00 AM' width='120'/>
<ColumnDirective field='9:30' headerText='9:30 AM' width='120'/>
<ColumnDirective field='10:00' headerText='10:00 AM' width='120'/>
<ColumnDirective field='10:30' headerText='10:30 AM' width='120'/>
<ColumnDirective field='11:00' headerText='11:00 AM' width='120'/>
<ColumnDirective field='11:30' headerText='11:30 AM' width='120'/>
<ColumnDirective field='12:00' headerText='12:00 PM' width='120'/>
<ColumnDirective field='12:30' headerText='12:30 PM' width='120'/>
<ColumnDirective field='2:30' headerText='2:30 PM' width='120'/>
<ColumnDirective field='3:00' headerText='3:00 PM' width='120'/>
<ColumnDirective field='3:30' headerText='3:30 PM' width='120'/>
<ColumnDirective field='4:00' headerText='4:00 PM' width='120'/>
<ColumnDirective field='4:30' headerText='4:30 PM' width='120'/>
<ColumnDirective field='5:00' headerText='5:00 PM' width='120'/>
</ColumnsDirective>
</GridComponent>
</div>
</div>);
}
;
export default App;import { Column, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { QueryCellInfoEventArgs } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { IColumnSpanDataType } from './colspanDataType';
import { columnSpanData } from './datasource';
function App() {
const queryCellInfoEvent = (args: QueryCellInfoEventArgs) => {
const col: Column = args.column as Column;
const data: IColumnSpanDataType = args.data as IColumnSpanDataType;
switch (data.EmployeeID) {
case 10001:
if (col.field === '9:00' || col.field === '2:30' || col.field === '4:30') {
args.colSpan = 2;
} else if (col.field === '11:00') {
args.colSpan = 3;
}
break;
case 10002:
if (col.field === '9:30' || col.field === '2:30' ||
col.field === '4:30') {
args.colSpan = 3;
} else if (col.field === '11:00') {
args.colSpan = 4;
}
break;
case 10003:
if (col.field === '9:00' || col.field === '11:30') {
args.colSpan = 3;
} else if (col.field === '10:30' || col.field === '3:30' ||
col.field === '4:30' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 10004:
if (col.field === '9:00') {
args.colSpan = 3;
} else if (col.field === '11:00') {
args.colSpan = 4;
} else if (col.field === '4:00' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 10005:
if (col.field === '9:00') {
args.colSpan = 4;
} else if (col.field === '11:30') {
args.colSpan = 3;
} else if (col.field === '3:30' || col.field === '4:30' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 10006:
if (col.field === '9:00' || col.field === '4:30' ||
col.field === '2:30' || col.field === '3:30') {
args.colSpan = 2;
} else if (col.field === '10:00' || col.field === '11:30') {
args.colSpan = 3;
}
break;
case 10007:
if (col.field === '9:00' || col.field === '3:00' || col.field === '10:30') {
args.colSpan = 2;
} else if (col.field === '11:30' || col.field === '4:00') {
args.colSpan = 3;
}
break;
case 10008:
if (col.field === '9:00' || col.field === '10:30' || col.field === '2:30') {
args.colSpan = 3;
} else if (col.field === '4:00') {
args.colSpan = 2;
}
break;
case 10009:
if (col.field === '9:00' || col.field === '11:30') {
args.colSpan = 3;
} else if (col.field === '4:30' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 100010:
if (col.field === '9:00' || col.field === '2:30' ||
col.field === '4:00' || col.field === '11:30') {
args.colSpan = 3;
} else if (col.field === '10:30') {
args.colSpan = 2;
}
break;
}
};
return (<div className='control-pane'>
<div className='control-section'>
<GridComponent dataSource={columnSpanData} queryCellInfo={queryCellInfoEvent} allowTextWrap={true} height='auto' width='auto' gridLines='Both' >
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='150' textAlign='Right' />
<ColumnDirective field='EmployeeName' headerText='Employee Name' width='200' />
<ColumnDirective field='9:00' headerText='9:00 AM' width='120' />
<ColumnDirective field='9:30' headerText='9:30 AM' width='120' />
<ColumnDirective field='10:00' headerText='10:00 AM' width='120' />
<ColumnDirective field='10:30' headerText='10:30 AM' width='120' />
<ColumnDirective field='11:00' headerText='11:00 AM' width='120' />
<ColumnDirective field='11:30' headerText='11:30 AM' width='120' />
<ColumnDirective field='12:00' headerText='12:00 PM' width='120' />
<ColumnDirective field='12:30' headerText='12:30 PM' width='120' />
<ColumnDirective field='2:30' headerText='2:30 PM' width='120' />
<ColumnDirective field='3:00' headerText='3:00 PM' width='120' />
<ColumnDirective field='3:30' headerText='3:30 PM' width='120' />
<ColumnDirective field='4:00' headerText='4:00 PM' width='120' />
<ColumnDirective field='4:30' headerText='4:30 PM' width='120' />
<ColumnDirective field='5:00' headerText='5:00 PM' width='120' />
</ColumnsDirective>
</GridComponent>
</div>
</div>)
};
export default App;export {};export interface IColumnSpanDataType {
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 = [
{
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'
}
];import {IColumnSpanDataType} from './ColumnSpanDataType';
export let columnSpanData: IColumnSpanDataType[] = [
{
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'
}
];Change the border color while column spanning
You can change the border color for the spanned cells by the using QueryCellInfo event. This event triggers before the cell element is appended to the Grid element.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { columnSpanData } from './datasource';
function App() {
const queryCellInfoEvent = (args) => {
const col = args.column;
const data = args.data;
switch (data.EmployeeID) {
case 10001:
if (col.field === '9:00' || col.field === '2:30' || col.field === '4:30') {
args.colSpan = 2;
} else if (col.field === '11:00') {
args.colSpan = 3;
}
break;
case 10002:
if (col.field === '9:30' || col.field === '2:30' ||
col.field === '4:30') {
args.colSpan = 3;
} else if (col.field === '11:00') {
args.colSpan = 4;
}
break;
case 10003:
if (col.field === '9:00' || col.field === '11:30') {
args.colSpan = 3;
} else if (col.field === '10:30' || col.field === '3:30' ||
col.field === '4:30' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 10004:
if (col.field === '9:00') {
args.colSpan = 3;
} else if (col.field === '11:00') {
args.colSpan = 4;
} else if (col.field === '4:00' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 10005:
if (col.field === '9:00') {
args.colSpan = 4;
} else if (col.field === '11:30') {
args.colSpan = 3;
} else if (col.field === '3:30' || col.field === '4:30' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 10006:
if (col.field === '9:00' || col.field === '4:30' ||
col.field === '2:30' || col.field === '3:30') {
args.colSpan = 2;
} else if (col.field === '10:00' || col.field === '11:30') {
args.colSpan = 3;
}
break;
case 10007:
if (col.field === '9:00' || col.field === '3:00' || col.field === '10:30') {
args.colSpan = 2;
} else if (col.field === '11:30' || col.field === '4:00') {
args.colSpan = 3;
}
break;
case 10008:
if (col.field === '9:00' || col.field === '10:30' || col.field === '2:30') {
args.colSpan = 3;
} else if (col.field === '4:00') {
args.colSpan = 2;
}
break;
default:
extendQueryCellEvent(args, data.EmployeeID);
}
if (args.colSpan > 1) {
args.cell.style.border = '1px solid red';
}
};
const extendQueryCellEvent = ((args, value) => {
const col = args.column;
switch (value) {
case 10009:
if (col.field === '9:00' || col.field === '11:30') {
args.colSpan = 3;
} else if (col.field === '4:30' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 100010:
if (col.field === '9:00' || col.field === '2:30' ||
col.field === '4:00' || col.field === '11:30') {
args.colSpan = 3;
} else if (col.field === '10:30') {
args.colSpan = 2;
}
break;
}
})
return (<div className='control-pane'>
<div className='control-section'>
<GridComponent dataSource={columnSpanData} queryCellInfo={queryCellInfoEvent} allowTextWrap={true} height='auto' width='auto' gridLines='Both' >
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='150' textAlign='Right' />
<ColumnDirective field='EmployeeName' headerText='Employee Name' width='200' />
<ColumnDirective field='9:00' headerText='9:00 AM' width='120' />
<ColumnDirective field='9:30' headerText='9:30 AM' width='120' />
<ColumnDirective field='10:00' headerText='10:00 AM' width='120' />
<ColumnDirective field='10:30' headerText='10:30 AM' width='120' />
<ColumnDirective field='11:00' headerText='11:00 AM' width='120' />
<ColumnDirective field='11:30' headerText='11:30 AM' width='120' />
<ColumnDirective field='12:00' headerText='12:00 PM' width='120' />
<ColumnDirective field='12:30' headerText='12:30 PM' width='120' />
<ColumnDirective field='2:30' headerText='2:30 PM' width='120' />
<ColumnDirective field='3:00' headerText='3:00 PM' width='120' />
<ColumnDirective field='3:30' headerText='3:30 PM' width='120' />
<ColumnDirective field='4:00' headerText='4:00 PM' width='120' />
<ColumnDirective field='4:30' headerText='4:30 PM' width='120' />
<ColumnDirective field='5:00' headerText='5:00 PM' width='120' />
</ColumnsDirective>
</GridComponent>
</div>
</div>)
};
export default App;import { Column, ColumnDirective, ColumnsDirective, GridComponent, Inject, Page } from '@syncfusion/ej2-react-grids';
import { QueryCellInfoEventArgs } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { IColumnSpanDataType } from './ColumnSpanDataType';
import { columnSpanData } from './datasource';
function App() {
const queryCellInfoEvent = (args: QueryCellInfoEventArgs) => {
const col: Column = args.column as Column;
const data: IColumnSpanDataType = args.data as IColumnSpanDataType;
switch (data.EmployeeID) {
case 10001:
if (col.field === '9:00' || col.field === '2:30' || col.field === '4:30') {
args.colSpan = 2;
} else if (col.field === '11:00') {
args.colSpan = 3;
}
break;
case 10002:
if (col.field === '9:30' || col.field === '2:30' ||
col.field === '4:30') {
args.colSpan = 3;
} else if (col.field === '11:00') {
args.colSpan = 4;
}
break;
case 10003:
if (col.field === '9:00' || col.field === '11:30') {
args.colSpan = 3;
} else if (col.field === '10:30' || col.field === '3:30' ||
col.field === '4:30' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 10004:
if (col.field === '9:00') {
args.colSpan = 3;
} else if (col.field === '11:00') {
args.colSpan = 4;
} else if (col.field === '4:00' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 10005:
if (col.field === '9:00') {
args.colSpan = 4;
} else if (col.field === '11:30') {
args.colSpan = 3;
} else if (col.field === '3:30' || col.field === '4:30' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 10006:
if (col.field === '9:00' || col.field === '4:30' ||
col.field === '2:30' || col.field === '3:30') {
args.colSpan = 2;
} else if (col.field === '10:00' || col.field === '11:30') {
args.colSpan = 3;
}
break;
case 10007:
if (col.field === '9:00' || col.field === '3:00' || col.field === '10:30') {
args.colSpan = 2;
} else if (col.field === '11:30' || col.field === '4:00') {
args.colSpan = 3;
}
break;
case 10008:
if (col.field === '9:00' || col.field === '10:30' || col.field === '2:30') {
args.colSpan = 3;
} else if (col.field === '4:00') {
args.colSpan = 2;
}
break;
default:
extendQueryCellEvent(args, data.EmployeeID);
}
if ((args.colSpan as number) > 1) {
(args.cell as HTMLElement).style.border = '1px solid red';
}
};
const extendQueryCellEvent = ((args: QueryCellInfoEventArgs, value: number) => {
const col: Column = args.column as Column;
switch (value) {
case 10009:
if (col.field === '9:00' || col.field === '11:30') {
args.colSpan = 3;
} else if (col.field === '4:30' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 100010:
if (col.field === '9:00' || col.field === '2:30' ||
col.field === '4:00' || col.field === '11:30') {
args.colSpan = 3;
} else if (col.field === '10:30') {
args.colSpan = 2;
}
break;
}
})
return (<div className='control-pane'>
<div className='control-section'>
<GridComponent dataSource={columnSpanData} queryCellInfo={queryCellInfoEvent} allowTextWrap={true} height='auto' width='auto' gridLines='Both' >
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='150' textAlign='Right' />
<ColumnDirective field='EmployeeName' headerText='Employee Name' width='200' />
<ColumnDirective field='9:00' headerText='9:00 AM' width='120' />
<ColumnDirective field='9:30' headerText='9:30 AM' width='120' />
<ColumnDirective field='10:00' headerText='10:00 AM' width='120' />
<ColumnDirective field='10:30' headerText='10:30 AM' width='120' />
<ColumnDirective field='11:00' headerText='11:00 AM' width='120' />
<ColumnDirective field='11:30' headerText='11:30 AM' width='120' />
<ColumnDirective field='12:00' headerText='12:00 PM' width='120' />
<ColumnDirective field='12:30' headerText='12:30 PM' width='120' />
<ColumnDirective field='2:30' headerText='2:30 PM' width='120' />
<ColumnDirective field='3:00' headerText='3:00 PM' width='120' />
<ColumnDirective field='3:30' headerText='3:30 PM' width='120' />
<ColumnDirective field='4:00' headerText='4:00 PM' width='120' />
<ColumnDirective field='4:30' headerText='4:30 PM' width='120' />
<ColumnDirective field='5:00' headerText='5:00 PM' width='120' />
</ColumnsDirective>
</GridComponent>
</div>
</div>)
};
export default App;export {};export interface IColumnSpanDataType {
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 = [
{
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'
}
];import {IColumnSpanDataType} from './ColumnSpanDataType';
export let columnSpanData: IColumnSpanDataType[] = [
{
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'
}
];Limitations
- The updateCell method does not support column spanning.
- Column spanning is not compatible with the following features:
- Virtual scrolling
- Infinite scrolling
- Grouping
- Autofill