Column Selection in Vue Grid component

22 Feb 202424 minutes to read

Column selection in grid component allows you to select one or more columns using mouse interactions or arrow keys. This feature is useful when you want to highlight, manipulate, or perform actions on specific columns within the Grid.

To enable column selection in the Grid, you need to set the selectionSettings.allowColumnSelection property to true.

Here’s an example of how to enable column selection using allowColumnSelection property in the Grid component:

<template>
  <div id="app">
    <div style="padding: 0px 0px 20px 0px; display:flex">
        <label style="padding: 0px 20px 0px 0px">Enable/Disable column selection</label>
        <ejs-switch :change="toggleColumnSelection">
        </ejs-switch>
    </div>
    <div style="padding: 20px 0px 0px 0px">
      <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions" 
      height="315px">
        <e-columns>
          <e-column field="OrderID" headerText="Order ID" textAlign="Right" 
          width="120"></e-column>
          <e-column field="CustomerID" headerText="Customer ID" width="150">
          </e-column>
          <e-column field="ShipCity" headerText="Ship City" width="150"></e-column>
          <e-column field="ShipName" headerText="Ship Name" width="150"></e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { SwitchPlugin } from "@syncfusion/ej2-vue-buttons";
import { data } from "./datasource.js";
Vue.use(GridPlugin);
Vue.use(SwitchPlugin);

export default {
  data() {
    return {
      data: data,
      selectionOptions: { type: "Multiple" },
    };
  },
  methods: {
    toggleColumnSelection(args) {
      this.$refs.grid.ej2Instance.selectionSettings.allowColumnSelection = args.checked ? true : false;
    },
  },
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Single column selection

The Vue Grid allows you to select a single column within the Grid. This feature is particularly useful when you want to focus on specific columns or perform actions on the data within a particular column.

To enable single column selection, set the selectionSettings.allowColumnSelection property to true. This property enables column selection and set the selectionSettings.type property to Single. This configuration allows you to select a single column at a time within the grid.

Here’s an example of how to enable single column selection using allowColumnSelection and type property :

<template>
  <div id="app">
    <ejs-grid ref="grid" :dataSource="data" allowPaging="true" 
     :selectionSettings="selectionOptions">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" width="120" textAlign="Right">
        </e-column>
        <e-column field="CustomerID" headerText="Customer Name" width="150">
        </e-column>
        <e-column type="date" field="OrderDate" headerText="Order Date" width="130" format="yMd" 
        textAlign="Right"></e-column>
        <e-column field="Freight" headerText="Freight" width="120" format="C2" 
        textAlign="Right"></e-column>
        <e-column type="date" field="ShippedDate" headerText="Shipped Date" width="130" 
        format="yMd" textAlign="Right"></e-column>
        <e-column field="ShipCountry" headerText="Ship Country" 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,
      selectionOptions :{ allowColumnSelection: true, type: 'Single' },
    };
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Multiple column selection

The Vue Grid allows you to select multiple columns within the Grid. This feature is particularly useful when you need to focus on or perform actions on several columns simultaneously.

To enable multiple column selection, set the selectionSettings.allowColumnSelection property to true. This property enables column selection and set the selectionSettings.type property to Multiple. This configuration allows you to select a multiple column at a time within the grid.

Here’s an example of how to enable multiple column selection using allowColumnSelection and type property :

<template>
  <div id="app">
    <ejs-grid ref="grid" :dataSource="data" allowPaging="true" 
     :selectionSettings="selectionOptions">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" width="120" textAlign="Right">
        </e-column>
        <e-column field="CustomerID" headerText="Customer Name" width="150">
        </e-column>
        <e-column type="date" field="OrderDate" headerText="Order Date" width="130" format="yMd" 
        textAlign="Right"></e-column>
        <e-column field="Freight" headerText="Freight" width="120" format="C2" 
        textAlign="Right"></e-column>
        <e-column type="date" field="ShippedDate" headerText="Shipped Date" width="130" 
        format="yMd" textAlign="Right"></e-column>
        <e-column field="ShipCountry" headerText="Ship Country" 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,
      selectionOptions: { allowColumnSelection: true, type: "Multiple" },
    };
  },
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Select columns externally

You can perform single column selection, multiple column selection, and range of column selection externally in a Grid using built-in methods. This feature allows you to interact with specific columns within the Grid. The following topic demonstrates how you can achieve these selections using methods.

Single column selection

The Vue grid allows you to select a single column within the Grid. This feature is particularly useful when you want to focus on specific columns or perform actions on the data within a particular column.

To achieve single column selection, you can use the selectColumn method. This method selects the column by passing the column index as a parameter.

The following example, demonstrates how to select a single column within the Grid by obtaining the selected column index through a textbox component and passing these column index as argument to the selectColumn method. When the button event is triggered by clicking the Select Column button, a single column is selected within the Grid:

<template>
  <div id="app">
    <div>
      <label style="padding: 30px 17px 0 0">Enter the column index: </label>
      <ejs-textbox ref="textbox1" required  width="120"></ejs-textbox>
      <ejs-button style="margin-left: 10px" @click.native="onClick">Select Column</ejs-button>
    </div>
    <div style="padding: 20px 0px 0px 0px">
      <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions">
        <e-columns>
          <e-column field="OrderID" headerText="Order ID" textAlign="Right" 
          width="120"></e-column>
          <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
          <e-column field="ShipCountry" headerText="Ship Country" width="130"></e-column>
          <e-column field="Freight" headerText="Freight" format="C2" width="100">
          </e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { TextBoxPlugin } from '@syncfusion/ej2-vue-inputs';
import { data } from './datasource.js';

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

export default {
  data() {
    return {
      data: data,
      selectionOptions :{ allowColumnSelection: true,  type: 'Single' },
    };
  },
 methods: {
    onClick: function () {
        this.columnIndex = parseInt(this.$refs.textbox1.$el.value, 10); 
        if (!isNaN(this.columnIndex)) 
           this.$refs.grid.$el.ej2_instances[0].selectionModule.selectColumn(this.columnIndex);        
    }
 }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Multiple column selection

The Vue Grid allows you to select multiple columns within the Grid. This feature is particularly useful when you need to focus on or perform actions on several columns simultaneously.

To achieve multiple column selection, you can use the selectColumns method. This method selects the columns by passing an array of column indexes as a parameter.

The following example demonstrates how to select multiple columns in the Grid by calling the selectColumns method within the button click event and passing an array of column indexes as arguments.

<template>
  <div id="app">
    <div style="padding: 10px 0px 20px 0px">
      <ejs-button class="btn" @click.native="selectColumns([1, 2])">
      select [1, 2] </ejs-button>
      <ejs-button class="btn" @click.native="selectColumns([0, 2])">
      select [0, 2]</ejs-button>
      <ejs-button class="btn" @click.native="selectColumns([1, 3])">
      select [1, 3] </ejs-button>
      <ejs-button class="btn" @click.native="selectColumns([0,5])">
      select [0,5]</ejs-button>
      <ejs-button class="btn" @click.native="selectColumns([1,6])">
      select [1,6]</ejs-button>
    </div>
    <div style="padding: 10px 0px 20px 0px">
      <ejs-button class="btn" @click.native="selectColumns([0,2,5])">
      select [0,2,5]</ejs-button>
      <ejs-button class="btn" @click.native="selectColumns([1,3,6])">
      select [1,3,6]</ejs-button>
      <ejs-button class="btn" @click.native="selectColumns([2,4,6])">
      select [2,4,6]</ejs-button>
      <ejs-button class="btn" @click.native="selectColumns([0,3,5])">
      select [0,3,5]</ejs-button>
    </div>
    <div style="padding: 20px 0px 0px 0px">
      <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions">
        <e-columns>
          <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120">
          </e-column>
          <e-column field="CustomerID" headerText="Customer ID" width="120">
          </e-column>
          <e-column field="ShipCountry" headerText="Ship Country" width="130">
          </e-column>
          <e-column field="Freight" headerText="Freight" format="C2" width="100">
          </e-column>
          <e-column field="OrderDate" headerText="Order Date" format="C2" width="100">
          </e-column>
          <e-column field="ShipCity" headerText="Ship City" format="C2" width="100">
          </e-column>
          <e-column field="ShipName" headerText="Ship Name" format="C2" width="100">
          </e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </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,
      selectionOptions: { allowColumnSelection: true, type: "Multiple" },
    };
  },
  methods: {
    selectColumns: function (columns) {
      this.$refs.grid.$el.ej2_instances[0].selectionModule.clearColumnSelection();
      this.$refs.grid.$el.ej2_instances[0].selectionModule.selectColumns(columns);
    },
  },
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Range of column selection

Range of column selection allows you to select a group of columns within the Grid. This feature is particularly useful when you need to perform actions on a consecutive set of columns or focus on specific column ranges.

To achieve range of column selection, you can use the selectColumnsByRange method. This method selects the columns by specifying the start and end column indexes.

The following example demonstrates how to select a range of columns within the Grid by obtaining the selected column’s start index and end index through textbox components. Then, pass these start index and end index as arguments to the selectColumnsByRange method. When you trigger the button event by clicking the Select Columns button, a range of columns is selected within the Grid.

<template>
  <div id="app">
    <div>
      <label style="padding: 30px 17px 0 0">Enter the start column index: </label>
      <ejs-textbox ref="textbox" required width="120"></ejs-textbox>
    </div>
    <div style="padding-top: 10px">
      <label style="padding: 30px 17px 0 0">Enter the end column index: </label>
      <ejs-textbox ref="textbox1" required width="120"></ejs-textbox>
    </div>
    <div style="padding: 10px 0 0px 13%">
      <ejs-button id="button" @click.native="onClick">Select Columns</ejs-button>
    </div>        
    <div style="padding: 20px 0px 0px 0px">
      <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions">
        <e-columns>
          <e-column field="OrderID" headerText="Order ID" textAlign="Right" 
          width="120"></e-column>
          <e-column field="CustomerID" headerText="Customer ID" width="120">
          </e-column>
          <e-column field="ShipCountry" headerText="Ship Country" width="130">
          </e-column>
          <e-column field="Freight" headerText="Freight" format="C2" width="100">
          </e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { TextBoxPlugin } from '@syncfusion/ej2-vue-inputs';
import { data } from './datasource.js';
Vue.use(GridPlugin);
Vue.use(ButtonPlugin);
Vue.use(TextBoxPlugin);

export default {
  data() {
    return {
      data: data,
      selectionOptions :{ allowColumnSelection: true, type: 'Multiple' },
    };
  },
 methods: {
    onClick: function () {
        this.startIndex = parseInt(this.$refs.textbox.$el.value, 10);
        this.endIndex = parseInt(this.$refs.textbox1.$el.value, 10);
        this.$refs.grid.$el.ej2_instances[0].selectionModule.clearColumnSelection();
        if (!isNaN(this.startIndex) && !isNaN(this.endIndex)) {
        this.$refs.grid.$el.ej2_instances[0].selectionModule.selectColumnsByRange(this.startIndex, this.endIndex);
        }      
    }
 }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Select with existing column

Select with existing column allows you to add a column to the current selection without clearing the existing column selection in the Grid component. This feature is valuable when you want to expand your selection to include additional columns while preserving previously selected columns.

To achieve this, you can use the selectColumnWithExisting method. This method selects a column along with an existing column by specifying the column index as a parameter.

The following example demonstrates how to select a column with an existing column by obtaining the selected column index through a textbox component and passing this column index as an argument to the selectColumnWithExisting method. When you trigger the button event by clicking the Select Columns button, it selects the specified column along with any existing selections within the Grid.

<template>
  <div id="app">
    <div>
      <label style="padding: 30px 17px 0 0">Enter the column index: </label>
      <ejs-textbox ref="textbox" required width="120"></ejs-textbox>
      <ejs-button id="button" @click.native="onClick">Select Columns</ejs-button>
    </div>        
    <div style="padding: 20px 0px 0px 0px">
      <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions">
        <e-columns>
          <e-column field="OrderID" headerText="Order ID" textAlign="Right" 
          width="120"></e-column>
          <e-column field="CustomerID" headerText="Customer ID" width="120">
          </e-column>
          <e-column field="ShipCountry" headerText="Ship Country" width="130">
          </e-column>
          <e-column field="Freight" headerText="Freight" format="C2" width="100">
          </e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { TextBoxPlugin } from "@syncfusion/ej2-vue-inputs";
import { data } from "./datasource.js";
Vue.use(GridPlugin);
Vue.use(ButtonPlugin);
Vue.use(TextBoxPlugin);

export default {
  data() {
    return {
      data: data,
      selectionOptions: { allowColumnSelection: true, type: "Multiple" },
    };
  },
  methods: {
    onClick: function () {
      this.startIndex = parseInt(this.$refs.textbox.$el.value, 10);
      if (!isNaN(this.startIndex))
        this.$refs.grid.$el.ej2_instances[0].selectionModule.selectColumnWithExisting(this.startIndex);
    },
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Clear column selection programmatically

Clearing column selection programmatically in the Grid component is a useful feature when you want to remove any existing column selections. To achieve this, you can use the clearColumnSelection method.

The clearColumnSelection method is applicable when the selection type is set to Multiple or Single.

In the following example, it demonstrates how to clear column selection by calling the clearColumnSelection method in the button click event.

<template>
  <div id="app">
   <div style="padding: 20px 0px 0px 0px">
      <ejs-button id="button" @click.native='onClick'>Clear Column Selection</ejs-button>
    </div>
    <div style="padding: 20px 0px 0px 0px">
      <ejs-grid ref="grid" :dataSource='data' :selectionSettings='selectionOptions'>
        <e-columns>
          <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
          width=120></e-column>
          <e-column field='CustomerID' headerText='Customer ID' width=120>
          </e-column>
          <e-column field='ShipCountry' headerText='Ship Country' width=130>
          </e-column>
          <e-column field='Freight' headerText='Freight' format= 'C2' 
          width=100></e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </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,
      selectionOptions :{ allowColumnSelection: true},
    };
  },
 methods: {
    onClick: function () {
        this.$refs.grid.$el.ej2_instances[0].selectionModule.clearColumnSelection()
    }
 }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Column selection events

The Grid provides several events related to column selection that allow you to respond to and customize the behavior of column selection. Here are the available column selection events:

columnSelecting: This event is triggered before any column selection occurs. It provides an opportunity to implement custom logic or validation before a column is selected, allowing you to control the selection process.

columnSelected: This event is triggered after a column is successfully selected. You can use this event to perform actions or updates when a column is selected.

columnDeselecting: This event is triggered just before a selected column is deselected. It allows you to perform custom logic or validation to decide whether the column should be deselected or not.

columnDeselected: This event is triggered when a particular selected column is deselected. You can use this event to perform actions or validations when a column is no longer selected.

In the following example, column selection is canceled when the value of field is equal to CustomerID within the columnSelecting event. The headerCell background color changes to green when the columnSelected event is triggered, and it changes to red when the columnDeselecting event is triggered. Furthermore, column selection is canceled when the value of field is equal to CustomerID within the columnDeselected event is triggered. A notification message is displayed to indicate which event was triggered whenever a column is selected.

<template>
  <div id="app">
    <p id="message"></p>
    <div style="padding: 20px 0px 0px 0px">
      <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions"
        :columnSelected="columnSelected" :columnSelecting="columnselecting"
        :columnDeselected="columnDeselected" :columnDeselecting="columnDeselecting">
        <e-columns>
          <e-column field="OrderID" headerText="Order ID" textAlign="Right" 
          width="120"></e-column>
          <e-column field="CustomerID" headerText="Customer ID" width="120">
          </e-column>
          <e-column field="ShipCountry" headerText="Ship Country" width="130">
          </e-column>
          <e-column field="Freight" headerText="Freight" format="C2" width="100">
          </e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </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,
      message:"",
      selectionOptions :{ allowColumnSelection: true},
    };
  },
 methods: {
    columnSelected: function (args) {
        this.message = `Trigger columnSelected`;
        args.headerCell.style.backgroundColor = 'rgb(96, 158, 101)';
    },
    columnselecting: function (args) {
        this.message = `Trigger columnSelecting`;
        if (args.column.field == "CustomerID")
        args.cancel = true;
    },
    columnDeselected: function (args) {
        this.message = `Trigger columnDeselected`;
        args.headerCell.style.backgroundColor = 'rgb(245, 69, 69)';
    },
    columnDeselecting: function (args) {
        this.message = `Trigger columnDeselecting`;
        if (args.column.field == "Freight")
            args.cancel = true;
    }
 }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
#message {
    color: red;
    text-align: center;
    padding: 0px 0px 10px 0px;
  }
</style>