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.
Syncfusion Feedback

Angular support

Thread ID:

Created:

Updated:

Platform:

Replies:

124326 Jun 1,2016 03:30 AM UTC Jul 4,2016 12:49 PM UTC JavaScript 14
loading
Tags: ejDiagram
Sachin Shah
Asked On June 1, 2016 03:30 AM UTC

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 04:31 AM UTC

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 11:45 AM UTC

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 11:04 AM UTC

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 04:26 PM UTC

Thanks.

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

Sachin Shah
Replied On June 10, 2016 05:11 AM UTC

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 11:54 AM UTC

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 10:37 AM UTC

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 10:16 AM UTC

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 04:14 PM UTC

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 12:03 PM UTC

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 22, 2016 03:35 AM UTC

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 12:29 PM UTC

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 10:21 AM UTC

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 12:49 PM UTC

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.

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

;