How to use grid column template in vue 3 options API Typescript APP

I want to use column template in my vue 3 options API Typescript APP. Please help me.


1 Reply

SI Santhosh Iruthayaraj Syncfusion Team September 26, 2023 02:48 PM UTC

Hi Md. Sujon,

Greetings from Syncfusion support.


Based on your request, we have prepared a sample render column.template in Vue 3 App, by using the Slot Template. Please refer to the below code snippet and sample for more information:


[Grid.vue]

 

   <ejs-grid ref="grid" id="Grid" :dataSource="data" :allowPaging="true">

        .  .  .  .  .    

        <e-column

          field="Verified"

          width="80"

          textAlign="Center"

          :template="'cTemplate'"

        ></e-column>

      </e-columns>

      <template v-slot:cTemplate="{ data }">

        <ejs-checkbox :value="data.Verified"></ejs-checkbox>

      </template>

    </ejs-grid>

 


Sample: https://stackblitz.com/edit/vue3-grid-column-template-v2


In the sample, we have rendered a Syncfusion Vue CheckBox component using the column.template with Slot Template.

Slot Template Documentation: https://ej2.syncfusion.com/vue/documentation/common/template#slot-template


Please let us know if you have any further queries or require additional assistance.


Regards,

Santhosh I


Loader.
Up arrow icon