Cell selection in Vue Treegrid component

16 Mar 20232 minutes to read

Cell Selection can be done through simple Mouse down or Arrow keys(up, down, left and right).

TreeGrid supports two types of cell selection mode which can be set by using
selectionSettings.cellSelectionMode. They are:

  • Flow - The Flow value is set by default. Select range of cells between the start index and end index which includes in between cells of rows.
  • Box - Select range of cells within the start and end column indexes which includes in between cells of rows within the range.
<template>
<div id="app">
        <ejs-treegrid ref='treegrid' :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' :allowPaging='true' :selectionSettings='selectionOptions'>
            <e-columns>
                <e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></e-column>
                <e-column field='taskName' headerText='Task Name' width='160'></e-column>
                <e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
                <e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
            </e-columns>
        </ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin, TreeGridComponent,  Page } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";

Vue.use(TreeGridPlugin);

let initialGridLoad = true;

export default {
  data ()  {
    return {
      data: sampleData,
      selectionOptions: { cellSelectionMode: 'Box', type: 'Multiple', mode: 'Cell' }
    };
  },
  provide: {
      treegrid: [ Page ]
  }
}
</script>

Cell Selection requires the selectionSettings.mode to be Cell or Both and type should be Multiple.