Use custom helper inside the loop with templates in Vue Grid component

7 May 20257 minutes to read

The Syncfusion® Vue Grid allows you to use custom helpers inside the loop with template directive of a column. This feature enables you to create complex templates that can incorporate additional helper functions.

To achieve this, you can use the v-for directive inside the template column to iterate through the array and the v-bind:class directive to define dynamic function.

The Customer Rating column includes a custom template defined using <template>. Inside this template, v-for directive is used to iterates through the item array and generates <span> tag, displayed as stars using the CSS below:

.e-grid .rating .star:before {
    content: '★';
}

.e-grid .rating .star {
    font-size: 132%;
    color: lightgrey;
}

The v-bind:class directive dynamically assigns classes based on the result of the isRatingGreater method, highlighting the star using the CSS below:

.e-grid .rating .star.checked {
    color: #ffa600;
}

This is demonstrated in the following example.

<template>
  <div id="app">
    <ejs-grid ref="grid" :dataSource="data" height=315>
      <e-columns>
        <e-column field='OrderID' headerText='Employee ID' textAlign='Right' width='90'></e-column>
        <e-column field='CustomerID' headerText='Name' width='100'></e-column>
        <e-column field='Rating' headerText='Customer Rating' width='120' :template="'columnTemplate'"></e-column>
      </e-columns>
      <template v-slot:columnTemplate="{ data }">
        <div class="rate">
          <div class="rating">
            <span v-for="i in item" :key="i" :class="{
              checked: isRatingGreater(data.Rating, i),
              star: true,
            }"></span>
          </div>
        </div>
      </template>
    </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 item = [1, 2, 3, 4, 5];
  const isRatingGreater = (dataRating, comparisonValue) => {
  return dataRating >= comparisonValue;
}
</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 .rating .star:before {
  content: '★';
}

.e-grid .rating .star {
  font-size: 132%;
  color: lightgrey;
}

.e-grid .rating .star.checked {
  color: #ffa600;
}
</style>
<template>
  <div id="app">
    <ejs-grid ref="grid" :dataSource="data" height=315 >
      <e-columns>
        <e-column field='OrderID' headerText='Employee ID' textAlign='Right' width='90'></e-column>
        <e-column field='CustomerID' headerText='Name' width='100'></e-column>
        <e-column field='Rating' headerText='Customer Rating' width='120' :template="'columnTemplate'"></e-column>
      </e-columns>
      <template v-slot:columnTemplate="{data}">
        <div class="rate">
          <div class="rating">
            <span
              v-for="i in item"
              :key="i"
              :class="{
                checked: isRatingGreater(data.Rating, i),
                star: true,
              }"
            ></span>
          </div>
        </div>
      </template>
    </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,
      item:[1, 2, 3, 4, 5],
    };
  },
  methods: {
    isRatingGreater(dataRating, comparisonValue) {
      return dataRating >= comparisonValue;
    },
  },
}
</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 .rating .star:before {
    content: '★';
  }
  
  .e-grid .rating .star {
    font-size: 132%;
    color: lightgrey;
  }
  
  .e-grid .rating .star.checked {
    color: #ffa600;
  }
</style>