Search results

Columns

The column definitions are used as the dataSource schema in the Grid. This plays a vital role in rendering column values in the required format. The grid operations such as sorting, filtering and grouping etc. are performed based on column definitions. The field property of the columns is necessary to map the data source values in Grid columns.

  1. If the column with field is not specified in the dataSource, then the column values will be empty.
  2. If the field name contains “dot” operator, it is considered as complex binding.

Auto generation

The columns are automatically generated when columns declaration is empty or undefined while initializing the grid. All the columns in the dataSource are bound as grid columns.

Source
Preview
app.vue
<template>
  <div id="app">
      <ejs-grid :dataSource="data"> </ejs-grid>
  </div>
</template>
<script>
import Vue from 'vue';
import { GridPlugin } from '@syncfusion/ej2-vue-grids';

Vue.use(GridPlugin);
export default {
  data () {
    return {
      data: [
      { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5 },
      { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6 },
      { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4 }]
    }
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

When the columns are auto-generated then the column type will be determined from the first record of the dataSource.

Header Text

By default, column header title is displayed from column field value. To override the default header title, you have to define the headerText value.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource="data"  height='315px'>
          <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='Freight' headerText='Freight' textAlign='Right' width=90></e-column>
            <e-column field='ShipCity' headerText='Ship City' 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
    };
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

If both the field and headerText are not defined in the column, the column renders with “empty” header text.

Format

To format cell values based on specific culture, use the columns.format property. The grid uses Internalization library to format number and date values.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource="data"  height='315px'>
          <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
            <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' type='date' 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
    };
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

By default, the number and date values are formatted in en-US locale.

Number formatting

The number or integer values can be formatted using the below format strings.

Format Description
N Denotes numeric type.
C Denotes currency type.
P Denotes percentage type

Date formatting

You can format date values either using built-in date format string or custom format string.

For built-in date format you can specify columns.format property as string (Example: yMd).

You can also use custom format string to format the date values. Some of the custom formats and the formatted date values are given in the below table.

Format Formatted value
{ type:‘date’, format:‘dd/MM/yyyy’ } 04/07/1996
{ type:‘date’, format:‘dd.MM.yyyy’ } 04.07.1996
{ type:‘date’, skeleton:‘short’ } 7/4/96
{ type: ‘dateTime’, format: ‘dd/MM/yyyy hh:mm a’ } 04/07/1996 12:00 AM
{ type: ‘dateTime’, format: ‘MM/dd/yyyy hh:mm:ss a’ } 07/04/1996 12:00:00 AM
Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource="data"  height='315px'>
          <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
            <e-column field='OrderDate' headerText='Order Date' textAlign='Right' :format='formatOptions' type='date' width=120></e-column>
            <e-column field='OrderDate' headerText='Ship Date' textAlign='Right' :format='shipFormat' type='date' width=180></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,
      formatOptions: {type:'date', format:'dd/MM/yyyy'},
      shipFormat: { type: 'dateTime', format: 'dd/MM/yyyy hh:mm a' }
    };
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

AutoFit specific columns

The autoFitColumns method resizes the column to fit the widest cell’s content without wrapping. You can autofit specific columns at initial rendering by invoking the autoFitColumns method in dataBound event.

To autofit a column, you need to inject Resize module in the provide section.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource="data" :dataBound='dataBound' height='315px'>
          <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=150></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=150></e-column>
            <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' type='date' width=120></e-column>
          </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Resize } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data
    };
  },
  methods: {
      dataBound: function() {
        this.$refs.grid.autoFitColumns(['OrderDate', 'CustomerID']);
    }
  },
  provide: {
      grid: [Resize]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

You can autofit all columns, by invoking the autoFitColumns method without column name.

Reorder

Reordering can be done by drag and drop of a particular column header from one index to another index within the grid. To enable reordering, set the allowReordering to true.

To use Reordering, you need to inject Reorder module in the provide section.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource="data" :allowReordering='true' height='315px'>
          <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
            <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' type='date' width=120></e-column>
          </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Reorder } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data
    };
  },
  provide: {
      grid: [Reorder]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
  • You can disable reordering a particular column by setting the columns.allowReordering to false.
  • In RTL mode, you can click and drag the left edge of the header cell to resize the column.

Column Resizing

Columns width can be resized by clicking and dragging at the right edge of the column header. While dragging, the width of a respective column will be resized immediately. Each column can be auto resized by double-clicking at the right edge of the column header. It will fit the width of that column based on widest cell content. To enable the column resize, set the allowResizing property to true.

To use the column resize, inject Resize module in the provide section.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource="data" :allowResizing='true' height='315px'>
          <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=80></e-column>
            <e-column field='ShipCountry' headerText='Ship Country' textAlign='Right' width=100></e-column>
            <e-column field='ShipAddress' headerText='Ship Address' width=120></e-column>
            <e-column field='Freight' headerText='Freight' width=80></e-column>
          </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Resize } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data
    };
  },
  provide: {
      grid: [Resize]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

You can disable Resizing for a particular column, by specifying columns.allowResizing to false. In RTL mode, you can click and drag the left edge of header cell to resize the column.

Min and Max width

Columns can be restricted to resize in between minimum and maximum width by defining the columns.minWidth and columns.maxWidth.

In the below sample, OrderID, Ship Name and Ship Country columns are defined with minimum and maximum width.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource="data" :allowResizing='true' height='315px'>
          <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' minWidth= 100 width=150 maxWidth=250 ></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
            <e-column field='ShipName' headerText='Ship Name'  minWidth= 150 width=200 maxWidth=300></e-column>
            <e-column field='ShipCountry' headerText='Ship Country' textAlign='Right'  minWidth= 120 width=150 maxWidth=280></e-column>
            <e-column field='ShipAddress' headerText='Ship Address' width=120></e-column>
            <e-column field='Freight' headerText='Freight' width=80></e-column>
          </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Resize } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data
    };
  },
  provide: {
      grid: [Resize]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Touch Interaction

When you tap at the right edge of header cell, a floating handler will be visible over the right border of the column. To resize the column, tap and drag the floating handler as much you need.

The following screenshot represents the column resizing on the touch device.

Touch Interaction

Column Template

The column template has options to display custom element instead of a field value in the column.

The template property should be a function which returns an object. The object should contain a Vue component which should be assigned to the template property. The grid will look for the template property and render it as new Vue instance.

Source
Preview
app.vue
<template>
    <div id="app">
         <ejs-grid :dataSource="data" height=310>
            <e-columns>
                <e-column headerText='Employee Image' width='150' textAlign='Center' :template='cTemplate'></e-column>
                <e-column field='EmployeeID' headerText='Employee ID' width='125' textAlign='Right'></e-column>
                <e-column field='FirstName' headerText='Name' width='120'></e-column>
                <e-column field='Title' headerText='Title' width='170'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { employeeData } from "./datasource.js";

Vue.use(GridPlugin);

export default {
  data: () => {
    return {
      data: employeeData,
      cTemplate: function () {
          return { template : Vue.component('columnTemplate',{
             template: `<div class="image">
                    <img :src="image" :alt="altImage"/>
                </div>`,
                data: function() {
                    return {
                        data: {}
                    }
                },
                computed: {
                    image: function() {
                        return './' + this.data.EmployeeID + '.png';
                    },
                    altImage: function() {
                        return this.data.EmployeeID;
                    }
                }
          })}
      }
    };
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";

 .image img {
        height: 55px;
        width: 55px;
        border-radius: 50px;
        box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
    }
</style>

Using condition template

You can render the template elements based on condition.

In the following code, checkbox is rendered based on Discontinued field value.

Source
Preview
app.vue
<template>
    <div id="app">
         <ejs-grid :dataSource="data" height=310>
            <e-columns>
                <e-column headerText='Discontinued' width='150' textAlign='Center' :template='cTemplate'></e-column>
                <e-column field='ProductID' headerText='Product ID' width='125'></e-column>
                <e-column field='ProductName' headerText='Name' width='120'></e-column>
                <e-column field='SupplierID' headerText='Supplier ID' width='170'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { productData } from "./datasource.js";

Vue.use(GridPlugin);

export default {
  data: () => {
    return {
      data: productData,
      cTemplate: function () {
          return { template : Vue.component('columnTemplate',{
             template: `<div v-if=cData class="template_checkbox">
                    <input type="checkbox" checked />
                </div>
                <div v-else class="template_checkbox">
                    <input type="checkbox" />
                </div>`,
                data: function() {
                    return {
                        data: {}
                    }
                },
                computed: {
                    cData: function() {
                        return this.data.Discontinued;
                    }
                }
          })}
      }
    };
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Column Type

Column type can be specified using the columns.type property. It specifies the type of data the column binds.

If the format is defined for a column, the column uses type to select the appropriate format option (number or date).

Grid column supports the following types:

  • string
  • number
  • boolean
  • date
  • datetime

If the type is not defined, then it will be determined from the first record of the dataSource.

Column chooser

The column chooser has options to show or hide columns dynamically. It can be enabled by defining the showColumnChooser as true.

To use column chooser, inject ColumnChooser in the provide section.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource="data" :showColumnChooser='true' :toolbar='toolbarOptions' height='272px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width='120' textAlign="Right"></e-column>
                <e-column field='CustomerID' headerText='Customer Name' width='150' :showInColumnChooser='false'></e-column>
                <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign="Right"></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' :visible='true' width='150'></e-column>
                <e-column field='ShipCity' headerText='Ship City' :visible='false' width='150'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, ColumnChooser, Toolbar } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      toolbarOptions: ['ColumnChooser']
    };
  },
  provide: {
      grid: [ColumnChooser, Toolbar]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

You can hide the column names in column chooser by defining the columns.showInColumnChooser as false.

Open column chooser by external button

The Column chooser can be displayed on a page through external button by invoking the openColumnChooser method with X and Y axis positions.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-button @click.native="show">open Column Chooser </ejs-button>
        <ejs-grid ref='grid' :dataSource="data" :showColumnChooser='true' height='272px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width='120' textAlign="Right"></e-column>
                <e-column field='CustomerID' headerText='Customer Name' width='150' :showInColumnChooser='false'></e-column>
                <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign="Right" type='date'></e-column>
                <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign="Right"></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' :visible='false' width='150'></e-column>
                <e-column field='ShipCity' headerText='Ship City' :visible='false' width='150'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, ColumnChooser } from "@syncfusion/ej2-vue-grids";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { data } from './datasource.js';

Vue.use(GridPlugin);
Vue.use(ButtonPlugin);

export default {
  data() {
    return {
      data: data
    };
  },
  methods: {
    show: function() {
        this.$refs.grid.ej2Instances.columnChooserModule.openColumnChooser(200, 50); // give X and Y axis
    }
  },
  provide: {
      grid: [ColumnChooser]
  }
});
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Column menu

The column menu has options to integrate features like sorting, grouping, filtering, column chooser, and autofit. It will show a menu with the integrated feature when users click on multiple icon of the column. To enable column menu, you need to define the showColumnMenu property as true.

To use the column menu, inject the ColumnMenu in the provide section.

The default items are displayed in following table.

Item Description
SortAscending Sort the current column in ascending order.
SortDescending Sort the current column in descending order.
Group Group the current column.
Ungroup Ungroup the current column.
AutoFit Auto fit the current column.
AutoFitAll Auto fit all columns.
ColumnChooser Choose the column visibility.
Filter Show the filter option as given in filterSettings.type
Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource="data" id="gridcomp" :allowPaging='true' :allowGrouping='true' :allowSorting='true' :showColumnMenu='true'
        :groupSettings='groupOptions' :allowFiltering='true' :filterSettings='filterSettings'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
                <e-column field='Freight' headerText='Freight' format='C2' textAlign='Right' width='120'></e-column>
                <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right' type='date'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' :visible='false' width='150'></e-column>
                <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Group, Sort, Resize, ColumnMenu, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      groupOptions: { showGroupedColumn: true },
      filterSettings: { type: "CheckBox" }
    };
  },
  provide: {
      grid: [Group, Sort, Resize, ColumnMenu, Page]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

You can disable column menu for a particular column by defining the columns.showColumnMenu as false. You can customize the default items by defining the columnMenuItems with required items.

Custom Column Menu Item

Custom column menu items can be added by defining the columnMenuItems as collection of the columnMenuItemModel. Actions for this customized items can be defined in the columnMenuClick event.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource="data" id="gridcomp" :allowPaging='true' :allowSorting='true' :showColumnMenu='true' :sortSettings='sortSettings' :columnMenuItems='columnMenuItems'  :columnMenuClick='columnMenuClick'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width='140' textAlign="Right"></e-column>
                <e-column field='CustomerID' headerText='Customer Name' :showInColumnChooser='false'></e-column>
                <e-column field='Freight' headerText='Freight' format='C2' textAlign="Right"></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' :visible='false' width='150'></e-column>
                <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Sort, ColumnMenu, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      columnMenuItems: [{text:'Clear Sorting', id:'gridclearsorting'}],
      sortSettings: {columns:[{direction: "Ascending", field: "OrderID"}]}
    };
  },
  methods: {
      columnMenuClick: function(args) {
        if(args.item.id === 'gridclearsorting'){
            this.$refs.grid.clearSorting();
        }
    }
  },
  provide: {
      grid: [Sort, ColumnMenu, Page]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Customize menu items for particular columns

Sometimes, you have a scenario that to hide an item from column menu for particular columns. In that case, you need to define the columnMenuOpenEventArgs.hide as true in the columnMenuOpen event.

The following sample, Filter item was hidden in column menu when opens for the OrderID column.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource="data" id="gridcomp" :allowPaging='true' :allowSorting='true' :showColumnMenu='true' :filterSettings='filterSettings' :columnMenuOpen='columnMenuOpen' :allowFiltering='true' :allowGrouping='true'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width='140' textAlign="Right"></e-column>
                <e-column field='CustomerID' headerText='Customer Name' :showInColumnChooser='false'></e-column>
                <e-column field='Freight' headerText='Freight' format='C2' textAlign="Right"></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' :visible='false' width='150'></e-column>
                <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Sort, ColumnMenu, Page, Group, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      filterSettings: {type: 'Menu'}
    };
  },
  methods: {
      columnMenuOpen: function (args) {
        for (let item of args.items) {
            if (item.text === 'Filter' && args.column.field === 'OrderID') {
                item.hide = true;
            } else {
                item.hide = false;
            }
        }
    }
  },
  provide: {
      grid: [Sort, ColumnMenu, Page, Group, Filter]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Column Spanning

The grid has option to span the adjacent cells. You need to define the colSpan attribute to span cells in the 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.vue
<template>
    <div id="app">
        <ejs-grid :dataSource="data" height='auto' 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='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;
                }
                break;
            case 10002:
                if (args.column.field === '9:30' || args.column.field === '2:30' ||
                    args.column.field === '4:30') {
                    args.colSpan = 3;
                } else if (args.column.field === '11:00') {
                    args.colSpan = 4;
                }
                break;
            case 10003:
                if (args.column.field === '9:00' || args.column.field === '11:30') {
                    args.colSpan = 3;
                } else if (args.column.field === '10:30' || args.column.field === '3:30' ||
                    args.column.field === '4:30' || args.column.field === '2:30') {
                    args.colSpan = 2;
                }
                break;
            case 10004:
                if (args.column.field === '9:00') {
                    args.colSpan = 3;
                } else if (args.column.field === '11:00') {
                    args.colSpan = 4;
                } else if (args.column.field === '4:00' || args.column.field === '2:30') {
                    args.colSpan = 2;
                }
                break;
            case 10005:
                if (args.column.field === '9:00') {
                    args.colSpan = 4;
                } else if (args.column.field === '11:30') {
                    args.colSpan = 3;
                } else if (args.column.field === '3:30' || args.column.field === '4:30' || args.column.field === '2:30') {
                    args.colSpan = 2;
                }
                break;
            case 10006:
                if (args.column.field === '9:00' || args.column.field === '4:30' ||
                    args.column.field === '2:30' || args.column.field === '3:30') {
                    args.colSpan = 2;
                } else if (args.column.field === '10:00' || args.column.field === '11:30') {
                    args.colSpan = 3;
                }
                break;
            case 10007:
                if (args.column.field === '9:00' || args.column.field === '3:00' || args.column.field === '10:30') {
                    args.colSpan = 2;
                } else if (args.column.field === '11:30' || args.column.field === '4:00') {
                    args.colSpan = 3;
                }
                break;
            case 10008:
                if (args.column.field === '9:00' || args.column.field === '10:30' || args.column.field === '2:30') {
                    args.colSpan = 3;
                } else if (args.column.field === '4:00') {
                    args.colSpan = 2;
                }
                break;
            default:
                this.extendQueryCellEvent(args, data.EmployeeID);
        }
    },
    extendQueryCellEvent: function(args, value) {
        switch (value) {
            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>

Responsive columns

You can toggle column visibility based on media queries which are defined at the hideAtMedia. The hideAtMedia accepts valid Media Queries.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource='data' height='315px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120 hideAtMedia='(min-width: 700px)'>
                </e-column> //  column visibility hide when browser screen width lessthan 700px;
                <e-column field='CustomerID' headerText='Customer ID' width=140 hideAtMedia='(max-width: 700px)'>
                </e-column> // column Visibility show when browser screen width  500px or less;
                <e-column field='Freight' headerText='Freight' textAlign='Right' format='C' width=120
                hideAtMedia='(min-width: 500px)'>
                </e-column> // column visibility hide when browser screen width lessthan 500px;
                <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' type='date' width=140>
                </e-column> // it always shown
            </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
    };
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Controlling Grid Actions

You can enable or disable grid action for a particular column by setting the allowFiltering, allowGrouping, and allowSorting properties.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource='data' :allowSorting="true" :allowFiltering="true" :allowGrouping="true" height="220px">
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90 :allowGrouping="false"></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90 :allowFiltering="false"></e-column>
                <e-column field='OrderDate' headerText='Order Date' textAlign='Right' type='date' format='yMd' width=120 :allowSorting="false"></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Sort, Group, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data
    };
  },
  provide: {
      grid: [Sort, Group, Filter]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Show/Hide Columns by External Button

You can show or hide the grid columns dynamically through external buttons by invoking the showColumns/hideColumns methods.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-button @click.native="show"> Show </ejs-button>
        <ejs-button @click.native="hide"> Hide </ejs-button>
        <ejs-grid ref='grid' :dataSource='data' :height='280'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
                <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120 type='date'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { data } from './datasource.js';

Vue.use(GridPlugin);
Vue.use(ButtonPlugin);

export default {
  data() {
    return {
      data: data
    };
  },
  methods: {
    show: function() {
        this.$refs.grid.showColumns(['Customer ID', 'Ship Name']); // show by HeaderText
    },
    hide: function() {
        this.$refs.grid.hideColumns(['Customer ID', 'Ship Name']); // hide by HeaderText
    }

  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Complex Data Binding

You can achieve complex data binding in the grid by using the dot(.) operator in the column.field.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource='data' :height='315'>
            <e-columns>
                <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
                <e-column field='Name.FirstName' headerText='First Name' width=120></e-column>
                <e-column field='Name.LastName' headerText='Last Name' width=120></e-column>
                <e-column field='Title' headerText='Title' width=150></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
    };
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

ValueAccessor

The valueAccessor is used to access/manipulate the value of display data. You can achieve custom value formatting by using valueAccessor.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource='data' height='315'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='Freight' headerText='Freight' textAlign='Right' :valueAccessor='currencyFormatter' width=80></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=130 :valueAccessor='valueAccess' ></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: {
    currencyFormatter: function(field, data, column) {
        return '€' + data['Freight'];
    },
    valueAccess: function (field, data, column) {
        return data[field] + '-' + data['ShipRegion'];
    }
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Display Array type Columns

You can bind an Array of Objects in a column by using valueAccessor property. In this example, The Name field has an array of two objects FirstName and LastName. These two objects are joined and bind to a column using valueAccessor.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource='data' height='315'>
            <e-columns>
                <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=90></e-column>
                <e-column field='Name' headerText='Full Name' :valueAccessor= 'valueAccess' width=120></e-column>
                <e-column field='Title' headerText='Title' width=150></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: {
    valueAccess: function(field, data, column) {
        return data[field].map((s) => { return s.LastName || s.FirstName; }).join(' ');
    }
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Expression Column

You can achieve the expression column by using valueAccessor property.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource='data' :height='315'>
            <e-columns>
                <e-column field='FoodName' headerText='Food Name' width=150></e-column>
                <e-column field='Protein' headerText='Protein' textAlign='Right' width=120></e-column>
                <e-column field='Fat' headerText='Fat' textAlign='Right' width=80></e-column>
                <e-column field='Carbohydrate' headerText='Carbohydrate' textAlign='Right' width=120></e-column>
                <e-column headerText='Calories Intake' textAlign='Right' :valueAccessor='totalCalories' width=150></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: {
    totalCalories: function(field, data, column) {
        return data.Protein * 4 + data.Fat * 4 + data.Carbohydrate * 9;
    }
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Foreign Key Column

Foreign key column can be enabled by using column.dataSource, column.foreignKeyField and column.foreignKeyValue properties.

In the following example, Employee Name is a foreign column which shows FirstName column from foreign data.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource='data' height='315'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                <e-column field='EmployeeID' headerText='Employee Name' width=120 foreignKeyValue='FirstName' :dataSource='employeeData'></e-column>
                <e-column field='Freight' headerText='Freight' textAlign='Right' width=80></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=130  ></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, ForeignKey } from "@syncfusion/ej2-vue-grids";
import { data, employeeData } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      employeeData: employeeData
    };
  },
  provide: {
      grid: [ForeignKey]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

How to render boolean values as checkbox

To render boolean values as checkbox in columns, you need to set displayAsCheckBox property as true.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource='data' height='315'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='Freight' headerText='Freight' textAlign= 'Right' width=120 format= 'C2'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
                <e-column field='ShippedDate' headerText='Shipped Date' width=150></e-column>
                <e-column field='Verified' headerText='Verified' displayAsCheckBox='true' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
    };
  },
  provide: {
    grid: [Page]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

See Also