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

Setting Column Template on Auto Generated Column

Hi Syncfusion,

Is it possible to set column template on auto generated column based on some condition of the data in that column?

It says here you can set some options to auto generated columns on dataBound event;

But it is unclear if column template could be set at on the dataBound event.


3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 16, 2019 09:55 AM UTC

Hi Marius, 

Thanks for contacting Syncfusion support, 

As per your requirement, we have used dataBound event and load event of the Grid. Assigned the compiled template to the required column in the dataBound event of the Grid. Refer to the following code example.  

  <div id="app"> 
let cTemp = function() { 
  return { 
    template: Vue.component("columnTemplate", { 
      template: `<a rel='nofollow' href="#">{{CustomerID}}</a>`, 
      data: function() { 
        return { 
          data: {} 
      computed: { 
        CustomerID: function() { 
          return this.data.CustomerID; 
export default { 
  data() { 
    return { 
      data: orderDetails.slice(0), 
      isInitial: false 
  methods: { 
    dataBound: function() { 
      var gridObj = document.getElementsByClassName("e-grid")[0] 
      let tempCol = gridObj.getColumnByField("CustomerID"); 
      tempCol.template = cTemp; 
     tempCol.templateFn = templateCompiler(cTemp); 
      if (this.isInitial) { 
        this.isInitial = false; 
    onLoad: function() { 
      this.isInitial = true; 

Seeni Sakthi Kumar S 

ML Marius Lian December 16, 2019 12:27 PM UTC

Great! Thanks.

PS Pavithra Subramaniyam Syncfusion Team December 17, 2019 05:03 AM UTC

Hi Marius,  

Thanks for your update. 

Please contact us if you need any further assistance on this. As always, we will be happy to assist you.  

Pavithra S. 

Live Chat Icon For mobile
Up arrow icon