We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Create component library

Hi,
I want to create a component library for my gantt component so it can be embeded in other applications. I know how to do this, but I have some issues due to tooltip, and taskbar templates must be defined in index.html file.
Is it possible to define them in other place inside the component so they can be packaged inside the library?
Thanks.

11 Replies

JD Jayakumar Duraisamy Syncfusion Team January 8, 2019 07:26 AM

Hi Oscar, 
 
We have analyzed your requirement and it is not possible to declare the HTML codes in the (app.component.ts) file. But, we can achieve your requirement by declare the JS Render template in the separate JavaScript file (GanttTemplate.js) and it can be import to the (app.component.ts) file. 
 
Please refer the below code snippets for more information.  
[ts] 
import { Component, ViewEncapsulation, ViewChild } from '@angular/core'; 
import { EJComponents } from 'ej-angular2'; 
import './GanttTemplate.js'; 
 
[js] 
document.write('<script type="text/x-jsrender" id="taskbarTemplate">' + 
               '<div>'+ 
                       //.. 
               '</div>'+ 
    '</script>' ); 
 
We have also prepared the sample for your reference, please find the sample from below location. 
 
Please let us know, if you require further assistance on this.  
Regards,  
Jayakumar D 



OB oscar bartolome February 4, 2019 02:48 AM

Hi,

I'm trying to do it this way and it does work, but I have one issue. My template is like this:

document.write('<script type="text/x-jsrender" id="taskbarTemplate">'+
'{{if #data.item["itemType"] == "NE"}}'+
'<div id="content" class="e-gantt-template-taskbar bg-color">'+
'<div style="font-weight:bold;font-size:14px;position:absolute;top:2px;overflow:hidden;width:100%;z-index:1;font-family:Poppins,sans-serif">'+
'<div>'+
'<img style="float:left;margin-top:1px;margin-left:2px;text-align:left;z-index:1" height="20" width="20" src="assets/images/{{:#data.item["status"]}}.png" title="{{:#data.item["status"]}}" />'+   
'</div>'+
'<div>'+
'{{:#data.item["cnc"]}}'+
'</div>'+
'</div>'+
'<div style="position:absolute;z-index:1;font-size:12px;color:white;top:25px;left:1px;overflow:hidden;width:100%;opacity:0.8;font-family:Poppins,sans-serif">{{:#data.item["material"]}} - {{:#data.item["thickness_formatted"]}}</div>'+
'<div class="e-gantt-template-progressbar" style="font-size:13px;overflow:visible;opacity:0.5">'+
'</div>'+
'</div>'+
'{{/if}}'+
              '</script>');

There is an image that, depending of a 'status' property, changes the image source:

'<div>'+
'<img style="float:left;margin-top:1px;margin-left:2px;text-align:left;z-index:1" height="20" width="20" src="assets/images/{{:#data.item["status"]}}.png" title="{{:#data.item["status"]}}" />'+   
'</div>'+

At index.html it works fine, but in a separate javascript file, the property 'status' is not loaded and image source takes "assets/images/.png" only.

Any idea how to solve it?

Thanks.




JD Jayakumar Duraisamy Syncfusion Team February 5, 2019 08:08 AM

Hi Oscar, 
We have analyzed the reported issue and it is due to improper syntax used to get status value which is referred in the image source. We need to refer status in the image path like “src="./assets/gantt/{{:status}}.png". 
We have prepared sample to refer resource image in the template. Please refer following code snippet, 
document.write('<script type="text/x-jsrender" id="taskbarTemplate">' + 
        '<div class="e-gantt-template-taskbar bg-color" style="border-radius:5px;overflow:hidden;-webkit-transform:translateZ(0);-webkit-mask-image: -webkit-radial-gradient(circle, white, black);">'+ 
            '<div>'+ 
                '{{if #data["resourceNames"]}}'+                 
                '<img style="position:relative;top:8px;left:4px;text-align:left;z-index:1;" height="32" width="32" src="./assets/gantt/{{:resourceNames}}.png" />'+                 
                '<span class="tasknametext" style="position:absolute;z-index:1;font-size:14px;color:white;top:7px;left:40px;font-family:"Segoe UI";overflow:hidden;text-overflow:ellipsis;width:40%;">{{:#data["taskName"]}}</span>'+ 
                '<span class="resourcenametext" style="position:absolute;z-index:1;font-size:12px;color:white;top:25px;left:40px;font-family:"Segoe UI";overflow:hidden;text-overflow:ellipsis;width:40%;opacity:0.5">{{:#data["resourceNames"]}}</span>'+ 
                '<span class="progresstext" style="margin-top:22px;margin-right:4px;position:relative;float:right;color:white;z-index:1;font-family:"Segoe UI";font-size:14px;">{{:#data["status"]}}%</span>'+ 
                '{{else}}'+ 
                '<span style="margin:6px 14px 0 0;position:relative;float:right;color:white;z-index:1;">{{:#data["status"]}}%</span>'+ 
                '{{/if}}'+ 
            '</div>'+ 
            '<div class="e-gantt-template-progressbar" style="font-size:13px;overflow:visible;">'+ 
            '</div>'+ 
        '</div>'+ 
    '</script>'+ 
        ); 
Please find the sample as below location, 
Regards, 
Jayakumar D 



OB oscar bartolome February 6, 2019 09:08 AM

Hi,

using 
src="./assets/images/{{:status}}.png"
{{:status}} returns a '0' .  Any idea why?

Thanks


JD Jayakumar Duraisamy Syncfusion Team February 7, 2019 04:01 AM

Hi Oscar, 
In Gantt, we have status property in each Gantt record using for internal calculations of progress value and it is always representing progress Mapping value. Hence, using template with {{: status}} returns Gantt record progress value. If the progress value is 0 then it is applied in your image path. 
Please share your image names and your data source, we will help you to resolve this problem. 
Regards, 
Jayakumar D 



OB oscar bartolome February 7, 2019 04:13 AM

Hi,

ok, I want to take the value of a custom property of the tasks called "status". I have tried changing its name to "statusName" and using:

src="./assets/images/{{:#data.item["statusName"]}}.png"
src="./assets/images/{{:#data["statusName"]}}.png"
src="./assets/images/{{:statusName}}.png"

But the property remains empty when refering to it in an image source. 

In other place of the code works fine, like:

''+
'Status: {{:#data.item["statusName"]}}'+
''+

Any idea?

Thanks.



JD Jayakumar Duraisamy Syncfusion Team February 7, 2019 04:46 AM

Hi Oscar, 
 
As we said in our earlier update that getting property value inside template in the src path, we need to refer as below, It’s works for us in our shared demo sample. 
 
“src="./assets/images/{{:statusName}}.png" 
 
If possible share demo sample or screenshot of folder structure and code snippets. We will provide exact solution for this problem. 
 
Regards, 
Jayakumar D 



OB oscar bartolome February 14, 2019 03:17 AM

Hi,

I've solved this issue creating a variable with the status value and assigning it to the image source:

'{{* url = data.item["status"]}}'+
'<img style="float:left;margin-top:1px;margin-left:2px;text-align:left;z-index:1" height="20" width="20" +
src="./assets/images/{{*:url}}.png" title={{*:url}} />'

But now I have another issue. I'm using ng-packagr module to create my library package and it doesn't allow to add .js files, so I can't include in the package the .js file with the templates and the other one with the helper functions. Any solution to this?

Thanks



JD Jayakumar Duraisamy Syncfusion Team February 15, 2019 06:04 AM

Hi Oscar, 
We have prepared sample and referred JsRender template in typescript file itself. Hence, you can remove the JS file import reference in your TS file.  
Please find the code example below: 
constructor() {    
             this.renderTemplate(); 
  }    
renderTemplate(){ 
                        document.write('<script type="text/x-jsrender" id="taskbarTemplate">' + 
        '<div class="e-gantt-template-taskbar bg-color" style="border-radius:5px;overflow:hidden;-webkit-transform:translateZ(0);-webkit-mask-image: -webkit-radial-gradient(circle, white, black);">'+ 
            '<div>'+    ///…… 
    '</script>' 
    )} 
 
Please find the sample from below location. 
Please let us know, if you need further assistance on this. 
Regards, 
Jayakumar D 



OB oscar bartolome March 5, 2019 05:26 AM

Hi,

doing it like that causes a javascript error "Maximum Clall Stack Size Excedeed". 



Any idea why?

Thanks


JD Jayakumar Duraisamy Syncfusion Team March 6, 2019 05:02 AM

Hi Oscar, 
 
We have analyzed the reported issue with our previously updated sample. We are unable to reproduce the reported issue. This issue may occur due to recursive call in any function or cyclic dependency in file import.  
Kindly ensure whether any recursive call exists in your function. Still issue exists at your end kindly share us if any modifications in previously provided code /replication procedure/necessary files/code snippets to replicate the reported issue. This would be helpful for us to proceed further. 
 
Regards, 
Jayakumar D 


Loader.
Live Chat Icon For mobile
Up arrow icon