HelpBot Assistant

How can I help you?

Column spanning in React Grid component

14 Feb 202624 minutes to read

Column spanning merges adjacent cells with identical values horizontally, producing a cleaner and more structured layout. This feature reduces duplication in consecutive cells, highlights grouped information, and improves readability by presenting related data in a compact form. Reports and tabular views become easier to interpret when repetitive values are visually combined into a single spanned cell.

The enableColumnSpan property, when set to true, activates automatic merging of adjacent cells with identical values. This removes the need for manual configuration and results in a cleaner layout where merged cells highlight patterns and relationships within the data.

import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Inject } from '@syncfusion/ej2-react-grids';
import { Freeze, Sort } from '@syncfusion/ej2-react-grids';
import { shiftPlanData } from './datasource';

function App() {
  const doctorTemplate = (props) => (
    <div>
      <div className="doctor-name">{props.Name}</div>
      <div className="doctor-designation">{props.Designation}</div>
    </div>
  );

  return (
    <GridComponent dataSource={shiftPlanData} gridLines="Both" allowSorting={true} enableColumnSpan={true} allowTextWrap={true} textWrapSettings= height={450} width="auto" >
      <ColumnsDirective>
        <ColumnDirective field="Name" headerText="Doctor Name" width={170} textAlign="Center" freeze="Left" template={doctorTemplate} />
        <ColumnDirective field="Time9AM" headerText="9:00 AM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time10AM" headerText="10:00 AM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time11AM" headerText="11:00 AM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time12PM" headerText="12:00 PM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time1PM" headerText="1:00 PM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time2PM" headerText="2:00 PM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time3PM" headerText="3:00 PM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time4PM" headerText="4:00 PM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time5PM" headerText="5:00 PM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time6PM" headerText="6:00 PM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time7PM" headerText="7:00 PM" width={120} textAlign="Center" allowSorting={false} />
      </ColumnsDirective>
      <Inject services={[Freeze, Sort]} />
    </GridComponent>
  );
}

export default App;
import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Inject } from '@syncfusion/ej2-react-grids';
import { Freeze, Sort } from '@syncfusion/ej2-react-grids';
import { shiftPlanData } from './datasource';

function App() {
  const doctorTemplate = (props: any) => (
    <div>
      <div className="doctor-name">{props.Name}</div>
      <div className="doctor-designation">{props.Designation}</div>
    </div>
  );

  return (
    <GridComponent dataSource={shiftPlanData} gridLines="Both" allowSorting={true} enableColumnSpan={true} allowTextWrap={true} textWrapSettings= height={450} width="auto" >
      <ColumnsDirective>
        <ColumnDirective field="Name" headerText="Doctor Name" width={170} textAlign="Center" freeze="Left" template={doctorTemplate} />
        <ColumnDirective field="Time9AM" headerText="9:00 AM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time10AM" headerText="10:00 AM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time11AM" headerText="11:00 AM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time12PM" headerText="12:00 PM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time1PM" headerText="1:00 PM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time2PM" headerText="2:00 PM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time3PM" headerText="3:00 PM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time4PM" headerText="4:00 PM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time5PM" headerText="5:00 PM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time6PM" headerText="6:00 PM" width={120} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Time7PM" headerText="7:00 PM" width={120} textAlign="Center" allowSorting={false} />
      </ColumnsDirective>
      <Inject services={[Freeze, Sort]} />
    </GridComponent>
  );
}

export default App;
var shiftPlanData = [
{
    Name: 'Dr. Sarah Johnson',
    Designation: 'Chief Surgeon',
    Time9AM: 'Weekly Meeting',
    Time10AM: 'Major Surgery',
    Time11AM: 'Major Surgery',
    Time12PM: 'Cardiac Operation',
    Time1PM: 'Cardiac Operation',
    Time2PM: 'Cardiac Operation',
    Time3PM: 'Post-up Consultaion',
    Time4PM: 'Post-up Consultaion',
    Time5PM: 'Emergency Coverage',
    Time6PM: 'Emergency Coverage',
    Time7PM: 'Emergency Coverage',
},
{
    Name: 'Dr. Michael Chen',
    Designation: 'Cardiologist',
    Time9AM: 'Cardiologist Ward Rounds',
    Time10AM: 'Cardiologist Emergency Ward',
    Time11AM: 'Cardiologist Emergency Ward',
    Time12PM: 'Cardialogist Research',
    Time1PM: 'Cardiologist General Checkup',
    Time2PM: 'Cardiologist General Checkup',
    Time3PM: 'Cardiologist General Checkup',
    Time4PM: 'Cardiologist General Checkup',
    Time5PM: 'Cardiologist Lab Work',
    Time6PM: 'Cardiologist Consultation',
    Time7PM: 'Cardiologist Surgery',
},
{
    Name: 'Dr. Emily Rodriguez',
    Designation: 'Pediatrician',
    Time9AM: 'Pediatrician Casualty',
    Time10AM: 'Pediatrician Casualty',
    Time11AM: 'Pediatrician Training',
    Time12PM: 'Pediatrician Research',
    Time1PM: 'Pediatrician Surgery',
    Time2PM: 'Pediatrician Surgery',
    Time3PM: 'Pediatrician Surgery',
    Time4PM: 'Pediatrician General Checkup',
    Time5PM: 'Pediatrician Consultation',
    Time6PM: 'Pediatrician Consultation',
    Time7PM: 'Pediatrician Ward Rounds',
},
{
    Name: 'Dr. David Wilson',
    Designation: 'Orthopedic Surgeon',
    Time9AM: 'Orthopedic Surgeon Research',
    Time10AM: 'Orthopedic Surgeon Ward Rounds',
    Time11AM: 'Orthopedic Surgeon Ward Rounds',
    Time12PM: 'Orthopedic Surgeon Training',
    Time1PM: 'Orthopedic Surgeon Surgery',
    Time2PM: 'Orthopedic Surgeon Consultation',
    Time3PM: 'Orthopedic Surgeon Consultation',
    Time4PM: 'Orthopedic Surgeon Consultation',
    Time5PM: 'Orthopedic Surgeon Casualty',
    Time6PM: 'Orthopedic Surgeon Casualty',
    Time7PM: 'Orthopedic Surgeon Operation Theatre',
},
{
    Name: 'Dr. Lisa Thompson',
    Designation: 'Neurologist',
    Time9AM: 'Week Off',
    Time10AM: 'Week Off',
    Time11AM: 'Week Off',
    Time12PM: 'Week Off',
    Time1PM: 'Week Off',
    Time2PM: 'Week Off',
    Time3PM: 'Week Off',
    Time4PM: 'Week Off',
    Time5PM: 'Week Off',
    Time6PM: 'Week Off',
    Time7PM: 'Week Off',
},
{
    Name: 'Dr. James Anderson',
    Designation: 'General Physician',
    Time9AM: 'General Physician Lab Work',
    Time10AM: 'General Physician General Checkup',
    Time11AM: 'General Physician General Checkup',
    Time12PM: 'General Physician Consultation',
    Time1PM: 'General Physician Consultation',
    Time2PM: 'General Physician Consultation',
    Time3PM: 'General Physician Ward Rounds',
    Time4PM: 'General Physician Casualty',
    Time5PM: 'General Physician Training',
    Time6PM: 'General Physician Training',
    Time7PM: 'General Physician Research',
},
{
    Name: 'Dr. Maria Garcia',
    Designation: 'Gynecologist',
    Time9AM: 'Gynecologist Consultation',
    Time10AM: 'Gynecologist Operation Theatre',
    Time11AM: 'Gynecologist Operation Theatre',
    Time12PM: 'Gynecologist Ward Rounds',
    Time1PM: 'Gynecologist Surgery',
    Time2PM: 'Gynecologist Surgery',
    Time3PM: 'Gynecologist Surgery',
    Time4PM: 'Gynecologist Research',
    Time5PM: 'Gynecologist General Checkup',
    Time6PM: 'Gynecologist General Checkup',
    Time7PM: 'Gynecologist Training',
},
{
    Name: 'Dr. Robert Kim',
    Designation: 'Emergency Medicine Doctor',
    Time9AM: 'Emergency Medicine Doctor Casualty',
    Time10AM: 'Emergency Medicine Doctor Casualty',
    Time11AM: 'Emergency Medicine Doctor Consultation',
    Time12PM: 'Emergency Medicine Doctor Training',
    Time1PM: 'Emergency Medicine Doctor Ward Rounds',
    Time2PM: 'Emergency Medicine Doctor Ward Rounds',
    Time3PM: 'Emergency Medicine Doctor Ward Rounds',
    Time4PM: 'Emergency Medicine Doctor Surgery',
    Time5PM: 'Emergency Medicine Doctor Research',
    Time6PM: 'Emergency Medicine Doctor Research',
    Time7PM: 'Emergency Medicine Doctor Emergency Ward',
},
{
    Name: 'Dr. Jennifer Lee',
    Designation: 'Psychiatrist',
    Time9AM: 'Psychiatrist Research',
    Time10AM: 'Psychiatrist Training',
    Time11AM: 'Psychiatrist General Checkup',
    Time12PM: 'Psychiatrist General Checkup',
    Time1PM: 'Psychiatrist General Checkup',
    Time2PM: 'Psychiatrist General Checkup',
    Time3PM: 'Psychiatrist Lab Work',
    Time4PM: 'Psychiatrist Casualty',
    Time5PM: 'Psychiatrist Casualty',
    Time6PM: 'Psychiatrist Consultation',
    Time7PM: 'Psychiatrist Ward Rounds',
},
{
    Name: 'Dr. Thomas Brown',
    Designation: 'Radiologist',
    Time9AM: 'Radiologist Training',
    Time10AM: 'Radiologist Training',
    Time11AM: 'Radiologist Emergency Ward',
    Time12PM: 'Radiologist General Checkup',
    Time1PM: 'Radiologist General Checkup',
    Time2PM: 'Radiologist General Checkup',
    Time3PM: 'Radiologist Ward Rounds',
    Time4PM: 'Radiologist Lab Work',
    Time5PM: 'Radiologist Consultation',
    Time6PM: 'Radiologist Consultation',
    Time7PM: 'Radiologist Research',
},
];
export let shiftPlanData: Object[] = [
{
    Name: 'Dr. Sarah Johnson',
    Designation: 'Chief Surgeon',
    Time9AM: 'Weekly Meeting',
    Time10AM: 'Major Surgery',
    Time11AM: 'Major Surgery',
    Time12PM: 'Cardiac Operation',
    Time1PM: 'Cardiac Operation',
    Time2PM: 'Cardiac Operation',
    Time3PM: 'Post-up Consultaion',
    Time4PM: 'Post-up Consultaion',
    Time5PM: 'Emergency Coverage',
    Time6PM: 'Emergency Coverage',
    Time7PM: 'Emergency Coverage',
},
{
    Name: 'Dr. Michael Chen',
    Designation: 'Cardiologist',
    Time9AM: 'Cardiologist Ward Rounds',
    Time10AM: 'Cardiologist Emergency Ward',
    Time11AM: 'Cardiologist Emergency Ward',
    Time12PM: 'Cardialogist Research',
    Time1PM: 'Cardiologist General Checkup',
    Time2PM: 'Cardiologist General Checkup',
    Time3PM: 'Cardiologist General Checkup',
    Time4PM: 'Cardiologist General Checkup',
    Time5PM: 'Cardiologist Lab Work',
    Time6PM: 'Cardiologist Consultation',
    Time7PM: 'Cardiologist Surgery',
},
{
    Name: 'Dr. Emily Rodriguez',
    Designation: 'Pediatrician',
    Time9AM: 'Pediatrician Casualty',
    Time10AM: 'Pediatrician Casualty',
    Time11AM: 'Pediatrician Training',
    Time12PM: 'Pediatrician Research',
    Time1PM: 'Pediatrician Surgery',
    Time2PM: 'Pediatrician Surgery',
    Time3PM: 'Pediatrician Surgery',
    Time4PM: 'Pediatrician General Checkup',
    Time5PM: 'Pediatrician Consultation',
    Time6PM: 'Pediatrician Consultation',
    Time7PM: 'Pediatrician Ward Rounds',
},
{
    Name: 'Dr. David Wilson',
    Designation: 'Orthopedic Surgeon',
    Time9AM: 'Orthopedic Surgeon Research',
    Time10AM: 'Orthopedic Surgeon Ward Rounds',
    Time11AM: 'Orthopedic Surgeon Ward Rounds',
    Time12PM: 'Orthopedic Surgeon Training',
    Time1PM: 'Orthopedic Surgeon Surgery',
    Time2PM: 'Orthopedic Surgeon Consultation',
    Time3PM: 'Orthopedic Surgeon Consultation',
    Time4PM: 'Orthopedic Surgeon Consultation',
    Time5PM: 'Orthopedic Surgeon Casualty',
    Time6PM: 'Orthopedic Surgeon Casualty',
    Time7PM: 'Orthopedic Surgeon Operation Theatre',
},
{
    Name: 'Dr. Lisa Thompson',
    Designation: 'Neurologist',
    Time9AM: 'Week Off',
    Time10AM: 'Week Off',
    Time11AM: 'Week Off',
    Time12PM: 'Week Off',
    Time1PM: 'Week Off',
    Time2PM: 'Week Off',
    Time3PM: 'Week Off',
    Time4PM: 'Week Off',
    Time5PM: 'Week Off',
    Time6PM: 'Week Off',
    Time7PM: 'Week Off',
},
{
    Name: 'Dr. James Anderson',
    Designation: 'General Physician',
    Time9AM: 'General Physician Lab Work',
    Time10AM: 'General Physician General Checkup',
    Time11AM: 'General Physician General Checkup',
    Time12PM: 'General Physician Consultation',
    Time1PM: 'General Physician Consultation',
    Time2PM: 'General Physician Consultation',
    Time3PM: 'General Physician Ward Rounds',
    Time4PM: 'General Physician Casualty',
    Time5PM: 'General Physician Training',
    Time6PM: 'General Physician Training',
    Time7PM: 'General Physician Research',
},
{
    Name: 'Dr. Maria Garcia',
    Designation: 'Gynecologist',
    Time9AM: 'Gynecologist Consultation',
    Time10AM: 'Gynecologist Operation Theatre',
    Time11AM: 'Gynecologist Operation Theatre',
    Time12PM: 'Gynecologist Ward Rounds',
    Time1PM: 'Gynecologist Surgery',
    Time2PM: 'Gynecologist Surgery',
    Time3PM: 'Gynecologist Surgery',
    Time4PM: 'Gynecologist Research',
    Time5PM: 'Gynecologist General Checkup',
    Time6PM: 'Gynecologist General Checkup',
    Time7PM: 'Gynecologist Training',
},
{
    Name: 'Dr. Robert Kim',
    Designation: 'Emergency Medicine Doctor',
    Time9AM: 'Emergency Medicine Doctor Casualty',
    Time10AM: 'Emergency Medicine Doctor Casualty',
    Time11AM: 'Emergency Medicine Doctor Consultation',
    Time12PM: 'Emergency Medicine Doctor Training',
    Time1PM: 'Emergency Medicine Doctor Ward Rounds',
    Time2PM: 'Emergency Medicine Doctor Ward Rounds',
    Time3PM: 'Emergency Medicine Doctor Ward Rounds',
    Time4PM: 'Emergency Medicine Doctor Surgery',
    Time5PM: 'Emergency Medicine Doctor Research',
    Time6PM: 'Emergency Medicine Doctor Research',
    Time7PM: 'Emergency Medicine Doctor Emergency Ward',
},
{
    Name: 'Dr. Jennifer Lee',
    Designation: 'Psychiatrist',
    Time9AM: 'Psychiatrist Research',
    Time10AM: 'Psychiatrist Training',
    Time11AM: 'Psychiatrist General Checkup',
    Time12PM: 'Psychiatrist General Checkup',
    Time1PM: 'Psychiatrist General Checkup',
    Time2PM: 'Psychiatrist General Checkup',
    Time3PM: 'Psychiatrist Lab Work',
    Time4PM: 'Psychiatrist Casualty',
    Time5PM: 'Psychiatrist Casualty',
    Time6PM: 'Psychiatrist Consultation',
    Time7PM: 'Psychiatrist Ward Rounds',
},
{
    Name: 'Dr. Thomas Brown',
    Designation: 'Radiologist',
    Time9AM: 'Radiologist Training',
    Time10AM: 'Radiologist Training',
    Time11AM: 'Radiologist Emergency Ward',
    Time12PM: 'Radiologist General Checkup',
    Time1PM: 'Radiologist General Checkup',
    Time2PM: 'Radiologist General Checkup',
    Time3PM: 'Radiologist Ward Rounds',
    Time4PM: 'Radiologist Lab Work',
    Time5PM: 'Radiologist Consultation',
    Time6PM: 'Radiologist Consultation',
    Time7PM: 'Radiologist Research',
},
];

Spanning can also be controlled at the column level by setting enableColumnSpan to false in the column definition to prevent merging for specific columns.

Dynamic column spanning

Column spanning in the Syncfusion® Grid merges adjacent cells horizontally to create a cleaner and more structured layout. Spanning can be controlled dynamically by setting the colSpan attribute within the queryCellInfo event, based on column values and specific conditions. This approach enables custom logic to span cells, allowing flexible presentation of time ranges, grouped values, or contextual highlights.

The following demo shows employee “Davolio” performing analysis from “9:00 AM to 10:00 AM”, with spanned cells representing the time range.

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

The border color of spanned cells can be customized through the queryCellInfo event. This event is triggered before the cell element is appended to the Grid, which makes it possible to apply styles programmatically.

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

  • Virtualization
  • Infinite Scrolling
  • Grouping
  • Lazy Load Grouping
  • Row Drag and Drop
  • Column Virtualization
  • Detail Template
  • Editing
  • Export
  • Foreign Key
  • Hierarchy Grid
  • UpdateCell
  • Autofill