Row in Vue Grid component

16 Mar 202312 minutes to read

It represents the record details that are fetched from the data source.

Row customization

Using event

You can customize the appearance of the Row by using the rowDataBound event.The rowDataBound event triggers for every row. In that event handler, you can get RowDataBoundEventArgs which contain details of the row.

app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource="data"  :enableHover='false' :allowSelection='false' height='315' :rowDataBound='rowDataBound'>
          <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
            <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' type='date' width=120> </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
    };
  },
  methods: {
    rowDataBound: function(args) {
        if (args.data['Freight'] < 30) {
            args.row.classList.add('below-30');
        } else if (args.data['Freight'] < 80) {
            args.row.classList.add('below-80');
        } else {
            args.row.classList.add('above-80');
        }
    }
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
  .below-30 {
    background-color: orangered;
  }

  .below-80 {
    background-color: yellow;
  }

  .above-80 {
    background-color: greenyellow
  }
</style>

Using CSS customize alternate rows

You can change the grid’s alternative rows’ background color by overriding the .e-altrow class.

.e-grid .e-altrow {
    background-color: #fafafa;
}

Please refer the following example.

app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource="data">
          <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
            <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' type='date' width=120> </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
    };
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
  .e-grid .e-altrow {
    background-color: #fafafa;
  }
</style>

Using CSS customize selected row

The background color of the selected row can be changed by overriding the following CSS style.

.e-grid td.e-active {
    background-color: #f9920b;
}

This is demonstrated in the following sample:

app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource="data">
          <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
            <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' type='date' width=120> </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
    };
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
  .e-grid td.e-active {
      background-color: #f9920b;
  }
</style>

Adding a new row programmatically

The Grid can add a new row between the existing rows using the addRecord method of the Grid.

This is demonstrated in the following sample:

app.vue
<template>
    <div id="app">
       <button id="add" @click="clickRow">Add Row</button>
       <br /><br />
        <ejs-grid  ref="grid" :dataSource="data" :editSettings='editSettings'>
          <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90 isPrimaryKey="true"></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=120> </e-column>
          </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }
    };
  },
  methods: {
     clickRow: function () {
        this.$refs.grid.ej2Instances.addRecord(
         { OrderID: 3232, CustomerID: 'ALKIT', Freight: 40, ShipCity: 'London'}, 2);
    }
  },
  provide: {
    grid: [Page, Edit]
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

When working with remote data, it is impossible to add a new row between the existing rows.

How to get the row information when hovering over the cell

It is possible to get the row information when hovering over the specific cell. This can be achieved by using the rowDataBound event and getRowInfo method of the Grid.

In the following sample, the mouseover event is bound to a grid row in the rowDataBound event, and when hovering over the specific cell, using the getRowInfo method, row information will be retrieved and displayed in the console.

app.vue
<template>
    <div id="app">
        <ejs-grid id="grid" :dataSource="data" :editSettings='editSettings' :rowDataBound='rowDataBound'>
          <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
            <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' type='date' width=120> </e-column>
          </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
import { MouseEventArgs } from '@syncfusion/ej2-base';
Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }
    };
  },
  methods: {
    rowDataBound(args){
      let gridElement = document.getElementById('grid').ej2_instances[0];
      args.row.addEventListener('mouseover', function(e) {
        console.log(gridElement.getRowInfo(e.target))
    })
    }
  },
  provide: {
    grid: [Edit]
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>