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.
Unfortunately, activation email could not send to your email. Please try again.

Angular support

Thread ID:

Created:

Updated:

Platform:

Replies:

124326 May 31,2016 11:30 PM Jul 4,2016 08:49 AM JavaScript 14
loading
Tags: ejDiagram
Sachin Shah
Asked On May 31, 2016 11:30 PM

Hi,

I am planning to use ejToolbar, ejCheckbox with ejDiagram in my angular based web application. Are they supporting angular ?

If yes then any sample for event binding.

Regards,
Sachin

Kameshwaran R [Syncfusion]
Replied On June 3, 2016 12:31 AM

Hi Sachin, 
 
We have achieved your requirement and playground sample link have been updated below. Please find the below sample link. 
 
 
Regards, 
Kameshwaran R. 


Sachin Shah
Replied On June 6, 2016 07:45 AM

Thanks a lot for great sample.

But If I add dynamic control in loop

  <div ng-repeat="item in oList" >
<ej-diagram id="diagramCore{{$index}}" .....

Or

 <div id="toolbar{{$index}}" ...

then its giving errors.. like

Error: Syntax error, unrecognized expression: #diagramCore{{$index}}_contextMenu
or
Error: Syntax error, unrecognized expression: #toolbar{{$index}}_target


Regards,
Sachin

Senthil Kumar M [Syncfusion]
Replied On June 9, 2016 07:04 AM

Hi Sachin, 
 
Please use the below format to resolve your reported issue. 
 
<ej-diagram ng-attr-id="{{ 'object-' + index }}" ></ej-diagram> 

angular.module('syncApp', ['ejangular']) 
             .controller('diagram', function ($scope) { 
               $scope.index=2; 
}); 

Here is the playground link for your reference. 

Regards, 
Senthilkumar M 


Sachin Shah
Replied On June 9, 2016 12:26 PM

Thanks.

How to pass parameter in any event ? E-click="onItrmClick(0)"

Sachin Shah
Replied On June 10, 2016 01:11 AM

ng-attr-id="{{ 'object-' + index }}" is works great. But How to get diagram id in nodeCollectionChange event ??

Naganathan Ganesh Babu [Syncfusion]
Replied On June 10, 2016 07:54 AM

Hi Sachin, 
 
Currently we don’t have an option to get the diagram id in events and we have created a new incident for this query. please refer to that incident for further updates. 
 
However as a workaround, you can get the diagram id from node by defining the diagram id in defaultSettings’s node property. 
 
Here is the code example: 
 
<ej-diagram ng-attr-id="{{ 'object-' + index }}" e-height="500px" e-width="700px" e-nodes="nodes" e-backgroundcolor="backgroundColor" 
   e-defaultsettings-node="defaultSettings.node" 
   e-nodecollectionchange="nodeCollectionChange"> 
</ej-diagram> 
angular.module('syncApp', ['ejangular']) 
      .controller('diagram'function ($scope) { 
     $scope.defaultSettings = { 
            node: { 
               diagramId: "object-2" 
            } 
     }; 
     $scope.nodeCollectionChange = function (args) { 
          if (args.element) { 
             console.log(args.element.diagramId); 
          } 
     } 
}); 
 
Here is playground link for your reference. 
 
 
Regards, 
 
Naganathan K G 


Sachin Shah
Replied On June 12, 2016 06:37 AM

How to set diagram background in angularjs ?

Attached modified your sample.

Regards,
Sachin

Attachment: EssentialStudioforJavaScript_DiagramDrawingTool_e4ee669a.zip

Senthil Kumar M [Syncfusion]
Replied On June 13, 2016 06:16 AM

Hi Sachin, 

Please use backgroundImage’s source property to set the image path and set pageSettings “pageBackgroundColor” property as transparent since it will hide the image if it has other than transparent color. 

Please refer to the below code example. 

$scope.backgroundImage = { 
   source: 'https://cdn.syncfusion.com/content/images/company-logos/Syncfusion_Logo_Innovation_with_ease.png' 
}; 
$scope.pageSettings = { 
   pageBackgroundColor: "transparent" 
}; 
 
<ej-diagram ng-attr-id="{{ 'object-' + index }}" e-height="500px" e-width="700px" e-nodes="nodes" e-backgroundcolor="backgroundColor" 
     e-backgroundImage-source="backgroundImage.source"> 
</ej-diagram> 
 

Regards, 
Senthilkumar M 


Sachin Shah
Replied On June 14, 2016 12:14 PM

Thanks a lot. 

Its working fine in web browser. 

But I am trying to use that application on phonegap. but its not working.

any setting required for phonegap ?

Regards,
Sachin

Senthil Kumar M [Syncfusion]
Replied On June 15, 2016 08:03 AM

Hi Sachin, 

Please confirm whether you have defined the attribute “ng-app” in the HTML element. Also to allow CDN link, define the CDN link in CSP (Content-Security-Policy). 

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="syncApp"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="msapplication-tap-highlight" content="no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" /> 
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' http://cdn.syncfusion.com/ 'unsafe-inline'; media-src *" /> 
</head> 
 
Here is the sample for your reference. 

Regards, 
Senthilkumar M 


Sachin Shah
Replied On June 21, 2016 11:35 PM

Thanks a lot for your great support. Without your support, I am not able to develop demo application for my client.

Except diagram Id - everything works well.


Regards,
Sachin

Shyam G [Syncfusion]
Replied On June 23, 2016 08:29 AM

Hi Sachin, 
 
Query  
Response 
Except diagram Id - everything works well. 
Please confirm us whether the workaround is not working which was provided in the earlier update? If not, please share us more details such as screenshot or console error if any in browser. 
 
Regards, 
Shyam G 


Sachin Shah
Replied On July 1, 2016 06:21 AM

Thanks.

reference to CDN  is not working with phone gap..  

Can copy all js and css files locally? If yes then how ?

Regards,
Sachin



Shyam G [Syncfusion]
Replied On July 4, 2016 08:49 AM

Hi Sachin, 

Please check whether you have referred the below line(Content-Security-Policy) in your application to render the diagram with CDN link. 

<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' http://cdn.syncfusion.com/ 'unsafe-inline'; media-src *" /> 
 
 
To refer the CSS and script files locally, please refer those files parallel to the HTML file. Please refer to the sample below for your reference. 
 
 
Please refer to the screenshot below in which we have shown how to refer the CSS and script file parallel to the HTML file. 
 
Screenshot: 
 

Regards, 
Shyam G 


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.

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.

;