Skip to content

DOCINFRA-2341_merged_using_automation #116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 21, 2022
Merged

DOCINFRA-2341_merged_using_automation #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
856732c
SEO-2344_Site_Audit_Issues
gowthamanthavasiyappan Jun 17, 2022
c1a135b
SEO-2344_Site_Audit_Issues
gowthamanthavasiyappan Jun 17, 2022
86d07ba
Merge pull request #112 from syncfusion-content/SEO-2344_Site_Audit_I…
ChristoIssac Jun 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 26 additions & 26 deletions angularjs/Diagram/Connector.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

Expand Down Expand Up @@ -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

Expand All @@ -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

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -603,7 +603,7 @@ connectors.push(connector);

{% endhighlight %}

![](/angularjs/Diagram/Connector_images/Connector_img15.png)
![AngularJS Diagram Decorator](Connector_images/Connector_img15.png)

## Decorator

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -834,7 +834,7 @@ var connectors = [

{% endhighlight %}

![](/angularjs/Diagram/Connector_images/Connector_img19.png)
![AngularJS Diagram Bridging](Connector_images/Connector_img19.png)

## Bridging

Expand Down Expand Up @@ -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.

Expand All @@ -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.

Expand Down Expand Up @@ -951,7 +951,7 @@ var connectors = [

{% endhighlight %}

![](/angularjs/Diagram/Connector_images/Connector_img22.png)
![AngularJS Diagram Appearance](Connector_images/Connector_img22.png)

## Appearance

Expand Down Expand Up @@ -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").
Expand Down
16 changes: 8 additions & 8 deletions angularjs/Kanban/Getting-Started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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.