Search results

Column Spanning in React Grid component

18 May 2022 / 3 minutes to read

Grid has option to span the adjacent cells. You need to define colSpan attribute to span the cells in queryCellInfo event.

In the following demo, Employee Davolio doing analysis from 9.00 AM to 10.00 AM, so that cells have spanned.

Source
Preview
App.jsx
datasource.jsx
ColumnSpanDataType.jsx
App.tsx
datasource.tsx
ColumnSpanDataType.tsx
Copied to clipboard
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { columnSpanData } from './datasource';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.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;
            }
        };
    }
    render() {
        this.queryCellInfoEvent = this.queryCellInfoEvent.bind(this);
        return (<div className='control-pane'>
            <div className='control-section'>
                <GridComponent dataSource={columnSpanData} queryCellInfo={this.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>);
    }
}
;
Copied to clipboard
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'
    }
];
Copied to clipboard
Copied to clipboard
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';

export default class App extends React.Component<{}, {}>{
  public 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;
    }
};
public render() {
    this.queryCellInfoEvent = this.queryCellInfoEvent.bind(this);
    return (
        <div className='control-pane'>
            <div className='control-section'>
                <GridComponent dataSource={columnSpanData} queryCellInfo={this.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>
    )
}
};
Copied to clipboard
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'
    }
];
Copied to clipboard
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;
}