I tried to insert the template in several ways but none worked, I tried to send it for a property and it didn't work
I tried to send it by v-slot and it didn't work I tried to create another component and export in
my main component and also year it worked
<template>
<div>
<ejs-gantt ref='gantt' :dataSource="data" id="GanttContainer" :taskFields="taskFields" :height="height"
:timezone="timezone" :timelineSettings="timelineSettings" :created="created">
<e-columns>
<!-- <e-column field="TaskID" headerText="Task ID" textAlign="Left" width="100"></e-column> -->
<e-column field="TaskName" headerText="Atividade" width="150"></e-column>
<e-column field="StartDate" headerText="Data inicio" width="150"></e-column>
<e-column field="EndDate" headerText="Data fim" width="150"></e-column>
<!-- <e-column field="Duration" headerText="Duration" width="150"></e-column> -->
<e-column field="Progress" :template="responsaveisDiv"></e-column>
<e-column field="responsaveis" headerText="Responsaveis" width="150"></e-column>
</e-columns>
</ejs-gantt>
</div>
</template>
<script>
import { GanttComponent, ColumnDirective, ColumnsDirective, Selection, Toolbar, DayMarkers, Edit, Filter, Reorder, Resize, ColumnMenu, VirtualScroll, Sort, RowDD, ContextMenu, ExcelExport, PdfExport, CriticalPath } from "@syncfusion/ej2-vue-gantt";
import { L10n, loadCldr, setCulture } from '@syncfusion/ej2-base';
import { projectNewData, editingResources } from './data.js';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import * as numberingSystems from 'cldr-data/supplemental/numberingSystems.json';
// import * as gregorian from 'cldr-data/main/pt/ca-gregorian.json';
import * as numbers from 'cldr-data/main/pt/numbers.json';
import * as timeZoneNames from 'cldr-data/main/pt/timeZoneNames.json';
import { itemIDProperty } from "@syncfusion/ej2-vue-documenteditor";
import { etiquetasGant } from './etiquetasGant.vue';
loadCldr(numberingSystems, numbers, timeZoneNames);
setCulture('pt');
L10n.load({
'pt': {
"gantt": {
"emptyRecord": "Nenhum registro para exibir",
"id": "ID",
"name": "Nome",
"startDate": "Data de Início",
"endDate": "Data de Término",
"duration": "Duração",
"progress": "Progresso",
"dependency": "Dependência",
"notes": "Notas",
"baselineStartDate": "Data de Início da Linha de Base",
"baselineEndDate": "Data de Término da Linha de Base",
"taskMode": "Modo de Tarefa",
"changeScheduleMode": "Alterar Modo de Cronograma",
"subTasksStartDate": "Data de Início das Subtarefas",
"subTasksEndDate": "Data de Término das Subtarefas",
"scheduleStartDate": "Data de Início do Cronograma",
"scheduleEndDate": "Data de Término do Cronograma",
"auto": "Automático",
"manual": "Manual",
"type": "Tipo",
"offset": "Compensação",
"resourceName": "Nome do Recurso",
"resourceID": "ID do Recurso",
"day": "Dia",
"hour": "Hora",
"minute": "Minuto",
"days": "Dias",
"hours": "Horas",
"minutes": "Minutos",
"generalTab": "Guia Geral",
"customTab": "Guia Personalizado",
"writeNotes": "Escrever Notas",
"addDialogTitle": "Nova Tarefa",
"editDialogTitle": "Informações da Tarefa",
"saveButton": "Salvar",
"add": "Adicionar",
"edit": "Editar",
"update": "Atualizar",
"delete": "Excluir",
"cancel": "Cancelar",
"search": "Pesquisar",
"task": "Tarefa",
"tasks": "Tarefas",
"zoomIn": "Aumentar Zoom",
"zoomOut": "Diminuir Zoom",
"zoomToFit": "Ajustar Zoom",
"excelExport": "Exportar para Excel",
"csvExport": "Exportar para CSV",
"expandAll": "Expandir Tudo",
"collapseAll": "Recolher Tudo",
"nextTimeSpan": "Próximo Período",
"prevTimeSpan": "Período Anterior",
"okText": "OK",
"confirmDelete": "Tem certeza de que deseja excluir o registro?",
"from": "De",
"to": "Para",
"taskLink": "Link da Tarefa",
"lag": "Atraso",
"start": "Início",
"finish": "Conclusão",
"enterValue": "Digite o Valor",
"taskBeforePredecessor_FS": "Você moveu '{0}' para começar antes do término de '{1}' e as tarefas estão vinculadas. Como resultado, os vínculos não podem ser respeitados. Selecione uma ação abaixo para realizar",
"taskAfterPredecessor_FS": "Você moveu '{0}' para longe de '{1}' após o término e as tarefas estão vinculadas. Como resultado, os vínculos não podem ser respeitados. Selecione uma ação abaixo para realizar",
"taskBeforePredecessor_SS": "Você moveu '{0}' para começar antes de '{1}' começar, e as tarefas estão vinculadas. Como resultado, os vínculos não podem ser respeitados. Selecione uma ação abaixo para realizar",
"taskAfterPredecessor_SS": "Você moveu '{0}' para começar após o início de '{1}', e as tarefas estão vinculadas. Como resultado, os vínculos não podem ser respeitados. Selecione uma ação abaixo para realizar",
"taskBeforePredecessor_FF": "Você moveu '{0}' para terminar antes do término de '{1}' e as tarefas estão vinculadas. Como resultado, os vínculos não podem ser respeitados. Selecione uma ação abaixo para realizar",
"taskAfterPredecessor_FF": "Você moveu '{0}' para terminar após o término de '{1}' e as tarefas estão vinculadas. Como resultado, os vínculos não podem ser respeitados. Selecione uma ação abaixo para realizar",
"taskBeforePredecessor_SF": "Você moveu '{0}' para longe de '{1}' antes do início da tarefa e as tarefas estão vinculadas. Como resultado, os vínculos não podem ser respeitados. Selecione uma ação abaixo para realizar",
"taskAfterPredecessor_SF": "Você moveu '{0}' para terminar após o início de '{1}' e as tarefas estão vinculadas. Como resultado, os vínculos não podem ser respeitados. Selecione uma ação abaixo para realizar",
"taskInformation": "Informações da Tarefa",
"deleteTask": "Excluir Tarefa",
"deleteDependency": "Excluir Dependência",
"convert": "Converter",
"save": "Salvar",
"above": "Acima",
"below": "Abaixo",
"child": "Filho",
"milestone": "Marco",
"toTask": "Para Tarefa",
"toMilestone": "Para Marco",
"eventMarkers": "Marcadores de Evento",
"leftTaskLabel": "Rótulo da Tarefa à Esquerda",
"rightTaskLabel": "Rótulo da Tarefa à Direita",
"timelineCell": "Célula da Linha do Tempo",
"confirmPredecessorDelete": "Tem certeza de que deseja remover o link de dependência?",
"unit": "Unidade",
"work": "Trabalho",
"taskType": "Tipo de Tarefa",
"unassignedTask": "Tarefa não Atribuída",
"group": "Grupo",
"indent": "Recuar",
"outdent": "Desrecuar",
"segments": "Segmentos",
"splitTask": "Dividir Tarefa",
"mergeTask": "Mesclar Tarefa",
"left": "Esquerda",
"right": "Direita",
}
}
});
export default {
props: ["id_painel"],
components: {
'etiquetas-gant': etiquetasGant,
// 'ejs-gantt': GanttComponent,
// 'e-column': ColumnDirective,
// 'e-columns': ColumnsDirective
},
data: function () {
return {
// etiquetas: () => ({ template: etiquetasGant }),
responsaveisDiv: `<etiquetas-gant/>`,
data: new DataManager({
url: 'myapiurl',
adaptor: new WebApiAdaptor,
crossDomain: true,
timezone: 'Brazil/East',
}),
height: '600px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
progress: 'Progress',
duration: 'Duration',
dependency: 'Predecessor',
child: 'subtasks',
responsaveis: 'responsaveis'
},
timelineSettings: {
timelineUnitSize: 50,
topTier: {
unit: "Month",
format: "MMM",
},
bottomTier: {
unit: "Day",
format: "dd",
},
},
};
},
provide: {
gantt: [Selection, Toolbar, DayMarkers, Edit, Filter, Reorder, Resize, ColumnMenu, VirtualScroll, Sort, RowDD, ContextMenu, ExcelExport, PdfExport, CriticalPath]
},
created() {
setCulture(this.locale);
let obj_tema = this.lista_temas(localStorage.getItem("tema_padrao"));
this.tema_background = obj_tema.tema_background;
this.background_grad = obj_tema.background_grad;
// this.id_painel = this.$route.params.id;
// console.log(this.id_painel);
// this.ganttPainel();
},
methods: {
created(args) {
console.log(args);
},
lista_temas(tema) {
let obj = {
tema_background: "#5fa9e0",
background_grad: "#5fa9e0"
};
switch (tema) {
case "amarelo":
obj.tema_background = "rgb(4,0,9)";
obj.background_grad =
"linear-gradient(180deg, rgba(4,0,9,1) 0%, rgba(19,0,41,1) 50%, rgba(22,0,47,1) 100%)";
break;
case "azul":
obj.tema_background = "rgb(15,70,107)";
obj.background_grad =
"linear-gradient(180deg, rgba(15,70,107,1) 0%, rgba(29,81,139,1) 59%, rgba(80,151,221,1) 100%)";
break;
case "laranja":
obj.tema_background = "rgba(118,12,99,1)";
obj.background_grad =
"linear-gradient( 109.6deg, rgba(118,12,99,1) 11.2%, rgba(71,11,75,1) 98.6% )";
break;
case "roxo":
obj.tema_background = "rgb(143,95,230)";
obj.background_grad =
"linear-gradient(180deg, rgba(143,95,230,1) 0%, rgba(180,127,255,1) 50%, rgba(216,195,255,1) 100%)";
break;
case "verde":
obj.tema_background = "rgb(0,106,78)";
obj.background_grad =
"linear-gradient(180deg, rgba(0,106,78,1) 0%, rgba(31,139,110,1) 50%, rgba(22,166,128,1) 100%)";
break;
case "violeta":
obj.tema_background = "rgb(220,134,179)";
obj.background_grad =
"linear-gradient(180deg, rgba(220,134,179,1) 0%, rgba(212,141,173,1) 50%, rgba(232,163,196,1) 100%)";
break;
case "dark":
obj.tema_background = "rgb(0,0,0)";
obj.background_grad =
"linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(30,30,30,1) 50%, rgba(54,54,54,1) 100%)";
break;
}
return obj;
},
ganttPainel() {
.then(res => res.json())
.then(res => {
this.dataRes = res;
this.dataResp = this.dataRes.map(item => ({
...item,
TaskId: Number(item.TaskID),
StartDate: new Date(item.StartDate),
EndDate: new Date(item.EndDate),
isManual: item.isParent,
}));
})
.catch(console.error);
}
},
};
</script>
<style scoped>
.background-gant {
height: 99%;
width: 99%;
overflow: hidden;
margin-bottom: 20px;
margin-left: 10px;
}
.etiquetas {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100%;
}
.etiqueta {
background-color: #393053;
color: white;
padding: 5px;
border-radius: 5px;
margin: 5px;
}
</style>
<style>
.RespDiv {
background-color: #393053;
color: white;
padding: 5px;
border-radius: 5px;
margin: 5px;
}
.e-gantt .e-gantt-toolbar {
border-radius: 5px !important;
margin-bottom: 10px;
background-color: rgba(255, 255, 255, 0);
border: none !important;
}
.e-gantt-splitter {
background-color: rgba(255, 255, 255, 0);
}
.e-gantt-toolbar>.e-toolbar-items {
background-color: rgba(255, 255, 255, 0) !important;
}
.e-gantt-toolbar>.e-toolbar-items>.e-toolbar-item {
margin-left: -3px !important;
}
</style>
