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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Create component library

Thread ID:

Created:

Updated:

Platform:

Replies:

141828 Jan 7,2019 07:37 AM UTC Mar 6,2019 10:02 AM UTC Angular 11
loading
Tags: ejGantt
oscar bartolome
Asked On January 7, 2019 07:37 AM UTC

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.

Jayakumar Duraisamy [Syncfusion]
Replied On January 8, 2019 12:26 PM UTC

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 


oscar bartolome
Replied On February 4, 2019 07:48 AM UTC

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.



Jayakumar Duraisamy [Syncfusion]
Replied On February 5, 2019 01:08 PM UTC

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 


oscar bartolome
Replied On February 6, 2019 02:08 PM UTC

Hi,

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

Thanks

Jayakumar Duraisamy [Syncfusion]
Replied On February 7, 2019 09:01 AM UTC

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 


oscar bartolome
Replied On February 7, 2019 09:13 AM UTC

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.


Jayakumar Duraisamy [Syncfusion]
Replied On February 7, 2019 09:46 AM UTC

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 


oscar bartolome
Replied On February 14, 2019 08:17 AM UTC

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


Jayakumar Duraisamy [Syncfusion]
Replied On February 15, 2019 11:04 AM UTC

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 


oscar bartolome
Replied On March 5, 2019 10:26 AM UTC

Hi,

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



Any idea why?

Thanks

Jayakumar Duraisamy [Syncfusion]
Replied On March 6, 2019 10:02 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;