Complex data binding in Vue Grid component

16 Mar 20231 minute to read

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

    <div id="app">
        <ejs-grid :dataSource='data' :height='315'>
                <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>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';


export default {
  data() {
    return {
      data: data
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";