Search results

Row Spanning in Vue Grid component

24 May 2022 / 4 minutes to read

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

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

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

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
    <div id="app">
        <ejs-grid :dataSource="data" height='300' width='auto' gridLines='Both' :allowTextWrap='true' :queryCellInfo='queryCellInfoEvent'>
            <e-columns>
                <e-column field='EmployeeID' headerText='Employee ID' width='150' textAlign='Right' isPrimaryKey={true}></e-column>
                <e-column field='EmployeeName' headerText='Employee Name' width='200'></e-column>
                <e-column field='9:00' headerText='9:00 AM' width='120'></e-column>
                <e-column field='9:30' headerText='9:30 AM' width='120'></e-column>
                <e-column field='10:00' headerText='10:00 AM' width='120'></e-column>
                <e-column field='10:30' headerText='10:30 AM' width='120'></e-column>
                <e-column field='11:00' headerText='11:00 AM' width='120'></e-column>
                <e-column field='11:30' headerText='11:30 AM' width='120'></e-column>
                <e-column field='12:00' headerText='12:00 PM' width='120'></e-column>
                <e-column field='12:30' headerText='12:30 PM' width='120'></e-column>
                <e-column field='1:00' headerText='1:00 PM' width='120'></e-column>
                <e-column field='1:30' headerText='1:30 PM' width='120'></e-column>
                <e-column field='2:00' headerText='2:00 PM' width='120'></e-column>
                <e-column field='2:30' headerText='2:30 PM' width='120'></e-column>
                <e-column field='3:00' headerText='3:00 PM' width='120'></e-column>
                <e-column field='3:30' headerText='3:30 PM' width='120'></e-column>
                <e-column field='4:00' headerText='4:00 PM' width='120'></e-column>
                <e-column field='4:30' headerText='4:30 PM' width='120'></e-column>
                <e-column field='5:00' headerText='5:00 PM' width='120'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from 'vue';
import { GridPlugin } from '@syncfusion/ej2-vue-grids';
import { data  } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data: () => {
      return {
        data: data
        }
  },
  methods: {
    queryCellInfoEvent: function(args) {
        let data = args.data;
    switch (data.EmployeeID) {
        case 10001:
            if (args.column.field === '9:00' || args.column.field === '2:30' || args.column.field === '4:30') {
                args.colSpan = 2;
            } else if (args.column.field === '11:00') {
                args.colSpan = 3;
            } else if (args.column.field === 'EmployeeName') {
                args.rowSpan = 2;
            } else if (args.column.field === '1:00') {
                args.colSpan = 3;
                args.rowSpan = 2;
            }
            break;
        case 10002:
            if (args.column.field === '9:30' || args.column.field === '2:30' ||
                args.column.field === '4:30') {
                args.colSpan = 3;
            } else if (args.column.field === '11:00') {
                args.colSpan = 4;
            }
            break;
        case 10003:
            if (args.column.field === '9:00' || args.column.field === '11:30') {
                args.colSpan = 3;
            } else if (args.column.field === '10:30' || args.column.field === '3:30' ||
                args.column.field === '4:30' || args.column.field === '2:30') {
                args.colSpan = 2;
            }
            break;
        case 10004:
            if (args.column.field === '9:00') {
                args.colSpan = 3;
            } else if (args.column.field === '11:00') {
                args.colSpan = 4;
            } else if (args.column.field === '4:00' || args.column.field === '2:30') {
                args.colSpan = 2;
            }
            break;
        case 10005:
            if (args.column.field === '9:00') {
                args.colSpan = 4;
            } else if (args.column.field === '11:30') {
                args.colSpan = 3;
            } else if (args.column.field === '3:30' || args.column.field === '4:30' || args.column.field === '2:30') {
                args.colSpan = 2;
            }
            break;
        case 10006:
            if (args.column.field === '9:00' || args.column.field === '4:30' ||
                args.column.field === '2:30' || args.column.field === '3:30') {
                args.colSpan = 2;
            } else if (args.column.field === '10:00' || args.column.field === '11:30') {
                args.colSpan = 3;
            }
            break;
        case 10007:
            if (args.column.field === '9:00' || args.column.field === '3:00' || args.column.field === '10:30') {
                args.colSpan = 2;
            } else if (args.column.field === '11:30' || args.column.field === '4:00') {
                args.colSpan = 3;
            }
            break;
        default:
            this.extendQueryCellEvent(args, data.EmployeeID);
        }
    },
    extendQueryCellEvent: function(args, value) {
        switch (value) {
        case 10008:
            if (args.column.field === '9:00' || args.column.field === '10:30' || args.column.field === '2:30') {
                args.colSpan = 3;
            } else if (args.column.field === '4:00') {
                args.colSpan = 2;
            }
            break;
        case 10009:
            if (args.column.field === '9:00' || args.column.field === '11:30') {
                args.colSpan = 3;
            } else if (args.column.field === '4:30' || args.column.field === '2:30') {
                args.colSpan = 2;
            }
            break;
        case 100010:
            if (args.column.field === '9:00' || args.column.field === '2:30' ||
                args.column.field === '4:00' || args.column.field === '11:30') {
                args.colSpan = 3;
            } else if (args.column.field === '10:30') {
                args.colSpan = 2;
            }
            break;
        }
    }
    }
  });
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.data =  [
        {
            EmployeeID: 10001,
            EmployeeName: 'Davolio',
            '9:00': 'Analysis Tasks',
            '9:30': 'Analysis Tasks',
            '10:00': 'Team Meeting',
            '10:30': 'Testing',
            '11:00': 'Development',
            '11:30': 'Development',
            '12:00': 'Development',
            '12:30': 'Support',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Testing',
            '3:00': 'Testing',
            '3:30': 'Development',
            '4:00': 'Conference',
            '4:30': 'Team Meeting',
            '5:00': 'Team Meeting'
        },
        {
            EmployeeID: 10002,
            EmployeeName: 'Buchanan',
            '9:00': 'Task Assign',
            '9:30': 'Support',
            '10:00': 'Support',
            '10:30': 'Support',
            '11:00': 'Testing',
            '11:30': 'Testing',
            '12:00': 'Testing',
            '12:30': 'Testing',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Development',
            '3:00': 'Development',
            '3:30': 'Check Mail',
            '4:00': 'Check Mail',
            '4:30': 'Team Meeting',
            '5:00': 'Team Meeting'
        },
        {
            EmployeeID: 10003,
            EmployeeName: 'Fuller',
            '9:00': 'Check Mail',
            '9:30': 'Check Mail',
            '10:00': 'Check Mail',
            '10:30': 'Analysis Tasks',
            '11:00': 'Analysis Tasks',
            '11:30': 'Support',
            '12:00': 'Support',
            '12:30': 'Support',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Development',
            '3:00': 'Development',
            '3:30': 'Team Meeting',
            '4:00': 'Team Meeting',
            '4:30': 'Development',
            '5:00': 'Development'
        },
        {
            EmployeeID: 10004,
            EmployeeName: 'Leverling',
            '9:00': 'Testing',
            '9:30': 'Check Mail',
            '10:00': 'Check Mail',
            '10:30': 'Support',
            '11:00': 'Testing',
            '11:30': 'Testing',
            '12:00': 'Testing',
            '12:30': 'Testing',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Development',
            '3:00': 'Development',
            '3:30': 'Check Mail',
            '4:00': 'Conference',
            '4:30': 'Conference',
            '5:00': 'Team Meeting'
        },
        {
            EmployeeID: 10005,
            EmployeeName: 'Peacock',
            '9:00': 'Task Assign',
            '9:30': 'Task Assign',
            '10:00': 'Task Assign',
            '10:30': 'Task Assign',
            '11:00': 'Check Mail',
            '11:30': 'Support',
            '12:00': 'Support',
            '12:30': 'Support',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Development',
            '3:00': 'Development',
            '3:30': 'Team Meeting',
            '4:00': 'Team Meeting',
            '4:30': 'Testing',
            '5:00': 'Testing'
        },
        {
            EmployeeID: 10006,
            EmployeeName: 'Janet',
            '9:00': 'Testing',
            '9:30': 'Testing',
            '10:00': 'Support',
            '10:30': 'Support',
            '11:00': 'Support',
            '11:30': 'Team Meeting',
            '12:00': 'Team Meeting',
            '12:30': 'Team Meeting',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Development',
            '3:00': 'Development',
            '3:30': 'Team Meeting',
            '4:00': 'Team Meeting',
            '4:30': 'Development',
            '5:00': 'Development'
        },
        {
            EmployeeID: 10007,
            EmployeeName: 'Suyama',
            '9:00': 'Analysis Tasks',
            '9:30': 'Analysis Tasks',
            '10:00': 'Testing',
            '10:30': 'Development',
            '11:00': 'Development',
            '11:30': 'Testing',
            '12:00': 'Testing',
            '12:30': 'Testing',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Support',
            '3:00': 'Build',
            '3:30': 'Build',
            '4:00': 'Check Mail',
            '4:30': 'Check Mail',
            '5:00': 'Check Mail'
        },
        {
            EmployeeID: 10008,
            EmployeeName: 'Robert',
            '9:00': 'Task Assign',
            '9:30': 'Task Assign',
            '10:00': 'Task Assign',
            '10:30': 'Development',
            '11:00': 'Development',
            '11:30': 'Development',
            '12:00': 'Testing',
            '12:30': 'Support',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Check Mail',
            '3:00': 'Check Mail',
            '3:30': 'Check Mail',
            '4:00': 'Team Meeting',
            '4:30': 'Team Meeting',
            '5:00': 'Build'
        },
        {
            EmployeeID: 10009,
            EmployeeName: 'Andrew',
            '9:00': 'Check Mail',
            '9:30': 'Team Meeting',
            '10:00': 'Team Meeting',
            '10:30': 'Support',
            '11:00': 'Testing',
            '11:30': 'Development',
            '12:00': 'Development',
            '12:30': 'Development',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Check Mail',
            '3:00': 'Check Mail',
            '3:30': 'Check Mail',
            '4:00': 'Team Meeting',
            '4:30': 'Development',
            '5:00': 'Development'
        },
        {
            EmployeeID: 10010,
    
            EmployeeName: 'Michael',
            '9:00': 'Task Assign',
            '9:30': 'Task Assign',
            '10:00': 'Task Assign',
            '10:30': 'Analysis Tasks',
            '11:00': 'Analysis Tasks',
            '11:30': 'Development',
            '12:00': 'Development',
            '12:30': 'Development',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Testing',
            '3:00': 'Testing',
            '3:30': 'Testing',
            '4:00': 'Build',
            '4:30': 'Build',
            '5:00': 'Build'
        }
    ];
});
  • To disable the spanning for particular grid page, we need to use requestType from QueryCellInfo event argument.