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.
<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.
<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:
<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:
<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.
<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>