Create component library

[oscar bartolome]

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]

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. 

Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Gantttaskbartemplate-126762701 

 

Please let us know, if you require further assistance on this.  

Regards,  

Jayakumar D 

[oscar bartolome]

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]

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, 

Link: http://www.syncfusion.com/downloads/support/forum/141828/ze/Template1753155019 

Regards, 

Jayakumar D 

[oscar bartolome]

Hi,

using 

src="./assets/images/{{:status}}.png"

{{:status}} returns a '0' .  Any idea why?

Thanks

[Jayakumar Duraisamy]

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]

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]

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]

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]

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. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/GanttTemplate1993522861 

Please let us know, if you need further assistance on this. 

Regards, 

Jayakumar D 

[oscar bartolome]

Hi,

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

Any idea why?

Thanks

[Jayakumar Duraisamy]

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