Vue.js wrapper component for e-tabitem(in tabs)\e-column(in data grid)

[Andrew Mandruk]

Can i somehow create component-wrapper for e-tabitem(in tabs)\e-column(in data grid) and use it inside ejs-tab\ejs-grid ?

Example what needed:

// CustomTabitem.vue - wrapper component for e-tabitem

<template>

      <e-tabitem

             :header="{text: header}"

            content="content"

      />

</template>

<script>

     export default {

          name: "custom-tabitem",

          props: [

               header,

               content,

          ]

     }

</script>

// TabUsage.vue - here we need to use <custom-tabitem/>

<template>

     <ejs-tab>

          <e-tabitems>

               <custom-tabitem 

                    :header="First Header"

                    content="first content"

               />

               <custom-tabitem 

                    header="Second header"

                    content="second content"

               />

          </e-tabitems>

     </ejs-tab>

</template>

But this example did not work, the tab items are not shown. The templates are work well (if i using it outside the ejs-tab, for test) and i have checked imports in my project - it should work, but it is not.

How can i add wrapper-component to e-tabitem and make it work in ejs-tab?

[Ravikumar Venkatesan]

Hi Andrew, 

Greetings from Syncfusion support. 

We have validated your reported query “How can i add wrapper-component to e-tabitem and make it work in ejs-tab?” at our end. We regret to let you know adding e-tabitem inside of your custom-tabitem and using the custom-tabitems inside of the e-tabitems is not feasible with our current tab architecture.  

In meantime, we suggest you please add the custom component as template for the content of the tab item like the below code. 

[App.vue] 

<template> 

  <div> 

    <div> 

      <H1>Tab</H1> 

      <ejs-tab id="tab_default" heightAdjustMode="None" height="360px"> 

        <e-tabitems> 

          <e-tabitem :header="headerText0" :content="templateContent(content0)"></e-tabitem> 

          <e-tabitem :header="headerText1" :content="templateContent(content1)"></e-tabitem> 

          <e-tabitem :header="headerText2" :content="templateContent(content2)"></e-tabitem> 

        </e-tabitems> 

      </ejs-tab> 

    </div> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import { TabPlugin } from "@syncfusion/ej2-vue-navigations"; 

import customTabItem from "./template"; 

 

Vue.use(TabPlugin); 

 

export default Vue.extend({ 

  data: function() { 

    return { 

      templateContent: function(e) { 

        this.contentVal[e] = e; 

        return () => { 

          return { 

            template: { 

              extends: customTabItem, 

              propsData: { 

                contentProp: this.contentVal[e] 

              } 

            } 

          }; 

        }; 

      }, 

      contentVal: [], 

      headerText0: { text: "Twitter", iconCss: "e-twitter" }, 

      headerText1: { text: "Facebook", iconCss: "e-facebook" }, 

      headerText2: { text: "WhatsApp", iconCss: "e-whatsapp" }, 

      content0: "Twitter content", 

      content1: "Facebook content", 

      content2: "WhatApp content" 

    }; 

  }, 

  name: "App", 

  components: { 

    customTabItem 

  } 

}); 

</script> 

 

[template.vue] 

/* eslint-disable */ 

<template> 

  <div> 

    <div>{{contentProp}}</div> 

    <div>This is tab content template</div> 

  </div> 

</template> 

 

<script> 

export default { 

  name: "customTabItem", 

  props: ["contentProp"], 

  data() { 

    return { 

      data: {} 

    }; 

  } 

}; 

</script> 

 

Sample: https://codesandbox.io/s/ej2-vue-tab-content-as-template-sample-hpmhh 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[Andrew Mandruk]

Understand. Thank you for response. The thread can be closed

[Vinitha Devi Murugan]

Hi Andrew, 

 

Thanks for your update. 

 

You are most welcome 😊 

 

Regards, 

Vinitha