Auto generated columns in Vue Grid component

28 Mar 202311 minutes to read

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.

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.

How to set isPrimaryKey for auto generated columns when editing is enabled

Primary key can be defined in the declaration of column object of the grid. When we didn’t declare the columns, the grid will generate the columns automatically. For these auto generated columns, you can set isPrimaryKey column property as true by using the following ways,

If Primary key “column index” is known then refer the following code example

app.vue

<template>
  <div id="app">
      <ejs-grid ref='grid' :dataSource="data" :editSettings='editSettings' :dataBound='dataBound'> </ejs-grid>
  </div>
</template>
<script>
import Vue from 'vue';
import { GridPlugin, Edit } 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 }],
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
    }
  },
  provide: {
    grid: [Edit]
  },
  methods: {
    dataBound: function() {
        this.$refs.grid.ej2Instances.columns[0].isPrimaryKey = true;
    }
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

If Primary key “column fieldname” is known then you can get the column by using var column = grid.getColumnByField('OrderID') and then set primary key by defining column.isPrimaryKey = 'true'

Set column options to auto generated columns

You can set column options such as format, width to the auto generated columns by using dataBound event of the grid.

In the below example, width is set for OrderID column, date type is set for OrderDate column and numeric type is set for Freight column.

app.vue

<template>
  <div id="app">
      <ejs-grid ref='grid' :dataSource="data" :dataBound='dataBound'> </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', Freight: 32.3800, OrderDate: "1996-07-02T00:00:00.000Z" },
    { OrderID: 10249, CustomerID: 'TOMSP', Freight: 32.3800, OrderDate: "1996-07-19T00:00:00.000Z" },
    { OrderID: 10250, CustomerID: 'HANAR', Freight: 32.3800, OrderDate: "1996-07-22T00:00:00.000Z" }]
    }
  },
  methods: {
      dataBound: function() {
        for (var i = 0; i < this.$refs.grid.ej2Instances.columns.length; i++) {
            this.$refs.grid.ej2Instances.columns[0].width = 120;
            if(this.$refs.grid.ej2Instances.columns[i].field === "OrderDate"){
                this.$refs.grid.ej2Instances.columns[i].type="date";
            }
            if (this.$refs.grid.ej2Instances.columns[i].type === "date") {
                this.$refs.grid.ej2Instances.columns[i].format = { type: "date", format: "dd/MM/yyyy" };
            }
            this.$refs.grid.ej2Instances.columns[2].format = "P2";
        }
        this.$refs.grid.ej2Instances.refreshColumns();
    }
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

How to auto-generate columns from complex column fields to flat columns

By default, the auto-generated columns will create multiple column fields when grid has complex datasource. Hereby using ValueAccessor property, complex columns data are combined and generated in a single column.

In the below example, we set the ValueAccessor property to those columns whose field type is Object.

app.vue

<template>
  <div id="app">
      <ejs-grid
        :dataSource="data"
        id="Grid"
        ref="grid"
        :pageSettings="pageSettings"
        :allowPaging="true"
        :editSettings="editSettings"
        :toolbar="toolbar"
        :dataBound="dataBound"
      ></ejs-grid>
  </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Edit, Toolbar, Page } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data
      flag: true,
      editSettings: {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true
      },
      pageSettings: { pageSize: 5 },
      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"]
    };
  },
  methods: {
    dataBound: function() {
      if (this.flag) {
        this.flag = false;
        var cols = Object.keys(this.$refs.grid.getCurrentViewRecords()[0]);
        var length = cols.length;
        var col = [];
        for (var i = 0; i < length; i++) {
          var field = cols[i];
          var obj = {};
          obj["field"] = field;
          var mon = this.$refs.grid.getCurrentViewRecords()[i][field];
          var type = typeof mon;
          if (type === "object") {
            obj["valueAccessor"] = (field, data, column) => {
              return (
                data[field].Name +
                " , " +
                data[field].Unit +
                " , " +
                data[field].VSetMax
              );
            };
          }
          col.push(obj);
        }
        this.$refs.grid.setProperties({ columns: col });
      }
    }
  },
  provide: {
    grid: [Edit, Toolbar, Page]
  }
};
</script>

<style>
@import "https://cdn.syncfusion.com/ej2/material.css";
</style>