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

Setting Column Template on Auto Generated Column

Thread ID:

Created:

Updated:

Platform:

Replies:

149904 Dec 13,2019 11:35 AM UTC Dec 17,2019 05:03 AM UTC Vue 3
loading
Tags: Data Grid
Marius Lian
Asked On December 13, 2019 11:35 AM UTC

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.

Thanks,
Marius

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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.  
 

<template> 
  <div id="app"> 
    <ejs-grid 
      ref="gridObj" 
      :dataSource="data" 
      height="300px" 
      allowPaging="true" 
      :dataBound="dataBound" 
      :load="onLoad" 
    ></ejs-grid> 
  </div> 
</template> 
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] 
        .ej2_instances[0]; 
      let tempCol = gridObj.getColumnByField("CustomerID"); 
      tempCol.template = cTemp; 
     tempCol.templateFn = templateCompiler(cTemp); 
      if (this.isInitial) { 
        gridObj.refreshColumns(); 
        this.isInitial = false; 
      } 
    }, 
    onLoad: function() { 
      this.isInitial = true; 
    } 
  }, 
 



Regards, 
Seeni Sakthi Kumar S 


Marius Lian
Replied On December 16, 2019 12:27 PM UTC

Great! Thanks.

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

Regards,  
Pavithra S. 


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