Row in Vue Grid component

3 Sep 202424 minutes to read

Each row typically represents a single record or item from a data source. Rows in a grid are used to present data in a tabular format. Each row displays a set of values representing the fields of an individual data record. Rows allow users to interact with the data in the grid. You can select rows, edit cell values, perform sorting or filtering operations, and trigger events based on actions.

Customize row styles

Customizing the styles of rows in a Syncfusion Grid allows you to modify the appearance of rows to meet your design requirements. This feature is useful when you want to highlight certain rows or change the font style, background color, and other properties of the row to enhance the visual appeal of the grid. To customize the row styles in the grid, you can use CSS, properties, methods, or event support provided by the Syncfusion Vue Grid component.

Using event

You can customize the appearance of the rows by using the rowDataBound event. This event triggers for every row when it is bound to the data source. In the event handler, you can get the RowDataBoundEventArgs object, which contains details of the row. You can use this object to modify the row’s appearance, add custom elements, or perform any other customization.

Here’s an example of how you can use the rowDataBound event to customize the styles of rows based on the value of the Freight column. This example involves checking the value of the Freight column for each row and adding a CSS class to the row based on the value. The CSS classes below-30, below-80, and above-80 can then be defined in your stylesheet to apply the desired styles to the rows.

<template>
  <div id="app">
    <ejs-grid ref="grid" :dataSource="data" :enableHover="false" :allowSelection="false" :height="315"
      :rowDataBound="rowDataBound">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
        <e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="80"></e-column>
        <e-column field="ShipCity" headerText="Ship City" width="130"></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script setup>

import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
const rowDataBound = function (args) {
  if (args.data["Freight"] < 30) {
    args.row.classList.add("below-30");
  } else if (args.data["Freight"] >= 30 && args.data["Freight"] < 80) {
    args.row.classList.add("below-80");
  } else {
    args.row.classList.add("above-80");
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";

.below-30 {
  background-color: rgb(211, 225, 248);
}

.below-80 {
  background-color: rgb(163, 236, 217);
}

.above-80 {
  background-color: rgb(220, 248, 177);
}</style>
<template>
  <div id="app">
    <ejs-grid ref="grid" :dataSource="data" :enableHover="false" :allowSelection="false" :height="315" :rowDataBound="rowDataBound">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
        <e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="80"></e-column>
        <e-column field="ShipCity" headerText="Ship City" width="130"></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>

import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
    };
  },
  methods: {
    rowDataBound: function (args) {
      if (args.data["Freight"] < 30) {
        args.row.classList.add("below-30");
      } else if (args.data["Freight"] >= 30 && args.data["Freight"] < 80) {
        args.row.classList.add("below-80");
      } else {
        args.row.classList.add("above-80");
      }
    },
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
.below-30 {
  background-color: rgb(211, 225, 248);
}
.below-80 {
  background-color: rgb(163, 236, 217);
}
.above-80 {
  background-color: rgb(220, 248, 177);
}
</style>

The queryCellInfo event can also be used to customize cells and is triggered for every cell in the grid. It can be useful when you need to customize cells based on certain conditions or criteria.

Using CSS

You can apply styles to the rows using CSS selectors. The Grid provides a class name for each row element, which you can use to apply styles to that specific row.

Customize alternate rows

You can customize the appearance of the alternate rows using CSS. This can be useful for improving the readability of the data and making it easier to distinguish between rows. By default, Syncfusion Grid provides the CSS class .e-altrow to style the alternate rows. You can customize this default style by overriding the .e-altrow class with your custom CSS styles.

To change the background color of the alternate rows, you can add the following CSS code to your application’s stylesheet:

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

Here’s an example of how to use the .e-altrow class to style alternate rows:

<template>
  <div id="app">
    <ejs-grid :dataSource='data'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=140></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C' width=120></e-column>
        <e-column field='OrderDate' type="Date" headerText='Order Date' textAlign='Right' format='yMd' width=140></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script setup>

import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
.e-grid .e-altrow {
  background-color: #aaf1eb;
}
</style>
<template>
  <div id="app">
    <ejs-grid :dataSource='data'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=140></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C' width=120></e-column>
        <e-column field='OrderDate' type="Date" headerText='Order Date' textAlign='Right' format='yMd' width=140></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>

import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
    };
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
.e-grid .e-altrow {
  background-color: #aaf1eb;
}
</style>

Customize selected row

You can customize the appearance of the selected row using CSS. This is useful when you want to highlight the currently selected row for improve the visual appeal of the Grid. By default, the Grid provides the CSS class .e-selectionbackground to style the selected row. You can customize this default style by overriding the .e-selectionbackground class with your own custom CSS styles.

To change the background color of the selected row, you can add the following CSS code to your application:

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

Here’s an example of how to use the .e-selectionbackground class to style the selected row:

<template>
  <div id="app">
    <ejs-grid :dataSource='data'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=140></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C' width=120></e-column>
        <e-column field='OrderDate' type="Date" headerText='Order Date' textAlign='Right' format='yMd' width=140></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script setup>

import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
.e-grid .e-row .e-selectionbackground {
  background-color: #f9920b;
}
</style>
<template>
  <div id="app">
    <ejs-grid :dataSource='data'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=140></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C' width=120></e-column>
        <e-column field='OrderDate' type="Date" headerText='Order Date' textAlign='Right' format='yMd' width=140></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>

import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
    };
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
.e-grid .e-row .e-selectionbackground {
  background-color: #f9920b;
}
</style>

Using method

The Grid provides below methods to customize the appearance of the grid rows :

  1. getRowByIndex: This method returns the HTML element of a row at the specified index. You can use this method to apply custom styles to a specific row.
  2. getRowIndexByPrimaryKey: This method returns the index of the row with the specified primary key. You can use this method to get the index of a specific row and then apply custom styles to it.
  3. getRows: This method returns an array of all the row elements in the Grid. You can use this method to apply custom styles to all rows or to a specific set of rows based on some condition.
  4. getRowInfo: This method returns the data object and index of the row corresponding to the specified row element. You can use this method to apply custom styles based on the data in a row.
  5. getSelectedRowIndexes: This method returns an array of the indexes of the selected rows in the Grid. You can use this method to apply custom styles to the selected rows.
  6. getSelectedRows:This method returns an array of the HTML elements representing the selected rows in the grid. You can use this method to directly loop through the selected rows and customize their styles.

The following example demonstrates how to use getRowByIndex methods to customize the appearance of the row inside the dataBound event of the grid.

<template>
  <div id="app">
    <ejs-grid ref="grid" :dataSource="data" :dataBound="customizeRows">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="120">
        </e-column>
        <e-column field="Freight" headerText="Freight" textAlign="Right" format="C" width="100"></e-column>
        <e-column field="OrderDate" type="Date" headerText="Order Date" textAlign="Right" format="yMd" width="100"></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
const grid = ref(null);
    const customizeRows = function () {
      grid.value.getRowByIndex(2).style.background = "rgb(193, 228, 234)";
    }
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
  <div id="app">
    <ejs-grid ref="grid" :dataSource="data" :dataBound="customizeRows">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="120">
        </e-column>
        <e-column field="Freight" headerText="Freight" textAlign="Right" format="C" width="100"></e-column>
        <e-column field="OrderDate" type="Date" headerText="Order Date" textAlign="Right" format="yMd" width="100"></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>

import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
    };
  },
  methods: {
    customizeRows: function () {
      this.$refs.grid.ej2Instances.getRowByIndex(2).style.background = "rgb(193, 228, 234)";
    },
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Row height

The Syncfusion Grid allows you to customize the height of rows based on your needs. This feature can be useful when you need to display more content in a row or when you want to reduce the height of rows to fit its content. You can achieve this by using the rowHeight property of the Grid component. This property allows you to change the height of the entire grid row to your desired value.

In the below example, we will demonstrate how to dynamically change the height of the rows using the rowHeight property.

<template>
  <div id="app">
    <div>
      <ejs-button id="small" cssClass="e-small" v-on:click="clickHandler">
        Change height 20px</ejs-button>
      <ejs-button id="medium" cssClass="e-small" v-on:click="clickHandler">
        Default height 42px</ejs-button>
      <ejs-button id="big" cssClass="e-small" v-on:click="clickHandler">
        Change height 60px</ejs-button>
    </div>
    <div style="padding-top:20px">
      <ejs-grid ref="grid" :dataSource='data' :rowHeight='42' height='400'>
        <e-columns>
          <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'>
          </e-column>
          <e-column field='CustomerID' headerText='Customer Name' width='150'>
          </e-column>
          <e-column field='OrderDate' type="Date" headerText='Order Date' width='130' format="yMd" textAlign='Right'>
          </e-column>
          <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>
          <e-column field='ShippedDate' type="Date" headerText='Shipped Date' width='140' format='yMd'
            textAlign='Right'></e-column>
          <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { data } from "./datasource.js";
const grid = ref(null);
const clickHandler = function (args) {
  const heightRow = {
    small: 20,
    medium: 40,
    big: 60,
  }
  grid.value.ej2Instances.rowHeight = heightRow[args.target.id];
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
  <div id="app">
    <div>
      <ejs-button id="small" cssClass="e-small" v-on:click="clickHandler">
      Change height 20px</ejs-button>
      <ejs-button id="medium" cssClass="e-small" v-on:click="clickHandler">
      Default height 42px</ejs-button>
      <ejs-button  id="big" cssClass="e-small" v-on:click="clickHandler">
      Change height 60px</ejs-button>
    </div>
    <div style="padding-top:20px">
      <ejs-grid ref="grid" :dataSource='data' :rowHeight='42' height='400' >
        <e-columns>
          <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'>
          </e-column>
          <e-column field='CustomerID' headerText='Customer Name' width='150'>
          </e-column>
          <e-column field='OrderDate' type="Date" headerText='Order Date' width='130' format="yMd" 
          textAlign='Right'> </e-column>
          <e-column field='Freight' headerText='Freight' width='120' format='C2'
          textAlign='Right'></e-column>
          <e-column field='ShippedDate' type="Date" headerText='Shipped Date' width='140' format='yMd' 
          textAlign='Right'></e-column>
          <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 
        </e-columns>
      </ejs-grid>
      </div>
  </div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
    };
  },
  methods: {
    clickHandler: function (args) {
      const heightRow = {
        small: 20,
        medium: 40,
        big: 60,
      };
      this.$refs.grid.ej2Instances.rowHeight = heightRow[args.target.id];
    },
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

  • The rowHeight property can only be used to set the height of the entire grid row. It cannot be used to set the height of individual cells within a row.
  • The rowHeight property applies the height to all rows in the grid, including the header and footer rows.
  • You can also set the height for a specific row using the rowHeight property of the corresponding row object in the rowDataBound event.

Customize row height for particular row

Customizing the row height for a particular row can be useful when you want to display more content in a particular row, reduce the height of a row to fit its content, or make a specific row stand out from the other rows in the grid. This can be achieved by using the rowHeight property of the Grid component along with the rowDataBound event.

The rowHeight property of the Grid component allows you to set the height of all rows in the grid to a specific value. However, if you want to customize the row height for a specific row based on the row data, you can use the rowDataBound event. This event is triggered every time a request is made to access row information, element, or data, and before the row element is appended to the Grid element.

In the below example, the row height for the row with OrderID as ‘10249’ is set as ‘90px’ using the rowDataBound event.

<template>
  <div id="app">
    <ejs-grid ref="grid" :dataSource='data' :height='315' :rowDataBound='rowDataBound'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=80></e-column>
        <e-column field='ShipCity' headerText='Ship City' width=130 ></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script setup>

import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
    const rowDataBound = function (args) {
      if (args.data["OrderID"] === 10249) {
        args.rowHeight = 90;
      }
    }
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
  <div id="app">
    <ejs-grid ref="grid" :dataSource='data' :height='315' :rowDataBound='rowDataBound'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=80></e-column>
        <e-column field='ShipCity' headerText='Ship City' width=130 ></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>

import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
    };
  },
  methods: {
    rowDataBound: function (args) {
      if (args.data["OrderID"] === 10249) {
        args.rowHeight = 90;
      }
    },
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

  • In virtual scrolling mode, it is not applicable to set different row heights.
  • You can customize the row height of multiple rows by checking the relevant criteria in the rowDataBound event and setting the rowHeight property accordingly.
  • In the rowDataBound event handler, you can access the current row using the args.row property and set the rowHeight property for that row using the setAttribute method.

Row hover

The Row Hover feature in Grid provides a visual effect when the mouse pointer hovers over the rows, making it easy to highlight and identify the selected row. This feature can also improve the readability of data in the grid. The row hover effect can be enabled or disabled using the enableHover property of the Grid component.

By default, the enableHover property is set to true, which means that the row hovering effect is enabled. To disable the row hover effect, set the enableHover property to false.

Here is an example that demonstrates how to enable/disable the row hover based on the Switch component:

<template>
  <div id="app">
    <div style="padding:0px 0px 20px 0px; display:flex">
      <label style="margin-right:20px"> Enable/Disable Row Hover</label>
      <ejs-switch :checked="true" :change="toggleRowHover"></ejs-switch>
    </div>
    <ejs-grid ref="grid" :dataSource='data'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
        <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
        <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { SwitchComponent as EjsSwitch } from "@syncfusion/ej2-vue-buttons";
import { data } from "./datasource.js";
const grid = ref(null);
const toggleRowHover = function (args) {
  grid.value.ej2Instances.enableHover = args.checked
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
  <div id="app">
    <div style="padding:0px 0px 20px 0px; display:flex">
      <label style="margin-right:20px"> Enable/Disable Row Hover</label>
      <ejs-switch :checked="true" :change="toggleRowHover"></ejs-switch>
    </div>
    <ejs-grid ref="grid" :dataSource='data'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
        <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
        <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>

import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { SwitchComponent } from "@syncfusion/ej2-vue-buttons";
import { data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-switch":SwitchComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
    };
  },
  methods: {
    toggleRowHover: function (args) {
      this.$refs.grid.ej2Instances.enableHover = args.checked
    },
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

The enableHover property applies to the entire grid, not individual rows or columns.

How to get the row information when hovering over the cell

You can retrieve row information when hovering over a specific cell. This can be useful if you want to display additional details or perform some action based on the data in the row. This can be achieved by using the rowDataBound event and the getRowInfo method of the Grid.

  • The rowDataBound event is triggered every time a request is made to access row information, element, or data, before the row element is appended to the Grid element.
  • The getRowInfo method is used to retrieve the row information when hovering over a specific cell. This method takes a single parameter, which is the target element that is being hovered over.

Here’s an example that demonstrates how to use the rowDataBound event and getRowInfo method to retrieve the row information when hovering over a cell in the Syncfusion Grid.

<template>
  <div id="app">
    <div id='show' style="padding:0px 0px 20px 0px;" ></div>
      <ejs-grid ref="grid" :dataSource='data' :rowDataBound='rowDataBound'>
        <e-columns>
          <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
          <e-column field='CustomerID' headerText='Customer ID' width=140></e-column>
          <e-column field='Freight' headerText='Freight' textAlign='Right' format='C' width=120></e-column>
          <e-column field='OrderDate' type="Date" headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
        </e-columns>
      </ejs-grid>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
const grid  = ref(null);
    const rowDataBound = function (args) {
      args.row.addEventListener("mouseover", (e) => {
        const rowInformation = grid.value.getRowInfo(e.target);
        document.getElementById("show").innerHTML = `
        <table style="border-collapse: collapse; width: 600px;">
          <tr style="border: 2px solid;">
            <td style="padding: 2px;"><b>Row Information:</b></td>
          </tr>
          <tr style="border: 2px solid; padding: 8px;">
            <th style="border: 2px solid; padding: 8px; width: 120px;"><b>Class Name</b>
            </th>
            <td style="border: 2px solid; padding: 8px;">${rowInformation.row.className}
            </td>
          </tr>
          <tr style="border: 2px solid;">
            <th style="border: 2px solid; padding: 8px;"><b>Row Index</b>
            </th>
            <td style="border: 2px solid; padding: 8px;">${rowInformation.rowIndex}
          </td>
          </tr>
         </table>`;
      });
    }
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
  <div id="app">
    <div id='show' style="padding:0px 0px 20px 0px;" ></div>
      <ejs-grid ref="grid" :dataSource='data' :rowDataBound='rowDataBound'>
        <e-columns>
          <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
          <e-column field='CustomerID' headerText='Customer ID' width=140></e-column>
          <e-column field='Freight' headerText='Freight' textAlign='Right' format='C' width=120></e-column>
          <e-column field='OrderDate' type="Date" headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
        </e-columns>
      </ejs-grid>
  </div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
    };
  },
  methods: {
    rowDataBound: function (args) {
      args.row.addEventListener("mouseover", (e) => {
        const rowInformation = this.$refs.grid.ej2Instances.getRowInfo(e.target);
        document.getElementById("show").innerHTML = `
        <table style="border-collapse: collapse; width: 600px;">
          <tr style="border: 2px solid;">
            <td style="padding: 2px;"><b>Row Information:</b></td>
          </tr>
          <tr style="border: 2px solid; padding: 8px;">
            <th style="border: 2px solid; padding: 8px; width: 120px;"><b>Class Name</b>
            </th>
            <td style="border: 2px solid; padding: 8px;">${rowInformation.row.className}
            </td>
          </tr>
          <tr style="border: 2px solid;">
            <th style="border: 2px solid; padding: 8px;"><b>Row Index</b>
            </th>
            <td style="border: 2px solid; padding: 8px;">${rowInformation.rowIndex}
          </td>
          </tr>
         </table>`;
      });
    },
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

The getRowInfo method can only be used in the rowDataBound event. Attempting to use it elsewhere will result in an error.

Row pinning (Frozen)

The Syncfusion Vue Grid allows you to freeze rows to keep them visible while scrolling vertically through large datasets. This feature enhances the experience by maintaining important information within view at all times.

In the following example, the frozenRows property is set to 2. This configuration freezes the top three rows of the grid, and they will remain fixed in their positions while the rest of the grid can be scrolled vertically.

<template>
  <div id="app">
    <div style="display: inline-block; padding: 0px 0 20px 0">
      <label style="padding: 27px 17px 0 0;"> Change the frozen rows: </label>
      <ejs-numerictextbox ref="frozen" min="0" max="5" :validateDecimalOnType="true" decimals="0" format="n" value="2"
        width="100px"></ejs-numerictextbox>
      <ejs-button style="margin-left:10px" v-on:click="frozenRowsFn">Update</ejs-button>
    </div>
    <ejs-grid ref="grid" style="padding: 5px 5px" :dataSource='data' height=315 :frozenRows=2 :allowSelection='false'
      :enableHover='false'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
        <e-column field='OrderDate' headerText='Order Date' width=100 format='yMd' textAlign='Right'></e-column>
        <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=80></e-column>
        <e-column field='ShipName' headerText='Ship Name' width=130></e-column>
        <e-column field='ShipAddress' headerText='Ship Address' width=140></e-column>
        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' width=100></e-column>
        <e-column field='ShipRegion' headerText='Ship Region' width=80></e-column>
        <e-column field='ShipPostalCode' headerText='Ship Postal Code' width=110></e-column>
        <e-column field='Freight' headerText='Freight' width=80></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Freeze } from "@syncfusion/ej2-vue-grids";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { NumericTextBoxComponent as EjsNumerictextbox } from "@syncfusion/ej2-vue-inputs";
import { data } from "./datasource.js";
const grid = ref(null);
const frozen = ref(2);
const frozenRowsFn = function () {
  grid.value.ej2Instances.frozenRows = parseInt(frozen.value.ej2Instances.value);
}
provide('grid', [Freeze]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";</style>
<template>
  <div id="app">
    <div style="display: inline-block; padding: 0px 0 20px 0">
    <label style="padding: 27px 17px 0 0;"> Change the frozen rows: </label>
    <ejs-numerictextbox ref="frozen" min="0"  max="5" :validateDecimalOnType="true" decimals="0" format="n" value="2" width="100px"></ejs-numerictextbox>
    <ejs-button style="margin-left:10px" v-on:click="frozenRowsFn">Update</ejs-button>
  </div>
  <ejs-grid ref="grid" style="padding: 5px 5px" :dataSource='data' height=315 :frozenRows=2 :allowSelection='false'  :enableHover='false'>
    <e-columns>
      <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
      <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
      <e-column field='OrderDate' headerText='Order Date' width=100 format='yMd' textAlign='Right'></e-column>
      <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=80></e-column>
      <e-column field='ShipName' headerText='Ship Name' width=130></e-column>
      <e-column field='ShipAddress' headerText='Ship Address' width=140></e-column>
      <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
      <e-column field='ShipCountry' headerText='Ship Country' width=100></e-column>
      <e-column field='ShipRegion' headerText='Ship Region' width=80></e-column>
      <e-column field='ShipPostalCode' headerText='Ship Postal Code' width=110></e-column>
      <e-column field='Freight' headerText='Freight' width=80></e-column>
    </e-columns>
  </ejs-grid>
  </div>
</template>
<script>

import { GridComponent, ColumnsDirective, ColumnDirective, Freeze } from "@syncfusion/ej2-vue-grids";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { NumericTextBoxComponent } from "@syncfusion/ej2-vue-inputs";
import { data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-numerictextbox":NumericTextBoxComponent,
"ejs-button":ButtonComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
    };
  },
  methods: {
    frozenRowsFn: function () {
      this.$refs.grid.ej2Instances.frozenRows = parseInt(this.$refs.frozen.ej2Instances.value);
    },
  },
  provide: { grid: [Freeze] },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

  • Frozen rows should not be set outside the grid view port.
  • Frozen Grid will support row virtualization feature, which helps to improve the Grid performance while loading a large dataset.
  • The frozen feature is supported only for the rows that are visible in the current view.
  • You can use both frozenColumns property and frozenRows property in the same application.

Change default frozen rows line color

You can easily customize the frozen line background color of frozen rows in the Syncfusion Grid component by applying custom CSS styles to the specific frozen row. This allows you to change the background color of frozen rows to match your application’s design and theme.

To change the default frozen rows line color, you can use the following CSS class:

.e-grid .e-frozenrow-border {
    background-color: rgb(5, 114, 47);
}

By applying this CSS class, you can set the background color of frozen rows to the specified RGB color. The following example demonstrates how to change the default frozen rows line color using CSS.

<template>
  <div id="app">
    <ejs-grid ref="grid" style="padding: 5px 5px" :dataSource='data' height=315 :frozenRows=3 :allowSelection='false'  :enableHover='false'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
        <e-column field='OrderDate' headerText='Order Date' width=100 format='yMd' textAlign='Right'></e-column>
        <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=80></e-column>
        <e-column field='ShipName' headerText='Ship Name' width=130></e-column>
        <e-column field='ShipAddress' headerText='Ship Address' width=140></e-column>
        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' width=100></e-column>
        <e-column field='ShipRegion' headerText='Ship Region' width=80></e-column>
        <e-column field='ShipPostalCode' headerText='Ship Postal Code' width=110></e-column>
        <e-column field='Freight' headerText='Freight' width=80></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Freeze } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
provide('grid', [Freeze]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
.e-grid .e-frozenrow-border {
    background-color: rgb(5, 114, 47);
}
</style>
<template>
  <div id="app">
    <ejs-grid ref="grid" style="padding: 5px 5px" :dataSource='data' height=315 :frozenRows=3 :allowSelection='false'  :enableHover='false'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
        <e-column field='OrderDate' headerText='Order Date' width=100 format='yMd' textAlign='Right'></e-column>
        <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=80></e-column>
        <e-column field='ShipName' headerText='Ship Name' width=130></e-column>
        <e-column field='ShipAddress' headerText='Ship Address' width=140></e-column>
        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' width=100></e-column>
        <e-column field='ShipRegion' headerText='Ship Region' width=80></e-column>
        <e-column field='ShipPostalCode' headerText='Ship Postal Code' width=110></e-column>
        <e-column field='Freight' headerText='Freight' width=80></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Freeze } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
    data: data,
    };
  },
  provide: { grid: [Freeze] }
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
.e-grid .e-frozenrow-border {
    background-color: rgb(5, 114, 47);
}
</style>

Deprecated methods

Previous Current Explanation
getMovableRows() gridInstance.getMovableRows()[0].querySelectorAll(‘.e-unfreeze’) getRows() gridInstance.getRows()[0].querySelectorAll(‘.e-unfreeze’) The previous architecture used separate tables for left, right, and movable contents, returning only movable rows when calling the method, whereas the current architecture combines them into one table, returning all rows and introduces the e-unfreeze class for selecting movable rows
getFrozenRightRows() gridInstance.getFrozenRightRows()[0].querySelectorAll(‘.e-rightfreeze’) getRows() gridInstance.getRows()[0].querySelectorAll(‘.e-rightfreeze’) In the previous architecture, it returned only the table rows from the right freeze table, but in the current architecture, all rows of the entire table are returned, introducing the e-rightfreeze class for selecting right freeze rows.
getMovableRowByIndex()
getFrozenRowByIndex()
getFrozenRightRowByIndex() 		getRowByIndex() gridInstance.getRowByIndex(1).querySelectorAll(‘.e-unfreeze’) In the previous architecture, separate methods were used to select rows from different table sections, while in the current architecture, the getMovableRowByIndex(), getFrozenRightRowByIndex(), and getFrozenRowByIndex() methods now return the same table row based on the given index. Additionally, class names for table cells (td’s) have been separated into e-leftfreeze, e-unfreeze, and e-rightfreeze, making it easier to customize cells within a row.
getMovableCellFromIndex()
getFrozenRightCellFromIndex() 		getCellFromIndex() gridInstance.getCellFromIndex(1,1) In the previous approach, the getMovableCellFromIndex() method was used to choose a specific cell within the movable table, and the getFrozenRightCellFromIndex() method was utilized to target a particular cell within the right freeze table. However, in the current architecture, you have the flexibility to select a specific cell in either the movable or right freeze table by using both the getFrozenRightCellFromIndex() and getMovableCellFromIndex() methods. This new method simplifies the process of selecting and retrieving specific cells within these tables, offering more versatility and convenience.
getMovableDataRows()
getFrozenRightDataRows()
getFrozenDataRows() 		getDataRows() gridInstance.getDataRows()[0].querySelectorAll(‘.e-unfreeze’) In the previous approach, there were separate methods (getMovableDataRows(), getFrozenRightDataRows(), and getFrozenDataRows()) for obtaining viewport data rows from the freeze, movable, and right tables individually. However, in the new approach, these methods have been enhanced to return the entire viewport data rows for all sections together, simplifying data retrieval. You can now extract specific cells within these rows using selectors such as e-leftfreeze for the left freeze, e-unfreeze for the movable, and e-rightfreeze for the right freeze tables, providing greater flexibility in working with the data.
getMovableColumnHeaderByIndex()
getFrozenRightColumnHeaderByIndex()
getFrozenLeftColumnHeaderByIndex() 		getColumnHeaderByIndex() gridInstance.getColumnHeaderByIndex(1) In the previous architecture, the methods selected movable, right freeze, and left freeze headers separately. However, in the new approach, when using the getMovableColumnHeaderByIndex(), getFrozenRightColumnHeaderByIndex(), and getFrozenLeftColumnHeaderByIndex() methods, you will still obtain the same results as in the previous architecture.

When a validation message is displayed in the frozen part (Left, Right, Fixed) of the table, scrolling is prevented until the validation message is cleared.

Adding a new row programmatically

The Syncfusion Grid provides a way to add a new row to the grid programmatically. This feature is useful when you want to add a new record to the grid without having the manually enter data in the grid.This can be done using the addRecord method of the Grid.

The addRecord method takes two parameters:

  • The data object representing the new row to be added
  • The index at which the new row should be inserted. If no index is specified, the new row will be added at the end of the Grid.

Here’s an example of how to add a new row using the addRecord method:

<template>
  <div id="app">
    <div style="padding:0px 0px 20px 0px">
     <ejs-button id='add' v-on:click='addRow'>Add New Row</ejs-button>
    </div>
    <ejs-grid ref="grid" id="grid" :dataSource='data' :editSettings='editSettings'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100 isPrimaryKey="true"></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='ShipCity' headerText='ShipCity' width=100></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C' width=100></e-column>
        <e-column field='ShipName' headerText='Ship Name' width=150>
        </e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Edit } from "@syncfusion/ej2-vue-grids";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { data } from "./datasource.js";
const grid = ref(null);
      const editSettings = {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
      };
      const addRow = function () {
      const newRecord = {
        OrderID: generateOrderId(),
        CustomerID: generateCustomerId(),
        ShipCity: generateShipCity(),
        Freight: generateFreight(),
        ShipName: generateShipName(),
      };

      grid.value.addRecord(newRecord, 0);
    }
    const generateOrderId = function () {
      return Math.floor(10000 + Math.random() * 90000);
    }
    // Generate a random CustomerID
    const generateCustomerId = function () {
      const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      let result = "";
      for (let i = 0; i < 5; i++) {
        result += characters.charAt(
          Math.floor(Math.random() * characters.length)
        );
      }
      return result;
    }
    // Generate a random ShipCity
    const generateShipCity = function () {
      const cities = ["London", "Paris", "New York", "Tokyo", "Berlin"];
      return cities[Math.floor(Math.random() * cities.length)];
    }
    // Generate a random Freight value
    const generateFreight = function () {
      return Math.random() * 100;
    }
    // Generate a random ShipName
    const generateShipName = function () {
      const names = [
        "Que Delícia",
        "Bueno Foods",
        "Island Trading",
        "Laughing Bacchus Winecellars",
      ];
      return names[Math.floor(Math.random() * names.length)];
    }
  provide('grid',  [Edit]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
  <div id="app">
    <div style="padding:0px 0px 20px 0px">
     <ejs-button id='add' v-on:click='addRow'>Add New Row</ejs-button>
    </div>
    <ejs-grid ref="grid" id="grid" :dataSource='data' :editSettings='editSettings'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100 isPrimaryKey="true"></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='ShipCity' headerText='ShipCity' width=100></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C' width=100></e-column>
        <e-column field='ShipName' headerText='Ship Name' width=150>
        </e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>

import { GridComponent, ColumnsDirective, ColumnDirective, Edit } from "@syncfusion/ej2-vue-grids";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
      editSettings: {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
      },
    };
  },
  methods: {
    addRow: function () {
      const newRecord = {
        OrderID: this.generateOrderId(),
        CustomerID: this.generateCustomerId(),
        ShipCity: this.generateShipCity(),
        Freight: this.generateFreight(),
        ShipName: this.generateShipName(),
      };

      this.$refs.grid.ej2Instances.addRecord(newRecord, 0);
    },
    generateOrderId: function () {
      return Math.floor(10000 + Math.random() * 90000);
    },
    // Generate a random CustomerID
    generateCustomerId: function () {
      const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      let result = "";
      for (let i = 0; i < 5; i++) {
        result += characters.charAt(
          Math.floor(Math.random() * characters.length)
        );
      }
      return result;
    },
    // Generate a random ShipCity
    generateShipCity: function () {
      const cities = ["London", "Paris", "New York", "Tokyo", "Berlin"];
      return cities[Math.floor(Math.random() * cities.length)];
    },
    // Generate a random Freight value
    generateFreight: function () {
      return Math.random() * 100;
    },
    // Generate a random ShipName
    generateShipName: function () {
      const names = [
        "Que Delícia",
        "Bueno Foods",
        "Island Trading",
        "Laughing Bacchus Winecellars",
      ];
      return names[Math.floor(Math.random() * names.length)];
    },
  },
  provide: {
    grid: [Edit],
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

  • When working with remote data, it is impossible to add a new row between the existing rows.
  • If you want to add a new record to the beginning of the data source, you can pass 0 as the second parameter to the addRecord method.
  • If you do not specify an index, the new row will be added at the end of the grid.

Show or hide a row using an external actions

In a Syncfusion grid, you can show or hide a particular row based on some external action, such as a checkbox click.This can be useful in scenarios where you want to hide certain rows from the grid temporarily, without removing them from the underlying data source. This can be achieved by using the getRowByIndex and getRowsObject methods of the grid along with the change event of the checkbox

The getRowsObject method returns an array of row objects that represents all the rows in the grid. You can use this method to iterate through all the rows and access their data and index.

The getRowByIndex method returns the HTML element of a row at the specified index. You can use this method to get a specific row and apply changes to it.

In the following example, the onCheckBoxChange method is used to check whether the checkbox is checked or not. If it is checked, the method iterates through all the rows in the grid using the getRowsObject method. For each row, it checks whether the value in the CustomerID column is equal to “VINET”. If it is, the index of that row is obtained using the getRowByIndex method and hidden by setting its display style to “none”. The index of the hidden row is also added to an array called hiddenRows.

If the checkbox is unchecked, the method iterates through the hiddenRows array and shows each row by setting its display style to an empty string. The hiddenRows array is also cleared.

<template>
  <div id="app">
    <div style="padding:2px 0px 0px 0px">
      <ejs-checkbox ref="checkbox" label="Show / Hide Row" :change="onCheckBoxChange"></ejs-checkbox>
    </div>
    <p id="message">{{ message }}</p>
    <ejs-grid ref="grid" :dataSource="data" height="350">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" width="120" textAlign="Right"></e-column>
        <e-column field="CustomerID" headerText="Customer Name" width="150"></e-column>
        <e-column field="OrderDate" type="date" headerText="Order Date" width="130" format="yMd" textAlign="Right"></e-column>
        <e-column field="Freight" headerText="Freight" width="120" format="C2" textAlign="Right"></e-column>
        <e-column field="ShippedDate" type="date" headerText="Shipped Date" width="130" format="yMd" textAlign="Right"></e-column>
        <e-column field="ShipCountry" headerText="Ship Country" width="150"></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { CheckBoxComponent as EjsCheckbox} from "@syncfusion/ej2-vue-buttons";
import { data } from "./datasource.js";
const grid = ref(null);
      let hiddenRows = []; 
      let message = ref(null); 
      let rowIndex=0;
    const onCheckBoxChange = (args) => {
      if (args.checked) {
        for ( let i = 0;i < grid.value.ej2Instances.getRowsObject().length;i++) {
          if ( grid.value.ej2Instances.getRowsObject()[i].data.CustomerID === "VINET") {
            rowIndex =grid.value.ej2Instances.getRowsObject()[i].index;
            grid.value.getRowByIndex(rowIndex).style.display = "none";
            hiddenRows.push(rowIndex);
          }
        }
        if (hiddenRows.length > 0) {
          message.value = `Rows with a customer name column value of VINET have been hidden`;
        }
      } else {
        hiddenRows.forEach((rowIndex) => {
          grid.value.getRowByIndex(rowIndex).style.display = "";
        });
        hiddenRows = [];
        message.value = "Show all hidden rows";
      }
    }
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
#message {
  color: red;
  text-align: center;
  font-weight: bold;
}
</style>
<template>
  <div id="app">
    <div style="padding:2px 0px 0px 0px">
      <ejs-checkbox ref="checkbox" label="Show / Hide Row" :change="onCheckBoxChange"></ejs-checkbox>
    </div>
    <p id="message">{{ message }}</p>
    <ejs-grid ref="grid" :dataSource="data" height="350">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" width="120" textAlign="Right"></e-column>
        <e-column field="CustomerID" headerText="Customer Name" width="150"></e-column>
        <e-column field="OrderDate" type="date" headerText="Order Date" width="130" format="yMd" textAlign="Right"></e-column>
        <e-column field="Freight" headerText="Freight" width="120" format="C2" textAlign="Right"></e-column>
        <e-column field="ShippedDate" type="date" headerText="Shipped Date" width="130" format="yMd" textAlign="Right"></e-column>
        <e-column field="ShipCountry" headerText="Ship Country" width="150"></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { CheckBoxComponent } from "@syncfusion/ej2-vue-buttons";
import { data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-checkbox":CheckBoxComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
      hiddenRows: [],
      message: "", 
      rowIndex:0
    };
  },
  methods: {
    onCheckBoxChange(args) {
      if (args.checked) {
        for (
          let i = 0;
          i < this.$refs.grid.ej2Instances.getRowsObject().length;
          i++
        ) {
          if (
            this.$refs.grid.ej2Instances.getRowsObject()[i].data
              .CustomerID === "VINET"
          ) {
            this.rowIndex =
              this.$refs.grid.ej2Instances.getRowsObject()[i].index;
            this.$refs.grid.ej2Instances.getRowByIndex(this.rowIndex).style.display = "none";
            this.hiddenRows.push(this.rowIndex);
          }
        }
        if (this.hiddenRows.length > 0) {
          this.message = `Rows with a customer name column value of VINET have been hidden`;
        }
      } else {
        this.hiddenRows.forEach((rowIndex) => {
          this.$refs.grid.ej2Instances.getRowByIndex(rowIndex).style.display = "";
        });
        this.hiddenRows = [];
        this.message = "Show all hidden rows";
      }
    },
  }
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
#message {
  color: red;
  text-align: center;
  font-weight: bold;
}
</style>

How to get the row data and element

Grid provides several methods to retrieve row data and elements. This feature is useful when you need to access specific rows, perform custom operations, or manipulate the data displayed in the grid.

  1. getRowByIndex: This method returns the HTML element of a row at the specified index. It can be used to retrieve the element of a specific row in the grid.

     const rowElement = this.$refs.grid.ej2Instances.getRowByIndex(rowIndex);

  2. getRowIndexByPrimaryKey:The method allows you to retrieve the row index based on a specific primary key value or row data.

     const rowIndex = this.$refs.grid.ej2Instances.getRowIndexByPrimaryKey(primaryKey);

  3. getRowInfo:This method allows you to retrieve row information based on a cell target element.

     const rowInformation = this.$refs.grid.ej2Instances.getRowInfo(targetElement);

  4. getRows: This method returns an array of all the row elements in the Grid. If you need to retrieve row data and elements, you can combine the getRows method with the getRowInfo method.

      const rowElements = this.$refs.grid.ej2Instances.getRows();

  5. getSelectedRowIndexes:This method allows you to retrieve the collection of indexes of the selected rows. However, it does not directly provide the row elements and associated data. To access the row elements and data of the selected rows, you can combine the getSelectedRowIndexes method with getRowByIndex and getRowInfo method.

     const selectedIndexes = this.$refs.grid.ej2Instances.getSelectedRowIndexes();

  6. getSelectedRows:This method returns an array of HTML elements representing the selected rows in the grid.By iterating over this array, you can access each row element and data using the getRowInfo method. This way, you can access both the row elements and their associated data for the selected rows.

     const selectedRowElements = this.$refs.grid.ej2Instances.getSelectedRows();

See Also