Setting Column Template on Auto Generated Column

[Marius Lian]

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;

https://ej2.syncfusion.com/vue/documentation/grid/columns/#set-column-options-to-auto-generated-columns

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

Thanks,

Marius

[Seeni Sakthi Kumar Seeni Raj]

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; 

    } 

  }, 

 

Sample link: https://codesandbox.io/s/vue-template-3n4sv 

Regards, 

Seeni Sakthi Kumar S 

[Marius Lian]

Great! Thanks.

[Pavithra Subramaniyam]

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.