[Vue3] DataGrid Dynamic Columns/Data With Templates

[Yasin Stuhlmann]

Dear Syncfusion Team,

how is it possible to use a template with dynamic columns?

I try to create a data grid with dynamic columns/data and templates.
Columns and data will be coming from a service in the future.

To write a short demo i extended a sample of Rajapandiyan Settu (Syncfusion Team) found in this thread: https://www.syncfusion.com/forums/168243/dynamic-columns-in-datagrid-with-template-in-separate-file-vue-3

(The upload of my files failed so i will copy what i changes)

[App.vue]

First i added a new grid:

<ejs-grid :dataSource='data' :columns="columns" :allowPaging="true">
</ejs-grid>

Second i added the columns:

columns: [
  {
    field: "CustomerID"
  },
  {
    field: "ShipCountry"
  },
  {
    headerText: 'Employee Image',
    template: "colTemplate"
  }
]

The result is a table with the information: "No records to display". When i remove the template from the columns the data is shown.

Kind Regards,
Yasin

[Rajapandiyan Settu]

Hi Yasin, 

Thanks for contacting Syncfusion support. 

Based on your requirement, you want to generate the columns like in typescript Grid. If so, you can bind the template on the column by following way. 

Grid columns typescript: https://ej2.syncfusion.com/documentation/grid/Columns/columns/ 

[App.vue] 

<template> 

  <div id="app"> 

     <ejs-grid :dataSource='data' :columns="columns" :allowPaging="true" :actionFailure="actionFailure"> 

     </ejs-grid> 

    </div> 

</template> 

<script> 

import gridTemplate from "./ColumnTemp.vue"; 

const app = createApp(); 

// Template declaration 

var colVue = app.component("colTemplate", gridTemplate); 

var colTemplate =  function () { return { template: colVue}; } 

export default { 

  name: 'App', 

  components: { 

    'ejs-grid' : GridComponent, 

  }, 

  data() { 

   return { 

    data:  data, 

    columns: [ 

       --- 

       { 

        headerText: 'Employee Image', 

        template: colTemplate 

       } 

      ] 

   }; 

  }, 

}; 

</script> 

We have prepared a simple sample based on this. You can get it from below link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue3_columntemplate_dynamic1641008789.zip 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S