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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

str.match is not a function - error

Thread ID:

Created:

Updated:

Platform:

Replies:

149512 Nov 28,2019 10:48 AM UTC Dec 9,2019 04:34 AM UTC Angular - EJ 2 8
loading
Tags: Gantt Chart
Nikitha
Asked On November 28, 2019 10:48 AM UTC

Hello,

I'm facing this error when I tried to add additional data into the tooltip for taskbar using <ng-template>.

And inject the template in tooltipSettings,
when I run and hover on the taskbar I get this error "str.match is not a function".

I referred a similar error on another thread "https://www.syncfusion.com/forums/144809/str-match-is-not-a-function"
and the solution was to have same version for all syncfusion packages.
As you can see below I am using an ej2-ng-diagrams package.

I dont want to remove the package ej2-ng-diagrams.
Is there any way to show additional data?
Also I want to remove duration data showing from the tooltip.
I need some help on this.

Thank you

Nikitha R.

Pooja Priya Krishna Moorthy [Syncfusion]
Replied On November 29, 2019 11:20 AM UTC

Hi Nikitha, 
Please find the below response. 
S.No 
Queries 
Syncfusion Comments 
 
1 
 
 
"str.match is not a function". 
I dont want to remove the package ej2-ng-diagrams. 
 
 
We prepared a sample by installing packages of different version. We are not able to reproduce the issue. We suspect that this issue may arise when duplicate packages are installed. Please follow the below steps. 
  1. Clear the npm cache by running the command npm cache clean –force.
  2. Delete package_lock.json and @syncfusion packages from node modules folder.
  3. Then install the new packages.
 
If the issue still persists, you can install @syncfusion/ej2-angular-diagrams with same version used for other components in package.json instead of ej2-ng-diagrams after following the above steps. Because this package name was updated as @syncfusion/ej2-angular-diagrams. 
 
If you don’t want to use @syncfusion/ej2-angular-diagrams instead of ej2-ng-diagrams, can you please share us the details and requirement with old diagram package? 
 
 
2 
 
 
Is there any way to show additional data? 
Also I want to remove duration data showing from the tooltip. 
 
 
Yes, it is possible to show additional data, and also we can remove the default data displayed in the tooltip. To render customized tooltip, it is not necessary to define the taskbar property in tooltipSettings. 
Please find the below code example. 
 
 
<ejs-gantt id="ganttDefault" 
    //... 
    > 
  <ng-template #tooltipSettingsTaskbar let-data> 
     <table class="e-gantt-tooltiptable"> 
       <tbody> 
             //... 
             <tr> 
                <td class="e-gantt-tooltip-label"> Planned start time </td> 
                <td>:</td> 
                 <td class="e-gantt-tooltip-value">{{ format(data.BaselineStartDate)}}</td> 
              </tr> 
         </tbody> 
       </table> 
   </ng-template> 
</ejs-gantt> 
 
In the provided sample, we removed the default taskName and duration field and included an additional data Baseline start date and Baseline end date. 
 
 
We have prepared a sample based on your requirement, please find the sample from below link.  
 
Please get back to us if you require further assistance on this. 
 
Thanks,  
Pooja K 


Nikitha
Replied On November 30, 2019 06:08 AM UTC

Hello,

Thank you for replying.
I removed the old package ej2-ng-diagrams , deleted package-lock.json file and installed ej2-angular-diagrams.


Also added your given ng-template code and removed toolSettings.
I don't see the error ' str.match is not a function' anymore.
But now I am getting this error when I hover on the taskbar,

When I debug this , template.js, line-12 on 'templateEle'

inside elementRef showing nativeElement

inside _viewContainershowing all properties..

I don't understand why 'undefined' error is showing.
Please look into this.

Thank you
Nikitha R


Nikitha
Replied On December 2, 2019 05:25 AM UTC

Hello,

I would like to add one more problem which I am facing.

An empty tooltip shows at the top left corner of my page when I hover on the taskbar. I think it due to this 'null' error.


Please look into this.

Thank you,
Nikitha R

Jonesherine Stephen [Syncfusion]
Replied On December 3, 2019 01:27 PM UTC

Hi Nikitha, 
Thank you for the detailed information. 
 
We have analyzed the provided query, and we can reproduce the reported issue in Angular v5.2.0.  
But this issue not occurs in Angular v8.0.0, we have prepared the sample based on this. 
Can you please upgrade your project version to angular 8 to resolve this issue? 
 
Regards, 
Jone sherine P S 


Nikitha
Replied On December 4, 2019 05:42 AM UTC

Hello,

Thank you for replying,

Upgrading version to angular 8 is a huge step. Eventually we will have to upgrade it, but I would like to know whether there is any other way to fix it temporarily.
Can I modify the content from the tootip which is auto generating?
I see that there is an event called beforeTooltipRender(). What is it used for? Will it help to modify the data in tooltip?

Thank you,

Nikitha R

Pooja Priya Krishna Moorthy [Syncfusion]
Replied On December 5, 2019 09:57 AM UTC

Hi Nikitha, 
Please find the below response. 
Query1: Upgrading version to angular 8 is a huge step. Eventually we will have to upgrade it, but I would like to know whether there is any other way to fix it temporarily. 
Comments: 
We can found root cause of this issue and solution to resolve this issue. Tooltip control accepts only one html element as value for content property. 
This issue occurs due to compiled Angular template elements contains multiple nodes in Angular version 5.2.5, it contains empty text nodes also, but in Angular 8 version this empty text nodes are ignored. 
Please refer the below GitHub issue link for further reference. 
 
We can fix this issue in Angular 5 version by removing empty faces and newlines between ng-template tag and root tag(here table) of template like shown in below code snippet. 
 
<ejs-gantt id="ganttDefault" height="430px" > 
    <ng-template #tooltipSettingsTaskbar let-data><table class="e-gantt-tooltiptable"> 
            //... 
        </table> 
    </ng-template> 
</ejs-gantt> 
 
We also prepared a sample in angular version v5.2.5, please find the sample from below link. 
 
Query 2: Can I modify the content from the tootip which is auto generating? I see that there is an event called beforeTooltipRender(). What is it used for? Will it help to modify the data in tooltip? 
Comments: 
Yes, it is possible to modify the data in the tooltip using beforeTooltipRender event. This event gets triggered while hovering on the element that is, before the tooltip renders. Please find the below code example. 
 
 
[app.component.html] 
<ejs-gantt id="ganttDefault" 
    //... 
    (beforeTooltipRender) = "beforeTooltipRender($event)" > 
</ejs-gantt> 
 
[app.component.ts] 
export class AppComponent { 
  //... 
  public beforeTooltipRender(args: any): void { 
        if(args.data && args.data.TaskId == 3) { 
        args.content.innerHTML = 'Testing' 
    } 
  } 
} 
 
 
Regards, 
Pooja K. 
 


Nikitha
Replied On December 6, 2019 05:18 AM UTC

Hello,

Your solution worked!! It was very helpful.

Thank you for replying,

Nikitha R

Pooja Priya Krishna Moorthy [Syncfusion]
Replied On December 9, 2019 04:34 AM UTC

Hi Nikitha, 
Most welcome! 
We are happy that your issue has been resolved. 
Please let us know if you need further assistance on this. 

Regards, 
Pooja K. 


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

Live Chat Icon For mobile
Live Chat Icon