How to customize the group caption row text in Vue Grid

[Tonathiu]

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 

Tonathiu 

[Rajapandi Ravi]

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. 

<template> 

  <div id="app"> 

    <ejs-grid 

      id="Grid" 

      ref="grid" 

      :dataSource="data" 

      :allowPaging="true" 

      :allowGrouping="true" 

      :groupSettings="groupSettings" 

    > 

      <e-columns> 

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

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

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

import { data } from "./datasource"; 

Vue.use(GridPlugin); 

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) { 

  debugger; 

  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]; 

      } 

    default: 

      return value.field + ": " + value.key + " " + x; 

  } 

}; 

</script> 

Sample: https://codesandbox.io/s/vue-template-z1g13 

UG : https://ej2.syncfusion.com/documentation/api/grid/groupSettingsModel/ 

         https://ej2.syncfusion.com/documentation/api/grid/captionTemplateContext/ 

Screenshot:  

 

Regards, 

Rajapandi R