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

11 Jun 20247 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>