diff --git a/angularjs/Diagram/Connector.md b/angularjs/Diagram/Connector.md index 898b8348..9fca3dde 100644 --- a/angularjs/Diagram/Connector.md +++ b/angularjs/Diagram/Connector.md @@ -1,17 +1,17 @@ --- layout: post -title: Draw a line connecting two points, nodes or ports -description: How to draw a line to connect points, nodes, or ports? +title: Connector in AngularJS Diagram Control | Syncfusion +description: How to draw a line to connect points, nodes, or ports in Syncfusion Essential AngularJS Diagram Control, its elements, and more. platform: AngularJS control: Diagram documentation: ug --- -# Connector +# Connector in AngularJS Diagram Connectors are objects used to create link between two points, nodes or ports to represent the relationships between them. -![](/angularjs/Diagram/Connector_images/Connector_img1.png) +![AngularJS Diagram Connector](Connector_images/Connector_img1.png) ## Create Connector @@ -59,7 +59,7 @@ syncApp.controller('diagramCtrl', function($scope) { {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img2.png) +![AngularJS Diagram Add connector at run time](Connector_images/Connector_img2.png) ### Add connector at run time @@ -85,7 +85,7 @@ diagram.add(connector); {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img3.png) +![AngularJS Diagram Connectors from palette](Connector_images/Connector_img3.png) ### Connectors from palette @@ -192,7 +192,7 @@ syncApp.controller('diagramCtrl', function($scope) { {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img4.png) +![AngularJS Diagram Connections with ports](Connector_images/Connector_img4.png) N> By default, connections are created at the intersecting point of segments and node bounds. The connection between any specific point of source and target nodes can be achieved with connection ports. @@ -311,7 +311,7 @@ syncApp.controller('diagramCtrl', function($scope) { {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img5.png) +![AngularJS Diagram Segments](Connector_images/Connector_img5.png) ## Segments @@ -349,7 +349,7 @@ connectors.push(connector); {% endhighlight %} -![](/angularjs/Diagram/Connector_images/connector_img6.png) +![AngularJS Diagram Straight](Connector_images/connector_img6.png) The `point` property of straight segment allows you to define the end point of it. The following code example illustrates how to define the end point of a straight segment. @@ -383,7 +383,7 @@ connectors.push(connector); {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img7.png) +![AngularJS Diagram Orthogonal segments](Connector_images/Connector_img7.png) ### Orthogonal @@ -415,7 +415,7 @@ connectors.push(connector); {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img8.png) +![AngularJS Diagram Orthogonal](Connector_images/Connector_img8.png) The `length` and `direction` properties allow to define the flow and length of segment. The following code example illustrates how to create customized orthogonal segments. @@ -446,15 +446,15 @@ connectors.push(connector); {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img9.png) +![AngularJS Diagram direction properties](Connector_images/Connector_img9.png) #### Avoid overlapping Orthogonal segments are automatically re-routed, in order to avoid overlapping with the source and target nodes. The following images illustrate how orthogonal segments are re-routed. -![](/angularjs/Diagram/Connector_images/Connector_img10.png) +![AngularJS Diagram Avoid overlapping](Connector_images/Connector_img10.png) -![](/angularjs/Diagram/Connector_images/Connector_img11.png) +![AngularJS Diagram Bezier](Connector_images/Connector_img11.png) N> Overlapping with source and target nodes are only avoided. Other nodes are not considered as obstacles. @@ -488,7 +488,7 @@ connectors.push(connector); {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img12.png) +![AngularJS Diagram properties](Connector_images/Connector_img12.png) The `point1` and `point2` properties of bezier segment enable you to set the control points. The following code example illustrates how to configure the Bezier segments with control points. @@ -526,7 +526,7 @@ connectors.push(connector); {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img13.png) +![AngularJS Diagram vector properties](Connector_images/Connector_img13.png) The `vactor1` and `vector2` properties of bezier segment enable you to define the vectors. The following code illustrates how to configure a bezier curve with vectors. @@ -564,7 +564,7 @@ connectors.push(connector); {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img14.png) +![AngularJS Diagram Complex segments](Connector_images/Connector_img14.png) ### Complex segments @@ -603,7 +603,7 @@ connectors.push(connector); {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img15.png) +![AngularJS Diagram Decorator](Connector_images/Connector_img15.png) ## Decorator @@ -688,7 +688,7 @@ connectors.push(connector3); {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img16.png) +![AngularJS Diagram connector push](Connector_images/Connector_img16.png) ## Padding @@ -734,7 +734,7 @@ var connectors = [{ {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img17.png) +![AngularJS Diagram Padding](Connector_images/Connector_img17.png) The `connectorPadding` property of node defines the space to be left between the node bounds and its edges. The following code example illustrates how to leave the space between a node and its connections. @@ -777,7 +777,7 @@ var connectors = [ {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img18.png) +![AngularJS Diagram connectorPadding](Connector_images/Connector_img18.png) The `connectorPadding` property of port defines the space between the ports and its in/out edges. The following code example illustrates how to leave the space between ports and its connections. @@ -834,7 +834,7 @@ var connectors = [ {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img19.png) +![AngularJS Diagram Bridging](Connector_images/Connector_img19.png) ## Bridging @@ -881,7 +881,7 @@ syncApp.controller('diagramCtrl', function($scope) { {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img20.png) +![AngularJS Diagram Connector](Connector_images/Connector_img20.png) The direction of the bridge can be customized with the property `bridgeDirection`. BridgeDirection defines the intersecting segment where the bridge has to be inserted. By default, the bridge direction points to the top. @@ -904,7 +904,7 @@ syncApp.controller('diagramCtrl', function($scope) { {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img21.png) +![AngularJS Diagram Corner radius](Connector_images/Connector_img21.png) **Limitation**: Bezier segments do not support bridging. @@ -951,7 +951,7 @@ var connectors = [ {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img22.png) +![AngularJS Diagram Appearance](Connector_images/Connector_img22.png) ## Appearance @@ -1010,7 +1010,7 @@ var targetDecorator = { {% endhighlight %} -![](/angularjs/Diagram/Connector_images/Connector_img23.png) +![AngularJS Diagram Interaction](Connector_images/Connector_img23.png) ## Interaction Diagram allows to edit the connectors at runtime. To edit the connector segments at runtime, refer to [Connection Editing](/angularjs/Diagram/Interaction#connection-editing "Connection Editing"). diff --git a/angularjs/Kanban/Getting-Started.md b/angularjs/Kanban/Getting-Started.md index faa9352f..6a317e67 100644 --- a/angularjs/Kanban/Getting-Started.md +++ b/angularjs/Kanban/Getting-Started.md @@ -1,12 +1,12 @@ --- -title: Getting started with Kanban component -description: Rendering a basic Kanban with remote data +title: Getting started with AngularJS Kanban Control | Syncfusion +description: Learn here about getting started with Syncfusion Essential AngularJS Kanban Control, its elements, and more. platform: AngularJS control: Kanban documentation: ug keywords: ejkanban, kanban, kanban board, js kanban --- -# Getting Started +# Getting Started with AngularJS Kanban Before we start with the Kanban, please refer [this page](http://help.syncfusion.com/js/angularjs) page for general information regarding integrating Syncfusion widget’s. @@ -231,7 +231,7 @@ The code example for defining controls in AngularJS is as follows, {% endhighlight %} -![](Getting_Started_images/Getting_Started_img1.png) +![AngularJS Kanban Create a Kanban](Getting_Started_images/Getting_Started_img1.png) ## Data Binding @@ -264,7 +264,7 @@ For demonstration purpose, [Northwind OData service](http://mvc.syncfusion.com/S {% endhighlight %} -![](Getting_Started_images/Getting_Started_img2.png) +![AngularJS Kanban Data Binding](Getting_Started_images/Getting_Started_img2.png) N> ODataAdaptor is the default adaptor used within DataManager. While binding to other web services, proper [`data adaptor`](http://help.syncfusion.com/js/datamanager/data-adaptors) needs to be set for `adaptor` option of DataManager. @@ -302,7 +302,7 @@ In order to display cards in Kanban control, you need to map the database fields {% endhighlight %} -![](Getting_Started_images/Getting_Started_img3.png) +![AngularJS Kanban Mapping Values](Getting_Started_images/Getting_Started_img3.png) N> `e-fields.primaryKey` field is mandatory for “Drag and Drop” ,”Selection” and “Editing” Features. @@ -335,7 +335,7 @@ N> `e-fields.primaryKey` field is mandatory for “Drag and Drop” ,”Selecti {% endhighlight %} -![](Getting_Started_images/Getting_Started_img4.png) +![AngularJS Kanban Enable Swimlane](Getting_Started_images/Getting_Started_img4.png) ## Adding Filters @@ -372,6 +372,6 @@ Filters allows to filter the collection of cards from `dataSource` which meets t {% endhighlight %} -![](Getting_Started_images/Getting_Started_img5.png) +![AngularJS Kanban Adding Filters](Getting_Started_images/Getting_Started_img5.png) N> The control can be render using `ej.web.all.min.js` and angular related references are referred from `ej.widget.angular.min.js` to render the control.