1. Home
  2. Forum
  3. Vue
  4. How to customize group caption per group column?

How to customize group caption per group column?

I'm trying to group a grid on rows where there are a number of paired fields of ID and name, such as:
  • employeeId & employeeName
  • departmentId & departmentName
  • jobId & jobName
I want to group by each id field, but display its named field counterpart. That way, if a name is duplicated across multiple ids, then they're still displayed separately, e.g., two John Smith's. How can I do that? It seems that using captionTemplate is overly obtuse by processing all columns in one place. I'd like to define the title on each column/aggregate separately. Also, I don't want to change the format of "{fieldName}: {title} - {itemCount} item(s)". I just want to change the "{title}". And it should be easily reusable.

Is there a way to go about this?

4 Replies
PS Pavithra Subramaniyam Syncfusion Team January 2, 2020 10:20 AM UTC

Hi Bill, 

Greetings from Syncfusion support.   
   
Query : I don't want to change the format of "{fieldName}: {title} - {itemCount} item(s)". I just want to change the "{title}". And it should be easily reusable. 
 
You can achieve your requirement by using the captionTemplate property of groupSetting model. We have created the sample with  your requirement. In that sample we have used custom helper for the captionTemplate. In the custom helper we have returned the customized group caption value with respect to the group level. 

Please refer the below code example, documentation and sample 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"   :valueAccessor="valueAccess1" 
          width="120"  ></e-column> 
        <e-column field="ShipCity" headerText="Ship City" :valueAccessor="valueAccess2" 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"] 
      } 
    }; 
  }, 
  provide: { 
    grid: [Page, Aggregate, Group] 
  }, 
  methods: { 
    valueAccess1: function(field, data, column) { 
      return data[field] + "-" + data["ShipCity"]; 
    }, 
    valueAccess2: function(field, data, column) { 
      return data[field] + "-" + data["ShipCountry"]; 
    } 
  } 
}; 
window.format = function(value) { 

// here you can customize your group caption value 
  var x = value.count; 
  if (x > 1) { 
    x = value.count + "items"; 
  } else { 
    x = value.count + "item"; 
  } 
  switch (value.field) { 
    case "ShipCity": 

// return the value depends on the grouped column level 
      if (value.items.level) { 
        return ( 
          value.field + 
          ": " + 
          value.items.records[0][value.field] + 
          " " + 
          value.items.records[0].ShipCountry + 
          " " + 
          x 
        ); 
      } else { 
        return ( 
          value.field + 
          ": " + 
          value.items[0][value.field] + 
          " " + 
          value.items[0].ShipCountry + 
          " " + 
          x 
        ); 
      } 
    .   .  . 
    default: 
      return value.field + ": " + value.key + " " + x; 
  } 
}; 
</script> 
 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 


BN Bill Naples January 7, 2020 12:50 PM UTC

Thanks Pavithra. Using a global `window.format` function that defines all the possibly column groups for all grids in an application seems like an anti-pattern. Can the SDK be enhanced to support a cleaner solution?

PK Prasanna Kumar Viswanathan Syncfusion Team January 9, 2020 10:28 AM UTC

Hi Bill, 
 
Thanks for the patience. 
 
Query : Using a global `window.format` function that defines all the possibly column groups for all grids in an application seems like an anti-pattern. Can the SDK be enhanced to support a cleaner solution? 
 
Instead of using “window.format” function, we achieve your requirement by creating another VUE component for the CaptionTemplate and returned the value as you expected. 
 
Please refer the code example and sample for more information.  
 
 

<template> 
    <div id="app"> 
        <ejs-grid id="Grid" ref="grid" :dataSource="data" :allowPaging="true" :allowGrouping="true" :groupSettings="groupSettings"> 
------  
        </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: function() {  // created another vue component for the captionTemplate 
          return { 
            template: Vue.component("columnTemplate", { 
              template: `<div>{{captionValue}}</div>`, 
              data: function() { 
                return { 
                  data: {} 
                }; 
              }, 
              computed: { 
                captionValue: function(value) { 
                 var x = value.data.count; 
                  ---------------- 
                    x = value.data.count + "item"; 
                  } 
                  switch (value.data.field) { 
                    case "ShipCity": 
                      if (value.data.items.level) { 
                        return ( 
                          ------------- 
                          " " + 
                          value.data.items.records[0].ShipCountry + 
                          " " + 
                          x 
                        ); 
                      } else { 
                        return ( 
                          value.data.field + 
                          ": " + 
                          value.data.items[0][value.data.field] + 
                          " " + 
                          value.data.items[0].ShipCountry + 
                          " " + 
                          x 
                        ); 
                      } 
                    case "CustomerID": 
                      if (value.data.items.level) { 
                        return ( 
                          value.data.field + 
                          ": " + 
                          ----------------------- 
                          " " + 
                          x 
                        ); 
                      } else { 
                        return ( 
                          value.data.field + 
                          ": " + 
                          ----------------- 
                        ); 
                      } 
                    default: 
                      return value.data.field + ": " + value.data.key + " " + x; 
                  } 
                } 
              } 
            }) 
          }; 
        }, 
        columns: ["CustomerID"] 
      } 
    }; 
  }, 
  provide: { 
    grid: [Page, Aggregate, Group] 
  }, 
  methods: { 
    valueAccess1: function(field, data, column) { 
      return data[field] + "-" + data["ShipCity"]; 
    }, 
    valueAccess2: function(field, data, column) { 
      return data[field] + "-" + data["ShipCountry"]; 
    } 
  } 
}; 
</script> 

          
Please get back to us if you need further assistance. 
 
Regards, 
Prasanna Kumar N.S.V 
 


BN Bill Naples January 9, 2020 02:36 PM UTC

Hi Prasanna,

The problem with captionTemplate is that it's one function to control display of all grouped columns in the grid. Then every grid I have needs to either define its own caption template, or share some uber template that handles every column for every grid in my application. Why isn't there a captionTemplate per grouped column? It's much easier then to create composable and reusable templates.

Loader.
Up arrow icon