We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to customize the group caption row text in Vue Grid

Good morning and thank you for taking the time to answer our questions, we are new to syncfusion and we been looking at the grids. 
Specifically the grouping grid for Vue, very powerful. The only question is regarding the texts of the column fields that become rows and the text of # of items. Is there a way to hide them and only show the value of the filed itself without the name of the current column and the # of items? only show the number o items of the most inner group? See the picture below for the desire outcome. I have been reading the documentation and found no properties for this. 
Thank you in advance 


1 Reply

RR Rajapandi Ravi Syncfusion Team May 8, 2020 12:47 PM UTC

Hi Tonathiu, 

Greetings from syncfusion support 

Based on your query we suspect that you want to customize the group caption row text in the EJ2 Grid. You can customize the group caption by using the groupSettings.captionTemplate property. Please refer the below code example, sample and documentation for more information. 

  <div id="app"> 
        <e-column field="OrderID" headerText="Order ID" width="90"></e-column> 
        <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column> 
        <e-column field="ShipCity" headerText="Ship City" width="120"></e-column> 
        <e-column field="Freight" headerText="Freight" format="C2" width="90"></e-column> 

import Vue from "vue"; 
import { GridPlugin, Aggregate, Group, Page } from "@syncfusion/ej2-vue-grids"; 
import { data } from "./datasource"; 


export default { 
  data() { 
    return { 
      data: data.slice(0, 7), 
      groupSettings: { 
        captionTemplate: "<div>${format(data)}</div> ", 
        columns: ["CustomerID", "ShipCity", "Freight"] 
  provide: { 
    grid: [Page, Aggregate, Group] 
  methods: { 
window.format = function(value) { 
  var x = value.count; 
  if (x > 1) { 
    x = value.count + "items"; 
  } else { 
    x = value.count + "item"; 
  switch (value.field) { 
    case "ShipCity":     
      if (value.items.level) { 
        return value.items.records[0].ShipCountry; 
      } else { 
        return value.items[0].ShipCountry; 
    case "Freight": 
      if (value.items.level) { 
        return x; 
      } else { 
        return x; 
    case "CustomerID": 
      if (value.items.level) { 
        return value.items.records[0][value.field]; 
      } else { 
        return value.items[0][value.field]; 
      return value.field + ": " + value.key + " " + x; 



Rajapandi R 

Live Chat Icon For mobile
Up arrow icon