Column selection in Vue Grid component

16 Mar 20232 minutes to read

Column selection can be done through simple mouse down or arrow keys.

You can enable column selection by setting the selectionSettings.allowColumnSelection property as true.

app.vue

<template>
    <div id="app">
        <ejs-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>
</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-vue-grids/styles/material.css";
</style>