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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize group caption per group column?

Thread ID:

Created:

Updated:

Platform:

Replies:

150305 Dec 31,2019 07:18 PM UTC Jan 9,2020 02:36 PM UTC Vue 4
loading
Tags: Data Grid
Bill Naples
Asked On January 1, 2020 12:13 PM UTC

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?

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Bill Naples
Replied On 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?

Prasanna Kumar Viswanathan [Syncfusion]
Replied On 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 
 


Bill Naples
Replied On 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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon