1. Home
  2. Forum
  3. Vue
  4. Using custom external components in header and content

Using custom external components in header and content

Hello Team,

I'm trying to use the Accordion with a custom component in the header. The header takes a prop (item) and displays information based on it. The DataManager call is made during the mounted() function, but the refs are undefined and so is the .$el of the new JobLine

JobLine.vue

<template id="JobLineTemplate">
<tr v-bind:class="classFromRowItem(item)" v-on:click="onClick">

<td>{{item.jobNum}}</td>
<td>{{item.id}}</td>
<td>{{item.lastScannedUser}}</td>
<td>{{item.department}}</td>
<td>{{item.state}}</td>

</tr>
</template>

<script>
export default {
name: 'JobLine',
props: {
item: { type: Object }
},
data() {
return {}
},
methods: {
onClick: function(e, comp) {
console.log(comp);
console.log(this.item);
//alert("clicked " + e);
},

classFromRowItem: function(item) {
return item.state.toLowerCase().split(" ").join("");
},
},
mounted() {

}
};
</script>

JobList.vue

<template>
<div id="JobList">
<div id="JobLineTemplate">
job line template from div
</div>
<span>top level</span>
<br>
<button id="groupBtn" v-on:click="activateGroupByState()">Group By State</button>
<ejs-accordion id="Ejs2" ref="ejs2"  expandMode="Multiple" :clicked="clicked" :items="this.incomingJobsAccordionFormatted"  
>
<e-accordionitems>

</e-accordionitems>

</ejs-accordion>

</div>
</template>
<script>
import axios from 'axios'
import JobLine from './JobLine.vue'
import _ from 'underscore';
import Vue from "vue";
import { GridPlugin, Group } from "@syncfusion/ej2-vue-grids";
import { DataManager, WebApiAdaptor, UrlAdaptor, ODataAdaptor, Query, ReturnOption } from "@syncfusion/ej2-data";
import { Accordion, AccordionClickArgs } from '@syncfusion/ej2-navigations';
import { AccordionComponent, AccordionPlugin } from '@syncfusion/ej2-vue-navigations';

 
Vue.component(AccordionPlugin.name, AccordionComponent);
Vue.use(jobLine);
Vue.component('JobLine',JobLine);
Vue.use(AccordionPlugin);
console.log("script");
const localGetAll = "/DynamicScheduling/dsbackend/getall";
const jl2 = Vue.extend(jobLine);
export default {
name: 'JobList',
data() {
return {
incomingJobs: [],
incomingJobsAccordionFormatted:[],
groupOptions: {
showDropArea: false,
columns: ['state', 'jobNum'],
captionTemplate: '<span class="groupItems" style="color:blue"> ${count} Items</span>'
},
}
},
created() {
console.log("in created");
},
mounted() {
console.log("in mounted");
let mountedFunc = function() {
console.log("in mounted executed");

new DataManager({
url: "/DynamicScheduling/dsbackend/getall",
//adaptor: new UrlAdaptor, headers:[{ 'syncfusion': 'true' }
/*,{'Access-Control-Allow-Origin':"*"}],*/
crossDomain: true
})
.executeQuery(new Query())
.catch( (error) => {
this.incomingJobs = [
{
"id": 2,
"state": "started",
"jobNum": "49479",
"lastScannedUser": "Marco",
"department": "Sales"
},
{
"id": 3,
"state": "finished",
"jobNum": "55825",
"lastScannedUser": "Adny from postman on local",
"department": "Sales"
},
{
"id": 4,
"state": "started",
"jobNum": "12345",
"lastScannedUser": "Andy",
"department": "Shipping"
},
{
"id": 6,
"state": "Not Started",
"jobNum": "1",
"lastScannedUser": "Testing New Post",
"department": "Printing"
},
{
"id": 7,
"state": "Not Started",
"jobNum": "2",
"lastScannedUser": "asdfghjkl",
"department": "Printing"
}
]
}
.then((e) => {
//console.log("got data from localhost, scope after binding: " + JSON.stringify(this.$refs));
this.incomingJobs = this.incomingJobs || e.result;
this.incomingJobsAccordionFormatted = [];
console.log(this.incomingJobs);
var obj = undefined;
debugger;
//console.log("refs" + JSON.stringify(this.$refs ));
var itemsData = [];
_.each(this.incomingJobs, (item) => {

var packedItem = {
header: new JobLine({
item:item
}).$el,
//header:'header',
content: item.state
};
console.log(packedItem);
debugger;
this.incomingJobsAccordionFormatted.push(packedItem)
this.addItemToEjsAccordion(item,"ejs2")
});
if (this.$refs.ej2) {
console.log("Ref found, adding items");
obj = this.$refs.ejs2.ej2Instances;
obj.items = this.incomingJobsAccordionFormatted;
obj.refresh();
}
})
}

debugger;
//console.log("scope before binding: " + JSON.stringify(this.$refs));
mountedFunc.bind(this)();
},
components: {
JobLine,
},
methods: {
addItemToEjsAccordion: function(item, ejsElm) {

},
clicked: function(e) {
var ele = e.target;
console.log("in clicked");
debugger;
},
classFromRowItem: function(item) {
return item.state.toLowerCase().split(" ").join("");
},
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>

where incomingJobs = [
{
"id": 2,
"state": "started",
"jobNum": "49479",
"lastScannedUser": "Marco",
"department": "Sales"
},
{
"id": 3,
"state": "finished",
"jobNum": "55825",
"lastScannedUser": "Adny from postman on local",
"department": "Sales"
},
{
"id": 4,
"state": "started",
"jobNum": "12345",
"lastScannedUser": "Andy",
"department": "Shipping"
},
{
"id": 6,
"state": "Not Started",
"jobNum": "1",
"lastScannedUser": "Testing New Post",
"department": "Printing"
},
{
"id": 7,
"state": "Not Started",
"jobNum": "2",
"lastScannedUser": "asdfghjkl",
"department": "Printing"
}
]


The JobLine component sets it's own CSS class based on one of it's props (item.state)  that sets the background color
The goal here right now is to have my JobLine component be the header of each e-accordionitem that has the correct CSS class.
The problem is that the .$el of the new JobLine component comes back as undefined

3 Replies
HB Hareesh Balasubramanian Syncfusion Team May 29, 2020 02:48 PM UTC

Hi Andrew, 
  
Greetings from Syncfusion Support…! 
  
We have validated your shared code snippet at our end. And we suspect that, your requirement is to render content of the template from an another Vue file. And for the same we have prepared a sample and it can be viewed from the following link. 
  
  
Kindly try the above solution and kindly get back to us with below details, If the issue may still persist  
  
  • Replicate your issue with the shared sample
  • Share issue reproducing sample code (if possible)
  
Regards, 
Hareesh 


WC Wei Cheng November 16, 2021 05:51 PM UTC

The example link is broken, could you fix this?


NR Nevitha Ravi Syncfusion Team November 17, 2021 01:45 PM UTC

Hi Wei,

could you please check the following sample for your reference? 


Loader.
Up arrow icon